3、表格标签

1、表格标签

1.1表格的主要作用

表格主要用于显示、展示数据，可以使得数据更加规整。而当在后台显示数据时，能够熟练运用表格会使得繁杂的数据被清爽简约的表格有条理性地展示出来。

表格是用来展示数据的，不是用来布局的。

1.2表格的基本语法

<table>

<tr>

<td>单元格中的内容</td>

…………

</tr>

………………

</table>

1）<table></table>是用来定义表格的标签

2）<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

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

4）字母td指表格数据，即单元格的主要内容。

1.3表头单元格标签

   一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。突出重要性。

   <th>标签表示HTML表格的表头部分

<table>

<tr>

<th>表头单元格中的内容</th>

…………

</tr>

………………

</table>

1.4表格属性

表格标签这部分属性实际开发中不常用，后期会通过CSS来设置。

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

1.5表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。在表格标签中，分别用：<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域。可以更加清楚地了解表格结构。

1）<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签。一般是位于第一行。

2）<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。

3）以上标签都是放在<table></table>标签中。

1.6合并单元格

在表格中通常会需要将多个单元格合并为一个单元格。

1）合并单元格的方式

跨行合并：rowspan=“合并单元格的个数“（纵向）

跨列合并：colspan=“合并单元格的个数“（横向）

2）目标单元格：写合并代码

跨行：最上侧单元格为目标单元格，写合并代码。

跨列：最左侧单元格为目标单元格，写合并代码。

3）合并单元格的步骤

1.先确定是跨行合并还是跨列合并。

2.找到目标单元格，写上合并方式=合并数量。

3.删除多余的单元格。

补充：

1）caption：表示表格的标题信息，作为table的子元素。

2）colgroup：列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其他元素的前面。col经常作为colgroup的子元素，有span属性，规定几列为同一列。