Document

HTML 表格一口气讲完！

2025-01-05
dfer
37
html tensorflow 前端 CSDN

HTML 表格

HTML表格

每个表必须包含三个元素: table ， tr 和 td 。

table

具有本地属性border的table标记HTML文档中的表。

table 元素可以有 caption，colgroup，thead，tbody，tfoot，tr，th和td 元素。

table元素的summary，align，width，bgcolor，cellpadding，cellspacing，frame和rules属性已过时。

border 属性的值必须为1。边框的厚度必须使用CSS设置。

tr

tr 元素表示表行。

HTML表是面向行的，您必须分别表示每一行。

tr 元素可以在 table ， thead tfoot 和 tbody 元素内使用。

tr 元素可以包含一个或多个 td 或 th 元素。

align，char，charoff，valign 和 bgcolor 属性已过时。你必须使用CSS。

td

td 与 colspan，rowspan，headers 局部属性表示表单元格。

scope 属性已过时。请使用 th 元素上的 scope 属性。

abbr，axis，align，width，char，charoff，valign，bgcolor，height 和 nowrap 属性已过时，因此必须使用CSS。

例子

您可以组合它们来创建表，如下面的代码所示。

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
</body>
</html>

实例：长单元格

添加更长的单元格内容

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>A</td>
      <td>G</td>
      <td>M</td>
    </tr>
    <tr>
      <td>O</td>
      <td>O</td>
      <td>L</td>
    </tr>
    <tr>
      <td>E</td>
      <td>Long cell</td>
      <td>V</td>
    </tr>
  </table>
</body>
</html>

thead - 表头包装器

thead 元素定义一行或多行，这些行是table元素的列标签。

没有 thead 元素，所有的tr元素都被假定为属于表的主体。

align，char，charoff 和valign属性已过时。

以下代码显示将 thead 元素添加到实例表中。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

th - 表头单元格

th 元素标记标题单元格，使我们能够区分数据及其描述。

th 元素的父代是 tr 元素。它具有局部属性: colspan，rowspan，scope，headers 。

abbr，axis，align，width，char，charoff，valign，bgcolor，height，和 nowrap 属性已过时，而你必须使用CSS。

以下代码向表中添加标题单元格。

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Color</th>
      <th>Size</th>
    </tr>
    <tr>
      <th>Favorite:</th>
      <td>Apples</td>
      <td>Green</td>
      <td>Medium</td>
    </tr>
    <tr>
      <th>2nd Favorite:</th>
      <td>Oranges</td>
      <td>Orange</td>
      <td>Large</td>
    </tr>
    <tr>
      <th>3rd Favorite:</th>
      <td>Pomegranate</td>
      <td>A kind of greeny-red</td>
      <td>Varies from medium to large</td>
    </tr>
  </table>
</body>
</html>

th 和 td 元素在一行中混合在一起。它向表中添加垂直头和行头。

tbody - 表主体

tbody 元素标记表体的行，而不是标题行和页脚行。

align，char，charoff 和 valign 属性已过时。

大多数浏览器在处理table>元素时会自动插入 tbody 元素，即使它在文档中未指定。依赖于表格布局的CSS选择器可能会失败。

例如，像 table > tr的选择器将不工作，因为浏览器在table和 tr 元素之间插入了一个 tbody。

要解决这个问题，您必须使用选择器，如 table > tbody > tr， table tr (no> character)，甚至只是 tbody > tr 。

以下代码显示了向示例表中添加 tbody 元素。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

tfoot - 表页脚

tfoot 元素标记表页脚。

tfoot 元素可以出现在tbody 或 tr 元素之前或之后。

align，char，charoff 和 valign 属性已过时。

在HTML5之前， tfoot 元素必须出现在 tbody 元素之前。

在HTML5中，您可以将 tfoot 元素放在 tbody 或最后一个 tr 元素后面。

以下代码显示了如何使用 tfoot 元素为table元素创建页脚。

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th>Size</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Rank Footer</th>
        <th>Name Footer</th>
        <th>Color Footer</th>
        <th>Size Footer</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javacript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>Json</td>
        <td>Text</td>
        <td>CSV</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

HTML 表头

HTML表头 —— headers

<td>和<th>元素定义 headers 属性，可用于使用屏幕阅读器和其他技术更容易地处理表。

headers 属性的值是一个或多个单元的 ID 属性值。

以下代码显示了如何使用此属性。

<!DOCTYPE HTML>
<html>
<head>
  <title>HTML 表头(w3cschool.cn)</title>
  <style>
    thead th,
    tfoot th {
      text-align: center;
      background: #FE6A00;
      color: white
    }
    tbody th {
      text-align: center;
      background: lightgrey;
      color: grey;
    }
    tbody td {
      text-align: center;
    }
    thead [colspan],
    tfoot [colspan] {
      text-align: center;
    }
    #first,
    #second {
      background: #FAEBD7;
      color: #FE6A00;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th id="time">时间</th>
        <th id="weather">天气</th>
        <th id="temperature">温度/℃</th>
        <th id="wind">风向</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="first">7月24日</th>
        <td headers="weather first">多云</td>
        <td headers="temperatire first">26~37</td>
        <td headers="wind first">南风</td>
      </tr>
      <tr>
        <th id="second">7月25日</th>
        <td headers="weather second">多云</td>
        <td headers="temperatire second">26~36</td>
        <td headers="wind second">南风</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="4">&copy; 2020 www.w3cschool.cn 编程狮</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

