break-word; clear: both; text-indent: 21px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">表格的结构标签
break-word; clear: both; text-indent: 21px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">在HTML中除了有对表格的设计标签外，还有一些标签是用来明确表格结构的，这些标签在源码中清晰地区分表格结构。HTML规定了<thead>、<tbody>和<tfoot>三个标签，分别对应表格的表首、表主体和表尾。使用这些标签能对表格的一行或多行单元格的属性进行统一修改，从而省去逐一修改单元格属性的麻烦。
1．设置表首样式
表首<thead>，用于定义表格最上端表首的样式，，可以设置背景颜色、文本对齐方式、文字对齐方式、文字的垂直对齐方式等，具体语法如下：
| <thead bgcolor=color_value valign=value2> </thead> |
2.设置表主体样式
表主体标签<tbody>用于定义表格主体的样式,具体语法如下：
| <tbody bgcolor=color_value valign=value2></tbody> |
3.设置表尾样式
使用<tfoot>标签用于定义表尾的样式,具体语法如下：
| <tfoot bgcolor=color_value valign=value2> </tfoot> |
下面通过案例2-32来演示表格的结构标签应用，如图2-32所示。
例2-32 example32.html
<!DOCTYPEhtml"> <html> <head> <meta charset="utf-8" /> <title>运用结构标签布局商城页面</title> </head> <body> <tablewidth="900" cellspacing="12" border="1"> <thead bgcolor="#B2B2B2" align="center" valign="middle"> <tr > <th >潮流前沿</th> <th >手机酷玩</th> <th >品质生活</th> </tr> </thead> <tbody align="right" bgcolor="#fff"> <tr > <td>品牌精选新品</td> <td>乐Pro三新品</td> <td>巨超值 卖疯了</td> </tr> <tr > <td><imgsrc="images/1.jpg" width=200px alt=""></td> <td><imgsrc="images/2.jpg" width=200pxalt=""></td> <td><imgsrc="images/3.jpg" width=200px alt=""></td> </tr> </tbody> <tfoot> <tr><tdcolspan="3" ><img src="images/6.jpg" width=800px></td></tr> </tfoot> </table> </body> </html> |
图2-32运用结构标签布局
