当前位置:主页HTML 教程

12. 表格标签

文章来源:知付 更新时间:2022-05-28 23:35 热度:328

表格(table)以行(row)和列(column)的形式展示数据。

目录
- <table>,<caption>

 - <thead>、<tbody>、<tfoot>

 - <colgroup>,<col>

 - <tr>

 - <th>,<td>

<table><caption>

<table> 是一个块级容器标签,所有表格内容都要放在这个标签里面。

<table>
  ... ...
</table>

<caption> 总是 <table> 里面的第一个子元素,表示表格的标题。该元素是可选的。

<table>
  <caption>示例表格</caption>
</table>

<thead><tbody><tfoot>

<thead><tbody><tfoot> 都是块级容器元素,且都是 <table> 的一级子元素,分别表示表头、表体和表尾。

<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

这三个元素都是可选的。如果使用了 <thead> ,那么 <tbody><tfoot> 一定在 <thead> 的后面。如果使用了 <tbody> ,那么 <tfoot> 一定在 <tbody> 后面。

大型表格内部可以使用多个 <tbody> ,表示连续的多个部分。

<colgroup><col>

<colgroup><table> 的一级子元素,用来包含一组列的定义。 <col><colgroup> 的子元素,用来定义表格的一列。

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
</table>

上面代码表明表格有3列。

<col> 不仅是一个单独使用的标签,没有结束标志,而且还是一个空元素,没有子元素。它的主要作用,除了申明表格结构,还可以为表格附加样式。

<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

上面代码中, <colgroup> 声明表格有三列,每一列有自己的 class,可以使用 CSS 针对每个 class 设定样式,会对整个表格生效。

<col> 有一个 span 属性,值为正整数,默认为 1 。如果大于1,就表示该列的宽度包含连续的多列。

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
</table>

上面代码中,表格的表头定义了3列,实际数据有4列。表头的第2列会连续跨2列。

<tr>

<tr> 标签表示表格的一行(table row)。如果表格有 <thead><tbody><tfoot> ,那么 <tr> 就放在这些容器元素之中,否则直接放在 <table> 的下一级。

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

上面代码表示表格共有3行。

<th><td>

<th><td> 都用来定义表格的单元格。其中, <th> 是标题单元格, <td> 是数据单元格。

<table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>

上面代码中,表格一共有三行。第一行是标题行,所以使用 <th> ;第二行和第三行是数据行,所以使用 <td>

(1) colspan 属性, rowspan 属性

单元格会有跨越多行或多列的情况,这要通过 colspan 属性和 rowspan 属性设置,前者表示单元格跨越的栏数,后者表示单元格跨越的行数。它们的值都是一个非负整数,默认为1。

<table>
  <tr>
    <td colspan="2">A</td><td>B</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

上面代码中,第一行的第一个单元格会跨两列。

(2) headers 属性

如果表格很大,单元格很多,源码里面会看不清,哪个单元格对应哪个表头,这时就可以使用 headers 属性。

<table>
  <tr>
    <th id="no">学号</th><th id="names">姓名</th>
  </tr>
  <tr>
    <td headers="no">001</td><td headers="names">张三</td>
  </tr>
  <tr>
    <td headers="no">002</td><td headers="names">李四</td>
  </tr>
</table>

上面代码中,标题栏的 <th> 设置了 id 属性,后面的 <td> 单元格的 headers 属性就对应这些 id 属性的值,因此就能看出来这些单元格对应哪个标题栏。

headers 属性的值总是对应 <th> 标签的 id 属性的值。由于一个单元格可以对应多个标题栏(跨行的情况),所以 headers 属性可以是一个空格分隔的字符串,对应多个 id 属性的值。

(3) scope 属性

scope 属性只有 <th> 标签支持,一般不在 <td> 标签使用,表示该 <th> 单元格到底是栏的标题,还是列的标题。

<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>001</td>
    <td>男</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>002</td>
    <td>男</td>
  </tr>
</table>

上面代码中,第一行的标题栏都是列标题,所以 <th>scope 属性为 col ,第二行和第三行的第一列是行标题,所以 <th> 标签的 scope 属性为 row

scope 属性可以取下面这些值。

  • row :该行的所有单元格,都与该标题单元格相关。

  • col :该列的所有单元格,都与该标题单元格相关。

  • rowgroup :多行组成的一个行组的所有单元格,都与该标题单元格相关,可以与 rowspan 属性配合使用。

  • colgroup :多列组成的一个列组的所有单元格,都与该标题单元格相关,可以与 colspan 属性配合使用。

  • auto :默认值,表示由浏览器自行决定。

下面是一个 colgroup 属性和 rowgroup 属性的例子。

<table>
  <thead>
    <tr>
      <th scope="col">海报名称</th>
      <th scope="col">颜色</th>
      <th colspan="3" scope="colgroup">尺寸</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Zodiac</th>
      <th scope="row">Full color</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

上面的例子中,列标题“尺寸”的 scope 属性为 colgroup ,表示这个标题单元格对应多列(本例为3列);行标题的 scope 属性为 rowgroup ,表示这个标题单元格对应多行(本例为3行)。

渲染结果就是下面的样子。

海报名称 颜色 尺寸 Zodiac Full color Black and white Sepia
A2 A3 A4 A1 A2 A3 A3
A4 A5
分享到:

#免责声明#

版权声明:《 12. 表格标签 》为作者 知付 原创文章,转载请注明原文地址!
本站所有文章,如无特殊说明或标注,均为本站原创或整合发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本文地址:https://www.yoppunion.com/HTML%20%E6%95%99%E7%A8%8B/147.html
同类推荐
评论列表
签到

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

微信扫一扫打赏