HTML 表格一口气讲完！

最新推荐文章于 2025-03-25 21:26:20 发布

爱编程的鱼

最新推荐文章于 2025-03-25 21:26:20 发布

阅读量882

点赞数 15

分类专栏： HTML 文章标签： html tensorflow 前端

本文链接：https://blog.csdn.net/m0_69824302/article/details/144921964

版权

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>

最低0.47元/天解锁文章