HTML 表格语义化

一，表格语义化
为了使网页内容更好地被搜索引擎理解，在使用表格进行布局时，HTML中引入了thead>、< tbody > 和< tfoot)这三个语义化标签，用来将表格划分为头部、主体和页脚三部分。用这三个部分来定义网页中不同的内容，三个标签的详细理解如下。
● < thead >< /thead >标签: 用于定义表格的头部，位于< table >< /table >标签中，一 般包含网页的logo和导航等头部信息。
●< tfoot >< /tfoot >标签: 用于定义表格的页脚，位于< table >< /table> 标签中。< thead >< /thead >标签之后，一般包 含网页底部的企业信息等。< tbody >< /tbody > 标签:用于定义表格的主体，位于< table >标签中。< tfoot >< /tfoot >标签之后，一般包含网页中除 头部和底部以外的其他内容。

由案例可以发现，语义化表格效果上并没有什么变化，< thead >，< tbody > 和< tfoot >三个标签不带任何效果，只是更好地提供了语义化的功能，根据表格的需求尽量添加相应的语义化标签。需要注意< thead >、< tfoot > 这两个标签在一个< table >标签中 只能出现一次，而< tbody >标签可以出现多次。

二，合并行与列
在Word中设计表格时，有时需要将两个或多个的相邻单元格组合成一个单元格，即合并单元格的操作。在HTML中，也需要用到“表格合并行”和“表格合并列”。合并行使用< td >标签的rowspan 属性，而合并列则用到< td >标签的 colspan属性。接下来通过案例来演示表格合并列。


效果如下：
设置合并行演示：

演示效果如下：
三，表格其他属性
HTML为表格提供了一系列的属性，用于控制表格的显示样式，控制单元格的其他属性还有以下几个，

属性名 含义 属性值
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置单元格水平对齐方式 左对齐 居中 右对齐
valign 设置单元格垂直对其方式 基线对齐 上对齐 居中 下对齐

1，width演示：
效果如下：

2，height属性演示：

效果如下：
3，align属性演示：


4，valign属性演示 ：
效果：