欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML——表格的结构标签

程序员文章站 2022-04-29 18:29:31
...

     在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>

结果:

HTML——表格的结构标签