HTML Tables Structuring Planet Data 给了我一组关于太阳系行星的数据,用学到的 HTML 知识画一个表格。

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
        <title>Planets data</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <h1>Planets data</h1>
            Data about the planets of our solar system (Planetary facts taken from
            <a href=""
              >Nasa's Planetary Fact Sheet - Metric</a
            <col span="2" />
            <col style="border: 2px solid black" />
            <col span="9" />
              <td colspan="2">&nbsp;</td>
              <th scope="col">Name</th>
              <th scope="col">Mass (10<sup>24</sup>kg)</th>
              <th scope="col">Diameter (km)</th>
              <th scope="col">Density (kg/m<sup>3</sup>)</th>
              <th scope="col">Gravity (m/s<sup>2</sup>)</th>
              <th scope="col">Length of day (hours)</th>
              <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
              <th scope="col">Mean temperature (°C)</th>
              <th scope="col">Number of moons</th>
              <th scope="col">Notes</th>
              <th rowspan="4" colspan="2" scope="rowgroup">Terrestrial planets</th>
              <th scope="row">Mercury</th>
              <td>Closest to the Sun</td>
              <th scope="row">Venus</th>
              <th scope="row">Earth</th>
              <td>Our World</td>
              <th scope="row">Mars</th>
              <td>The red planet</td>
              <th rowspan="4" scope="rowgroup">Jovian planets</th>
              <th rowspan="2" scope="rowgroup">Gas giants</th>
              <th scope="row">Jupiter</th>
              <td>The largest planet</td>
              <th scope="row">Saturn</th>
              <th rowspan="2" scope="rowgroup">Ice giants</th>
              <th scope="row">Uranus</th>
              <th scope="row">Neptune</th>
              <th colspan="2" scope="rowgroup">Dwarf planets</th>
              <th scope="row">Pluto</th>
                Declassified as a planet in 2006, but this
                  >remains controversial</a
    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;


HTML 中的表格是一个强大的工具,它能够以直观的形式显示数据。通过以上练习,我使用了 table , caption , colgroup , col , thead , tbody , tr , th , td 元素,并用到了 span , colspan , rowspan , scope 属性。

Welcome to tell me your thoughts via "email" or click "here"