6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记07-table表格

2022-04-15 0 73 web前端社区

6.jpg 0 前端程序猿

表格

table,caption

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

  1. <table>
  2. ... ...
  3. </table>

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

  1. <table>
  2. <caption>示例表格</caption>
  3. </table>

thead、tbody、tfoot

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

  1. <table>
  2. <thead>... ...</thead>
  3. <tbody>... ...</tbody>
  4. <tfoot>... ...</tfoot>
  5. </table>

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

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

colgroup,col

一般不用colgroup,col,只做了解。
<colgroup><table>的一级子元素,用来包含一组列的定义。<col><colgroup>的子元素,用来定义表格的一列。

  1. <table>
  2. <colgroup>
  3. <col>
  4. <col>
  5. <col>
  6. </colgroup>
  7. </table>

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

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

  1. <table>
  2. <colgroup>
  3. <col class="c1">
  4. <col class="c2">
  5. <col class="c3">
  6. </colgroup>
  7. <tr>
  8. <td>1</td>
  9. <td>2</td>
  10. <td>3</td>
  11. </tr>
  12. </table>

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

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

  1. <table>
  2. <colgroup>
  3. <col>
  4. <col span="2">
  5. <col>
  6. </colgroup>
  7. </table>

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

tr

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

  1. <table>
  2. <tr>...</tr>
  3. <tr>...</tr>
  4. <tr>...</tr>
  5. </table>

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

th,td

<th><td>都用来定义表格的单元格。其中,<th>是标题单元格有加粗居中的样式,<td>是数据单元格。

  1. <table>
  2. <tr>
  3. <th>学号</th><th>姓名</th>
  4. </tr>
  5. <tr>
  6. <td>001</td><td>张三</td>
  7. </tr>
  8. <tr>
  9. <td>002</td><td>李四</td>
  10. </tr>
  11. </table>

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

colspan属性,rowspan属性

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

  1. <table>
  2. <tr>
  3. <td colspan="2">A</td><td>B</td>
  4. </tr>
  5. <tr>
  6. <td>A</td><td>B</td><td>C</td>
  7. </tr>
  8. </table>

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

headers属性

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

  1. <table>
  2. <tr>
  3. <th id="no">学号</th><th id="names">姓名</th>
  4. </tr>
  5. <tr>
  6. <td headers="no">001</td><td headers="names">张三</td>
  7. </tr>
  8. <tr>
  9. <td headers="no">002</td><td headers="names">李四</td>
  10. </tr>
  11. </table>

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

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

scope属性

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

  1. <table>
  2. <tr>
  3. <th scope="col">姓名</th>
  4. <th scope="col">学号</th>
  5. <th scope="col">性别</th>
  6. </tr>
  7. <tr>
  8. <th scope="row">张三</th>
  9. <td>001</td>
  10. <td></td>
  11. </tr>
  12. <tr>
  13. <th scope="row">李四</th>
  14. <td>002</td>
  15. <td></td>
  16. </tr>
  17. </table>

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

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

  • row:该行的所有单元格,都与该标题单元格相关。
  • col:该列的所有单元格,都与该标题单元格相关。
  • rowgroup:多行组成的一个行组的所有单元格,都与该标题单元格相关,可以与rowspan属性配合使用。
  • colgroup:多列组成的一个列组的所有单元格,都与该标题单元格相关,可以与colspan属性配合使用。
  • auto:默认值,表示由浏览器自行决定。

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

  1. <table>
  2. <thead>
  3. <tr>
  4. <th scope="col">海报名称</th>
  5. <th scope="col">颜色</th>
  6. <th colspan="3" scope="colgroup">尺寸</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <th rowspan="3" scope="rowgroup">Zodiac</th>
  12. <th scope="row">Full color</th>
  13. <td>A2</td>
  14. <td>A3</td>
  15. <td>A4</td>
  16. </tr>
  17. <tr>
  18. <th scope="row">Black and white</th>
  19. <td>A1</td>
  20. <td>A2</td>
  21. <td>A3</td>
  22. </tr>
  23. <tr>
  24. <th scope="row">Sepia</th>
  25. <td>A3</td>
  26. <td>A4</td>
  27. <td>A5</td>
  28. </tr>
  29. </tbody>
  30. </table>

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

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

海报名称 颜色 尺寸
Zodiac Full color A2 A3 A4
Black and white A1 A2 A3
Sepia A3 A4 A5 2
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3