HTML 表格

2018-06-16 16:14 更新

HTML表格


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

table

具有本地属性bordertable标记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 元素可以出现在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>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号