HTML——表格的结构标签
在HTML 中除了对表格的设计标签外,还有一些标签是用来明确表格结构的,这些标签在源码中清晰的区分表格结构,HTML中规定了<thead>、<tbody>和<tfoot> 三个标签,分别对应表格的表首、表主体和表尾。使用这些标签能对表格的一行或多行单元格的属性进行统一修改,从而省去了逐一修改单元格属性的麻烦。
1. 设置表首样式
功能: 表首样式标签<thead>,用于定义表格最上端表首的样式,其中可以设置背景颜色、文本对齐方式、文字对齐方式、文字的垂直对齐方式等
语法: <thead align=value1 bgcolor=color_value valign=value2>
value1: 水平对齐方式
color_value: 颜色代码
value2: 垂直对齐方式
在<thead> 标签中还可以包含 <td>、<th>和<tr>标签,而一个表元素只能有一个 <thead> 标签。
2. 设置表主体样式
功能: 表主体标签<tbody>用于定义表格主体的样式
语法: <tbody align=value1 bgcolor=color_value valign=value2>
value1: 水平对齐方式
color_value: 颜色代码
value2: 垂直对齐方式
3. 设置表尾样式
功能: 使用<tfoot> 标签用于定义表尾的样式
语法: <tfoot align=value1 bgcolor=color_value valign=value2>
value1: 水平对齐方式
color_value: 颜色代码
value2: 垂直对齐方式
【例】:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中国摇滚巨星</title>
</head>
<body>
<table>
<thead bgcolor="red" align="center" valign="middle">
<tr>
<th height="50" >崔健</th>
<th >许巍</th>
<th>黄家驹</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="cuijian.jpg"></td>
<td height="300"><img height="300" src="xuwei.jpg"></td>
<td><img src="huangjiaju.jpg"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><img height="200" src="biaowei.jpg"></td>
</tr>
</tfoot>
</table>
</body>
</html>
结果: