构建行星数据

本项目复习表格的使用，项目参考于：MDN

点击此处查看效果

gitHub

任务介绍

 

- 为你的表格添加我们提供的标题。

- 在表格的 header 中添加一行，用来包括所有列的标题。

- 在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。

- 确保所有内容都插入了正确的单元格，在原始数据中，每行行星数据都显示在其相关行星的旁边。

- 添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联

- 为包含所有行星标题的行标题的那一列数据，添加一个黑色边框

 

知识点

 

- table 创建表格

- caption 为你的表格增加一个标题

- thead 放置在头部的位置，因为它通常代表第一行

- tbody 存放表数据

- tfoot 一般放在最后一行，往往是对前面所有行的总结

- tr 表格行

- th 数据标题

- scope 可添加在th标签，用来指明是行标题还是列标题

- td 表格数据

- colspan,rowspan 属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格

- 为表格中的列提供共同的样式

- colgroup 一个colgroup标签含有多个col标签

- col 用于定义列的样式

- span 需要一个无单位的数字值，用来制定你想要让这个样式应用到表格中多少列

demo:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>太阳系中行星的一些数据</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css"> 
  </head>
  <body>
    <h1>太阳系中行星的一些数据</h1>
    <table>
      <colgroup>
        <col>
        <col>
        <col id="col-name">
      </colgroup>
    
      <caption>太阳系中行星的一些数据。<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">（资料及图片取自 NASA 行星数据（公制单位））</a></caption>
      <thead>
        <tr>
          <th colspan="2" scope="col">&nbsp;</th>
          <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>
      </thead>
      <tbody>
        <tr>
          <th colspan="2" rowspan="4" scope="row">类地行星</th>
          <td>水星</td>
          <td>0.330</td>
          <td>4,879</td>
          <td>5427</td>
          <td>3.7</td>
          <td>4222.6</td>
          <td>57.9</td>
          <td>167</td>
          <td>0</td>
          <td>与太阳最近</td>
        </tr>
        <tr>
            <td>金星</td>
            <td>4.87</td>
            <td>12,104</td>
            <td>5243</td>
            <td>8.9</td>
            <td>2802.0</td>
            <td>108.2</td>
            <td>464</td>
            <td>0</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
          <td style="background-color: skyblue">地球</td>
          <td style="background-color: skyblue">5.97</td>
          <td style="background-color: skyblue">12,756</td>
          <td style="background-color: skyblue">5514</td>
          <td style="background-color: skyblue">9.8</td>
          <td style="background-color: skyblue">24.0</td>
          <td style="background-color: skyblue">149.6</td>
          <td style="background-color: skyblue">15</td>
          <td style="background-color: skyblue">1</td>
          <td style="background-color: skyblue">我们的世界</td>
        </tr>
        <tr>
          <td>火星</td>
          <td>0.642</td>
          <td>6,792</td>
          <td>3933</td>
          <td>3.7</td>
          <td>24.7</td>
          <td>227.9</td>
          <td>-65</td>
          <td>2</td>
          <td>红色星球</td>
        </tr>
        <tr>
          <th scope="rowgroup" colspan="1" rowspan="4">类木行星</th>
          <th scope="row" rowspan="2">气巨星</th>
          <td>木星</td>
          <td>1898</td>
          <td>142,984</td>
          <td>1326</td>
          <td>23.1</td>
          <td>9.9</td>
          <td>778.6</td>
          <td>-110</td>
          <td>67</td>
          <td>太阳系最大</td>
        </tr>
        <tr>
          <td>土星</td>
          <td>568</td>
          <td>120,536</td>
          <td>687</td>
          <td>9.0</td>
          <td>10.7</td>
          <td>1433.5</td>
          <td>-140</td>
          <td>62</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <th scope="row" rowspan="2">冰巨星</th>
          <td>天王星</td>
          <td>86.8</td>
          <td>51,118</td>
          <td>1271</td>
          <td>8.7</td>
          <td>17.2</td>
          <td>2872.5</td>
          <td>-195</td>
          <td>27</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>海王星</td>
          <td>102</td>
          <td>49,528</td>
          <td>1638</td>
          <td>11.0</td>
          <td>16.1</td>
          <td>4495.1</td>
          <td>-200</td>
          <td>14</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <th scope="row" colspan="2">矮行星</th>
          <td>冥王星</td>
          <td>0.0146</td>
          <td>2,370</td>
          <td>2095</td>
          <td>0.7</td>
          <td>153.3</td>
          <td>5906.4</td>
          <td>-225</td>
          <td>5</td>
          <td>2006年降格，但是 <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a>.</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>