HTML 表格标签元素详解

表格的主要作用

• 表格主要用来展示数据的，因为它可以让数据显示得非常规整，可读性非常好。

表格的基本语法

<table></table>：用于定义表格的标签；
<tr></tr>：用于定义表格的行，必须嵌套在<table></table>标签中；
<td></td>：用于定义表格中的单元格，必须嵌套<tr></tr>标签中。

表头单元格标签

<th>
作用：用于表示HTML表格的表头部分，突出重要性；
注意：一般表头单元格位于表格的第一行或第一列，并且单元格里面的文本内容通常是加粗居中显示的。

表格相关属性

属性名	属性值	说明
align	Left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

• 实际上，表格标签这部分的属性我们并不常用，后面主要是通过CSS来设置。

表格结构标签

• 为了更好的表示表格的语义，我们有必要学习表格的结构标签

<thead></thead>：用于定义表格的头部，并且内部必须拥有<tr>标签。一般是位于第一行
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
注意：以上标签都是放在<table></table>标签中。

合并单元格

1. 合并单元格的方式：

• 跨行合并：rowspan=“合并单元格的个数”；
• 跨列合并：colspan=“合并单元格的个数”

2. 目标单元格

• 跨行：最上侧的单元格为目标单元格；
• 跨列：最左侧的单元格为目标单元格

3. 合并单元格的步骤：

（1）先确定是跨行合并还是跨列合并；

（2）找到目标单元格，写上合并方式；

（3）删除多余的单元格

---

微信公众号也会同步发布，有兴趣的朋友也可以加个关注！谢谢！（gh_a50712c8f292）