HTML中实现原生表格并设置表格边框的两种方式

最新推荐文章于 2025-09-21 14:17:20 发布

CflfEditor

最新推荐文章于 2025-09-21 14:17:20 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端前端开发

本文链接：https://blog.youkuaiyun.com/CflfEditor/article/details/133126624

前端开发专栏收录该内容

131 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了两种在HTML中设置原生表格边框的方法：一是使用CSS样式，通过定义类并应用于表格元素，实现自定义边框样式；二是直接使用HTML表格属性，如`border`，`border-collapse`等，适用于简单的样式设置。这两种方式为开发者提供了灵活性，以适应不同的表格设计需求。

在前端开发中，表格是一种常用的元素，用于展示和组织数据。在HTML中，我们可以使用原生的表格标签来创建表格，并通过样式设置来自定义表格的边框。本文将介绍两种实现原生表格并设置表格边框的方式，并提供相应的源代码示例。

方式一：使用CSS样式设置表格边框

首先，我们可以使用CSS样式来设置表格的边框。通过定义特定的CSS类，并将其应用于表格元素，我们可以对表格进行自定义样式设置。

<!DOCTYPE html>
<html>
<head>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CflfEditor

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

关于表格table嵌套,边框合并问题的解决方法

09-28

2. **调整内层表格边框**：为防止内层表格的边框与外层表格的边框冲突，我们可以设置内层表格的边框宽度为0，并隐藏其边框。这可以通过CSS属性`border-width`和`border-style`来实现： ``` ;border-width:0px; ...

【HTML02】HTML表格语法、细边框实现-附带案例-作业

商务合作 / 项目定制开发 / 前端一对一培训、答疑

06-18

3045

将table的border属性设置为1，然后使用CSS的属性border-collapse属性设置为collapse，来合并边框。将table的border属性设置为1，然后使用另外的html表格属性cellspacing来合并边框。找到要跨行的第一个单元格，给他添加rowspan=“要跨的行数，比如2” 找到要跨行的第一个单元格，给他添加colspan=“要跨的列数，比如2” 找到另外一行的那个单元格，将其删除或注释。找到另外一列的那个单元格，将其删除或注释。创建单元格，td、th。

参与评论您还未登录，请先登录后发表或查看评论

原生html表格

qq_34631220的博客

07-19

1102

原生html表格

HTML基础（二）----表格

2401_87564369的博客

09-21

2104

rowspan的值为单元格所跨的行数，如果跨的是两行单元格（即rowspan="2"），则在下一行中就不用定义相应的单元格，如果跨的是三行单元格，则在下两行中就不用定义相应的单元格，以此类推。colspan的值为所跨单元格的列数。（2）：对于非嵌套表格，百分比表示的时表格应该占据的浏览器窗口的百分比；（3）：用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化调整，而用像素设置大小的表格是绝对大小。在表格设计中，width属性用于设置表格的宽度，height属性用于设置表格的高度。

原生表格-html

alo_ne的博客

08-30

882

<!DOCTYPE html> <html lang="en"> <head> <title>Table_Simple CSS for HTML tables</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> ht

【原生HTML+Vue】表格

Qxn530的博客

07-06

1393

原生:多个表格循环合并、一个表格合并后多选、横向、纵向滚动条、js原生表格左右调整列宽

HTML中的table表格设置边框

Y753984997的专栏

05-06

1838

table表格中的边框会重叠

原生JavaScript实现HTML表格行拖动功能

本文标题“HTML表格行拖动实现[源码]”明确指出其核心目标：通过原生HTML与JavaScript技术实现对表格（table）中的行（tr）进行上下自由拖动的功能。该方法不依赖任何第三方库（如jQuery或Vue），完全基于浏览器原生...

html中table表格合并边框线

最新发布

12-02

使用CSS方法后，表格的边框会变成单线，每个单元格之间只有一条边框线，而不是默认的两条（表格边框和单元格边框分开）。 ### 注意事项： - 如果只设置了`table`的边框而没有设置单元格的边框，那么合并后只有表格...

HTML 表格

unber的博客

02-17

1140

HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和 <caption > （表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。表格的表头使用 <th> 标签进行定义。

HTML设置表格边框的方法

ByteProwl的博客

09-29

1241

在HTML中，我们可以使用CSS样式来设置表格的边框。HTML中的表格是网页设计中常用的元素之一，可以用于展示结构化的数据。综上所述，我们可以使用上述两种方法之一来设置HTML表格的边框。上述代码中，我们定义了一个名为"bordered-table"的CSS类，并设置了边框的样式为1像素的黑色实线。通过以上方法，你可以根据需要自定义HTML表格的边框样式，使其符合你的设计要求。上述代码中，我们创建了一个包含两行两列的表格，并在每个单元格中添加了一些文本。属性的值为"1"，表示表格边框的宽度为1个像素。

原生 html 绘制表格

qq_41365048的博客

03-21

1489

心血来潮，打开自己电脑的 idea 找到 n 久之前自己练手的 demo, 觉得还挺有用的，就随手记录一下咯。如果各位看官有更加便捷的方式或插件绘制表格的方法也可以留言讨论一下哈。实现效果：完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生成绩表</title> </head> <bod

HTML中正确设置表格table边框border的三种办法

weixin_37087311的博客

08-07

4694

html中如果设置table的border为1px，实际会产生双线，十分不美观，那么在HTML中如何正确设置表格table边框border呢？第一种方法：　　1、将table的属性设置为：BORDER=0 、cellspacing=1 ；　　2、设置table的背景色为即你要设置的table的边框颜色；　　3、设置所有td...

html 原生table表格样式修改，和element table一样

m0_60189398的博客

11-07

834

html 原生table表格样式修改，和element table一样

HTML标签：table之原生语法

qq_42273666的博客

06-12

466

熟悉table表格标签

原生html、css写表格合并行、合并列示例

weixin_43932597的博客

03-24

877

【代码】原生html、css写表格合并行、合并列示例。

html--给表格table添加边框

夏微微的博客

12-28

1184

1、这样似的 table border=“1” <html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr>

Html：正确给table表格加边框