html主要语义化标签(二)

一、table表格:

1、caption和summary:表格的标题和摘要;<table summary="摘要"> <caption>标题</caption> </table>

2、<tr></tr>表格的一行开始和结束;

3、<th></th>;  <td></td>代表表格中每个单元的内容;其中th可以作为列/行的标题;

4、<colgroup>  <col>...<col style="样式"> </colgroup>;对表的某一列进行整体样式的控制;

5、th的属性值scope="row/col/rowgroup/colgroup":一行或者一列的结构化标记;(这是一行/一列);于此类似的还有th标签中添加id属性,每个td标签添加headers属性(单元格属性哪一行和哪一列);

6、table还可以将表格结构化成<thead>、<tbody>、<tfoot>;

7、在table样式中添加table-collapse:collapse样式的时候,表中的单元格之间的边框进行合并;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>太阳系行星数据</title>
    <link href="minimal-table.css" rel="stylesheet">
  </head>
  <body>
    <h1>太阳系行星数据</h1>
    <table>
       <caption>太阳系中行星的一些数据。(资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星数据 - 公制</a>,图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片库</a>。)</caption>
       <colgroup>
          <col span="2">
          <col style="border:3px solid #000">
      </colgroup> 
       <tbody>
            <tr>
                <td colspan="2"></td>
                <th scope="col">名字</th>
                <th scope="col">质量 (10<sup>24</sup>kg)</th>
                <th scope="col">直径 (km)</th>
                <th scope="col">密度 (kg/m<sup>3</sup>)</th>
                <th scope="col">重力 (m/s<sup>2</sup>)</th>
                <th scope="col">天长 (hours)</th>
                <th scope="col">与太阳距离 (10<sup>6</sup>km)</th>
                <th scope="col">平均温度 (°C)</th>
                <th scope="col">卫星数量</th>
                <th scope="col">备注</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <th colspan="2" scope="rowgroup" rowspan="4">类地行星</th>
                <th scope="row">水星</th>
      
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值