HTML里不为人知的秘密(01)之table表格练习_构建行星数据

2021-01-25 17:13

阅读:646

标签:ref   nss   data   www   ges   play   The   body   img   

HTML之table表格练习_构建行星数据

主要练习内容:

tbody 表格主体

caption 表格的标题

thead 表格的表头

tfoot 表格的页脚

th 表格的表头单元格

 练习技巧: 先写一个完整的表格[最多行最多列],再考虑合并的问题

技术图片技术图片
DOCTYPE html>
html>
head>
    meta charset="utf-8">
    title>太阳系行星数据title>

    style>
        html {
            font-family: sans-serif;
        }

        table {
            border-collapse: collapse;
            border: 2px solid rgb(200,200,200);
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        td, th {
            border: 1px solid rgb(190,190,190);
            padding: 10px 20px;
        }

        th {
            background-color: rgb(235,235,235);
        }

        td {
            text-align: center;
        }

        tr:nth-child(even) td {
            background-color: rgb(250,250,250);
        }

        tr:nth-child(odd) td {
            background-color: rgb(245,245,245);
        }

        caption {
            padding: 10px;
        }
    style>
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: 2px solid black">
    colgroup>
    thead>
    tr>
        td colspan="2">td>
        th scope="col">名字th>
        th scope="col">图片th>
        th scope="col">质量 (10sup>24sup>kg)th>
        th scope="col">直径 (km)th>
        th scope="col">密度 (kg/msup>3sup>)th>
        th scope="col">重力 (m/ssup>2sup>)th>
        th scope="col">天长 (小时)th>
        th scope="col">与太阳距离 (10sup>6sup>km)th>
        th scope="col">平均温度 (°C)th>
        th scope="col">卫星数量th>
        th scope="col">备注th>
    tr>
    thead>
    tbody>
    tr>
        th rowspan="4" colspan="2" scope="rowgroup">类地行星th>
        th scope="row">水星th>
        td>img src="images/mercury.jpg" alt="水星">td>
        td>0.330td>
        td>4,879td>
        td>5427td>
        td>3.7td>
        td>4222.6td>
        td>57.9td>
        td>167td>
        td>0td>
        td>距太阳最近td>
    tr>
    tr>
        th scope="row">金星th>
        td>img src="images/venus.jpg" alt="金星">td>
        td>4.87td>
        td>12,104td>
        td>5243td>
        td>8.9td>
        td>2802.0td>
        td>108.2td>
        td>464td>
        td>0td>
        td>td>
    tr>
    tr>
        th scope="row">地球th>
        td>img src="images/earth.png" alt="地球">td>
        td>5.97td>
        td>12,756td>
        td>5514td>
        td>9.8td>
        td>24.0td>
        td>149.6td>
        td>15td>
        td>1td>
        td>我们的世界td>
    tr>
    tr>
        th scope="row">火星th>
        td>img src="images/mars.jpg" alt="火星">td>
        td>0.642td>
        td>6,792td>
        td>3933td>
        td>3.7td>
        td>24.7td>
        td>227.9td>
        td>-65td>
        td>2td>
        td>红色星球td>
    tr>
    tr>
        th rowspan="4" scope="rowgroup">类木行星th>
        th rowspan="2" scope="rowgroup">气巨星th>
        th scope="row">木星th>
        td>img src="images/jupiter.jpg" alt="木星">td>
        td>1898td>
        td>142,984td>
        td>1326td>
        td>23.1td>
        td>9.9td>
        td>778.6td>
        td>-110td>
        td>67td>
        td>太阳系最大td>
    tr>
    tr>
        th scope="row">土星th>
        td>img src="images/saturn.jpg" alt="土星">td>
        td>568td>
        td>120,536td>
        td>687td>
        td>9.0td>
        td>10.7td>
        td>1433.5td>
        td>-140td>
        td>62td>
        td>td>
    tr>
    tr>
        th rowspan="2" scope="rowgroup">冰巨星th>
        th scope="row">天王星th>
        td>img src="images/uranus.jpg" alt="天王星">td>
        td>86.8td>
        td>51,118td>
        td>1271td>
        td>8.7td>
        td>17.2td>
        td>2872.5td>
        td>-195td>
        td>27td>
        td>td>
    tr>
    tr>
        th scope="row">海王星th>
        td>img src="images/neptune.jpg" alt="海王星">td>
        td>102td>
        td>49,528td>
        td>1638td>
        td>11.0td>
        td>16.1td>
        td>4495.1td>
        td>-200td>
        td>14td>
        td>td>
    tr>
    tr>
        th colspan="2" scope="rowgroup">矮行星th>
        th scope="row">冥王星th>
        td>img src="images/pluto.jpg" alt="冥王星">td>
        td>0.0146td>
        td>2,370td>
        td>2095td>
        td>0.7td>
        td>153.3td>
        td>5906.4td>
        td>-225td>
        td>5td>
        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>
View Code

效果图:

技术图片

 

 

 其他:

参考地址: 构建行星数据

HTML里不为人知的秘密(01)之table表格练习_构建行星数据

标签:ref   nss   data   www   ges   play   The   body   img   

原文地址:https://www.cnblogs.com/dafei4/p/13235185.html


评论


亲,登录后才可以留言!