《Web前端开发精品课 HTML与CSS进阶教程》——2.4 表格语义化-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Web前端开发精品课 HTML与CSS进阶教程》——2.4 表格语义化

简介:

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章,第2.4节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 表格语义化

不少初学者看了《Web前端开发精品课HTML和CSS基础教程》(本书的姊妹篇)跑来问:“不是说表格布局已经被抛弃了吗?为什么还要在书里讲解表格呢?这不是多此一举吗?”其实不然,在实际开发中,我们不建议使用表格布局,应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了,但是这并没有说明表格就一无是处了。

问大家一个问题:如图2-5所示的这种表格数据的展示,应该怎么实现呢?不少得了“table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上,对于这种表格数据形式,最好的选择还是table。


<a href=https://yqfile.alicdn.com/00c03a61c1b35bd83a04ad960faac8ba155cc23b.png" >

在表格中,我们比较常用的标签是table、tr和td这3个。不过为了加强表格的语义化,W3C还增加了5个标签:th、caption、thead、tbody和tfoot。th表示“表头单元格”;caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分:表头、表身和表脚。有了这几个标签,表格语义更加良好,结构更加清晰。对于这5个标签,我们在本书的姊妹篇中已经做了详细的介绍,这里就不再赘述。表格标签如表2-1所示。


<a href=https://yqfile.alicdn.com/6183fd20c476682d35e5ed9f8dfd5d5a642e83ba.png" >

语法:

<table>
   <caption>表格标题</caption>
   <!--表头-->
   <thead>
     <tr>
       <th>表头单元格1</th>
       <th>表头单元格2</th>
     </tr>
   </thead>
   <!--表身-->
   <tbody>
     <tr>
       <td>标准单元格1</td>
       <td>标准单元格2</td>
     </tr>
     <tr>
       <td>标准单元格1</td>
       <td>标准单元格2</td>
     </tr>
   </tbody>
   <!--表脚-->
   <tfoot>
     <tr>
       <td>标准单元格1</td>
       <td>标准单元格2</td>
     </tr>
   </tfoot>
</table>

说明:

thead、tbody和tfoot这三个标签也是表格中非常重要的标签,它从语义上区分了表头、表身和表脚。很多人容易忽略这三个标签。

上述语法显示效果如图2-6所示。


56860357ce44bc41d56daec632837e072b1d14c8

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style type="text/css">
     table, thead, tbody, tfoot, th, td 
     {
       border: 1px dashed gray;
     }
   </style>
</head>
<body>
   <table>
     <caption>考试成绩表</caption>
     <thead>
       <tr>
         <th>姓名</th>
         <th>语文</th>
         <th>英语</th>
         <th>数学</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>小明</td>
         <td>80</td>
         <td>80</td>
         <td>80</td>
       </tr>
       <tr>
         <td>小红</td>
         <td>90</td>
         <td>90</td>
         <td>90</td>
       </tr>
       <tr>
         <td>小杰</td>
         <td>100</td>
         <td>100</td>
         <td>100</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <td>平均</td>
         <td>90</td>
         <td>90</td>
         <td>90</td>
       </tr>
     </tfoot>
   </table>
</body>
</html>

在浏览器预览效果如图2-7所示。


96a306b994198cca2c1f725a53361caa7ffdb210

分析:
对于thead、tbody和tfoot这3个标签,不一定能够全部都用得上,例如tfoot就很少用。一般情况下,我们都是根据实际需要来使用这3个标签的。

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章