HTML——表格的结构标签

23 篇文章 0 订阅

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

结果:




  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值