HTML里不为人知的秘密(01)之table表格练习_构建行星数据
2021-01-25 17:13
标签:ref nss data www ges play The body img 主要练习内容: tbody 表格主体 caption 表格的标题 thead 表格的表头 tfoot 表格的页脚 th 表格的表头单元格 练习技巧: 先写一个完整的表格[最多行最多列],再考虑合并的问题 效果图: 其他: HTML里不为人知的秘密(01)之table表格练习_构建行星数据 标签:ref nss data www ges play The body img 原文地址:https://www.cnblogs.com/dafei4/p/13235185.htmlHTML之table表格练习_构建行星数据
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>
参考地址: 构建行星数据
文章标题:HTML里不为人知的秘密(01)之table表格练习_构建行星数据
文章链接:http://soscw.com/index.php/essay/46884.html