尝试一下

全局id属性被添加到tbody 中的thead和th元素中的th个元素。

对于 tbody 中的每个 td 和 th headers 属性将单元格与列标题相关联。

HTML 表列

HTML表列

colgroup - 表列组

HTML表是面向行的。将单元格的定义放在 tr 中元素中，并逐行构建表。

要将样式应用于列，我们可以使用 colgroup 和 col 元素。

具有局部属性 span 的colgroup 元素表示一组列。

colgroup 元素可以包含零个或多个 col 元素。

width，char，charoff 和 valign 属性已过时。

以下代码显示了 colgroup 元素的使用。

<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {
  background-color: red
}

#colgroup2 {
  background-color: green;
  font-size: small
}
</style>
</head>
<body>
  <table>
    <colgroup id="colgroup1" span="3" />
    <colgroup id="colgroup2" span="2" />
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
        <td>500</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>CSS</td>
        <td>Java</td>
        <td>Javascript</td>
        <td>450</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

上面的代码定义了两个 colgroup 元素。 span 属性指定 colgroup 元素应用于多少列。

列表中的第一个 colgroup 应用于表中的前三列，其他元素应用于后两列。

全局 id 属性是为每个 colgroup 元素定义的，CSS样式通过使用 id 值作为选择器来定义。

col - 表单个列

您可以使用 col 元素而不是 colgroup 元素的 span 属性定义组。

col 元素具有局部属性: span 。

align，width，char，charoff 和 valign 属性已过时。

您可以将样式应用于列的组和该组中的单个列。 col 元素放置在 colgroup 元素内部， col 的每个实例表示组中的一列。

以下代码使用 col 元素。

<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {
  background-color: red
}

#col3 {
  background-color: green;
  font-size: small
}
</style>
</head>
<body>
  <table>
    <colgroup id="colgroup1">
      <col id="col1And2" span="2" />
      <col id="col3" />
    </colgroup>
    <colgroup id="colgroup2" span="2" />
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>1234</td>
        <td>1234</td>
        <td>1234</td>
        <td>500</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>1234</td>
        <td>1234</td>
        <td>1234</td>
        <td>450</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

您可以使用 span 属性创建表示 colgroup 中两列的col 元素。

如果不使用 span 属性，col 元素表示单个列。

上面的代码将样式应用于 colgroup 和其它包含的 col 元素之一。

HTML 表跨度

HTML表格跨度

colspan - 列跨度

要将单元格跨多个列，请使用 colspan 属性。

分配给 colspan 的值必须是整数。

您还必须删除展开后的单元格将覆盖的单元格元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2nd Favorite:</th>
        <td>HTML</td>
        <td>HTML</td>
        <td>Oracle</td>
        <td>MySQL</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>XML</td>
        <td colspan="2" rowspan="2">This is a test.</td>
        <td>203</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="5">&copy; 2011 www.w3cschool.cn Enterprises</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

rowspan - 行跨度

要将单元格跨多行，您可以使用 rowspan 属性。您分配给此属性的值是要跨越的行数。

分配给 rowspan 的值必须为整数。

如果希望中间列中的一个单元格跨越所有三行，您将 rowspan 属性应用于单元格2。

您还必须删除展开后的单元格将覆盖的单元格元素。

以下代码将单元格扩展为覆盖多行。

<!DOCTYPE HTML>
<html>
<head>
<style>
td {
  border: thin solid black;
  padding: 5px;
  font-size: x-large
}
</style>
</head>
<body>
  <table border="1">
    <tr>
      <td>1</td>
      <td rowspan="3">2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>9</td>
    </tr>
  </table>
</body>
</html>

HTML 表标题

HTML表格标题

caption 元素允许您定义一个标题并将其与table元素相关联。

align 属性已过时。

例子

以下代码显示了正在使用的caption元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <table>
    <caption>Results of the Survey</caption>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>500</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

表只能包含一个 caption 元素，但不一定是表中包含的第一个元素。

HTML 表边框

HTML表格边框

table 元素定义 border 属性。

大多数浏览器在表和每个单元格周围绘制边框。

例子

以下代码显示了 border 元素的应用。

<!DOCTYPE HTML>
<html>
<body>
  <table border="1">
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>A</td>
        <td>G</td>
        <td>M</td>
        <td>500</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>O</td>
        <td>O</td>
        <td>L</td>
        <td>450</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

注意

分配给 border 属性的值必须为1或空字符串(“")。此属性不会控制边框的样式。

边框的样式由CSS控制。

上一篇： 145. Web前端

下一篇： js和html有什么