HTML基础--表格相关知识

2023-10-03 10:40:52

学习目标：

希望能够通过简单的实践，更加清楚地掌握表格更多高阶知识，比如像表格的标题/摘要，以及将你表格中的各行分组成头部、正文、页脚部分，能更加熟练的运用表格元素展示我们丰富的数据.

学习内容：

什么是表格
表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。

1.HTML表格高级特性和可访问性

(1)使用 <caption>为你的表格增加一个标题

标题意味着包含对于表格内容的描述，这对那些希望可以快速浏览网页中的表格对他们是否有帮助的读者们来说，是非常好的功能。特别是盲人用户，不需要让屏幕阅读设备读出很多单元格的内容，来让用户了解这张表格讲的是什么，而是可以依靠标题的内容，来决定是否需要了解更详细的内容。
标题就放在 <table> 标签的下面。

<table>
  <caption>Dinosaurs in the Jurassic period</caption>
  ...
</table>

(2)添加 <thead>, <tfoot>, 和 <tbody> 结构

由于表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 <thead>, <tfoot>,和 <tbody> , 这些元素允许你把表格中的部分标记为表头、页脚、正文部分。
这些元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。给你一些有趣的例子，在长表格的情况下，你可以在每个打印页面上使表格页眉和页脚重复，你也可以让表格的正文部分显示在一个单独的页面上，并通过上下滚动来获得内容。

<thead> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 <col>/<colgroup> 元素，那么<thead>元素就需要放在它们的下面。
<tfoot> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(浏览器仍将它呈现在表格的底部)
<tbody> 需要嵌套在 table 元素中，放置在 <thead> 的下面或者是 <tfoot> 的下面，这取决于你如何设计你的结构。(<tfoot>放在<thead> 下面也可以生效.)

(3)嵌套表格

在一个表格中嵌套另外一个表格是可能的，只要你包含完整的结构，包括 <table>元素。这样通常是不建议的，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，可访问性也降低了。以及在很多情况下，也许你只需要插入额外的单元格/行/列到已有的表格中。然而有时候是必要的，比如你想要从其他资源中更简单地导入内容。

<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

(4)对于视力受损的用户的表格

视力受损的用户经常使用一个屏幕阅读设备来为他们读出网页上的信息。对于盲人来说，阅读简单的文字没有什么问题，但是要理解一张表格的内容，这就有一些难度了。虽然，使用正确的标记，我们可以用程序化来代替视觉关联。
下面提供了更一步的技术来使表格的可访问性尽可能地提高。
使用行和列的标题
屏幕阅读设备会识别所有的标题，然后在它们和它们所关联的单元格之间产生编程关联。列和行标题的组合将标识和解释每个单元格中的数据，以便屏幕阅读器用户可以类似于视力正常的用户的操作来理解表格。
scope属性
scope 属性，可以添加在<th> 元素中，用来帮助屏幕阅读设备更好地理解那些标题单元格，这个标题单元格到底是列标题呢，还是行标题。

可以明确地将列标题这样定义：

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

每一行都可以这样定义一个行标题 (如果我们已经使用了 th 和 td 元素):

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

屏幕阅读设备会识别这种结构化的标记，并一次读出整列或整行，比如:scope 还有两个可选的值：colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。
id 和标题属性
如果要替代 scope 属性，可以使用 id 和 headers 属性来创造标题与单元格之间的联系。使用方法如下:

为每个<th> 元素添加一个唯一的 id 。
为每个 <td> 元素添加一个 headers 属性。每个单元格的headers 属性需要包含它从属于的所有标题的id，之间用空格分隔开。

这会给你的HTML表格中每个单元格的位置一个明确的定义。像一个电子表格一样，通过 headers 属性来定义属于哪些行或列。为了让它工作良好，表格同时需要列和行标题。

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>
  ...
</tbody>

2.Table in HTML

与HTML中的许多其他结构一样，表格是使用元素构建的。具体来说，可以使用三个元素来声明一个基本表，即 <table>（主容器）、<tr>（表示行、单元格的容器）和 <td>（表示普通单元格）。
根据它们在代码中的位置编号的单元格遵循表示中从左到右的顺序，一次一行。这将产生进一步的影响，特别是在单元跨越和分组方面。

(1)标题单元格

标题单元格是一种特殊类型的单元格，用于组织和分类表格中的其他单元格。话虽如此，很难想象没有使用标题单元格的表格。几乎任何表格都可以从一组放置良好的标题单元格中受益。
由 <th> element表示的标题单元格位于表格的第一行，位于常规单元格的顶部。
范围属性
该scope属性提供了一种机制来明确说明标头正在影响哪些单元格。此属性只能在标题单元格中声明并取值“col”、“row”、“colgroup”和“rowgroup”。值“col”和“row”表示标题单元格正在为其所在的列或行（分别）中的其余单元格提供标题信息。

(2)标题

标题的概念是对表格中的数据或其用途进行一致的描述，引入上下文，使其更容易理解。在HTML中，标题是使用<caption>元素插入的，正好在表的开始标记之后，所有其他结构元素之前。

<table class="default">
  <caption>Fuel consumption of cars during the drive tests</caption>
  <tr>
    <th scope="col">Car</th>
    <th>January</th>
    <th>February</th>
    <th>March</th>
  </tr>
  <tr>
    <th>Chevrolet Camaro</th>
    <td>1254 gal</td>
    <td>1582 gal</td>
    <td>685 gal</td>
  </tr>
  <tr>
    <th>Lamborghini Aventator</th>
    <td>1854 gal</td>
    <td>1978 gal</td>
    <td>1502 gal</td>
  </tr>
</table>

(3)单元格跨越

单元格跨越是作者将两个或多个相邻单元（<td>和<th>）合并或融合到一个表中的一种机制。这种效果可以通过使用单元格的属性colspan（用于水平跨越）和rowspan（用于垂直跨越）来实现。这些属性可以采用大于零的整数，表示当前单元格要跨越的单元格数。
当在一个单元格中设置属性colspan时，它指示解释器，该单元格不仅应该跨越它自己的空间，而且应该跨越右侧多个相邻单元格的单元格空间。rowspan的情况也一样，但向下。由于HTML中的表结构，只能向右或向下 进行扩展。向上或向左移动都是试图跨越已经被占用的空间。
在下面的示例中，表中的一个单元格跨越三个单元格空间，如colspan属性所示。请注意，在代码中，该特定单元格右侧的两个单元格的声明是如何进行的。这是合适的，因为这些细胞的空间已经被前一代人占据了。

<table class="default">
  <tr>
    <th></th>
    <th>Day 1</th>
    <th>Day 2</th>
    <th>Day 3</th>
    <th>Day 4</th>
  </tr>
  <tr>
    <th>Mike (injured)</th>
    <td colspan="3">0 km</td>
    <td>4 km</td>
  </tr>
  <tr>
    <th>Susan</th>
    <td>23 km</td>
    <td>18 km</td>
    <td>19 km</td>
    <td>15 km</td>
  </tr>
</table>

(4)分组行

HTML提供了三个元素，可以帮助作者组织表格中的数据。这些元素是：<thead>，对呈现标题信息的行进行分组；<tfoot>包含代表页脚或摘要的行；和<tbody>, 表示由数据体组成的行块。
表格的主体有两个特殊性：第一，一张表格中可以有多个主体；其次，当表格只有一个主体时，可以省略该<tbody>元素。适合第二种情况的表被称为具有隐式正文。
当一个表有多个主体时，每个主体必须对主题相关的行进行分组。在下面的示例中，上面显示的同一个表已经过重组以包含两个主体，每个月一个。这些主题组只是语义上的，但我们将向它们添加一些样式只是为了使这些组可见。

<table class="default">
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Anthony</th>
      <th colspan="2">Lione</th>
    </tr>
    <tr>
      <th scope="col">Date</th>
      <th>Income</th>
      <th>Outcome</th>
      <th>Income</th>
      <th>Outcome</th>
    </tr>
  </thead>
  <tbody style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">
    <tr>
      <th>07/15</th>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$0</td>
      <td>$0</td>
    </tr>
    <tr>
      <th>07/28</th>
      <td>$0,00</td>
      <td>$100,00</td>
      <td>$100,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tbody style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
    <tr>
      <th>08/09</th>
      <td>$0,00</td>
      <td>$50,00</td>
      <td>$0,00</td>
      <td>$80,00</td>
    </tr>
    <tr>
      <th>08/22</th>
      <td>$40,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
      <td>$110,00</td>
    </tr>
    <tr>
      <th>08/25</th>
      <td>$0,00</td>
      <td>$20,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Balance</th>
      <td colspan="2">$20,00</td>
      <td colspan="2">$10,00</td>
    </tr>
  </tfoot>
</table>

(5)分组列

表中以某种方式相关的列可以与<colgroup>元素组合在一起。重要的是，栏目组要有语义，而不仅仅是文体上的关联。例如，如果列引用相同的产品或表示相同的大小，则可以使用<colgroup>将列组合在一起，但它不应仅用于使它们具有相同的外观（这就是<col>的用途）。
<colgroup>元素（单独或符合块）必须在表的开头、开头标记和标题（如果存在）之后声明。该块中声明的每个<colgroup>元素都将在span属性的帮助下定义一个组，该属性将指示属于该组的列数。
分组列是从左到右声明的，因此第一个组将包含表中的第一列以及由其span属性指定的多个连续列。其他组将从前一组右侧的第一列开始。这个概念可能有点难以理解，所以让我们来看一个例子。
下表有五列：第一列是标题单元格，第二列是Mike的表现，最后两列是Tara的表现。开始时声明的<colgroup>元素反映了前面解释的相同结构：一个<colgroup>用于标题单元格，一个用于Mike的性能，另一个用于Tara的性能。请注意span属性如何指示每个组跨越的列，第一个组只有一列（span的默认值）除外。为了使其可见，我们在列组中添加了一些样式属性。
在下一个例子中要考虑的事情有两个：第一，SPAN属性的默认值是1，这是为什么我们不在第一组中指定它的原因；第二，结束标记是<colgroup>元素的选项。

<table class="default">
  <colgroup>
  <colgroup span="2" style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">
  <colgroup span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
  <tr>
    <th></th>
    <th colspan="2">Mike</th>
    <th colspan="2">Tara</th>
  </tr>
  <tr>
    <th></th>
    <th>First test</th>
    <th>Second test</th>
    <th>First test</th>
    <th>Second test</th>
  </tr>
  <tr>
    <th>Day 1</th>
    <td>25 km</td>
    <td>38 km</td>
    <td>28 km</td>
    <td>37 km</td>
  </tr>
  <tr>
    <th>Day 2</th>
    <td>22 km</td>
    <td>35 km</td>
    <td>30 km</td>
    <td>35 km</td>
  </tr>
</table>

学习产出：

编写程序实现下列表格

<!DOCTYPE html>
<html>
<head>
    <title>食物表格</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="table.css">
</head>

<body>
    <header>
        <h1>餐食营养数据</h1>
        <br>
    </header>
    <main>
        <table id="table1" border="1">
            <caption>
                餐食的一些数据。（资料取自<a href="">cupcakes kale chips</a>,图片取自<a href="">cupcakes kale chips照片库</a>）
            </caption>
            <thead>
                <tr>
                    <th scope="col" colspan="2" rowspan="2"></th>
                    <th scope="col" rowspan="2">名字</th>
                    <th scope="col" rowspan="2">图片</th>
                    <th scope="col" rowspan="2">Calories</th>
                    <th scope="col" colspan="4">Fat(g)</th>
                    <th scope="col" rowspan="2">Cholesterol(mg)</th>
                    <th scope="col" rowspan="2">Sodium(mg)</th>
                    <th scope="col" rowspan="2">Vitamin A(IU)</th>
                </tr>
                <tr>
                    <th scope="col" class="fatName">Saturated Fat(g)</th>
                    <th scope="col" class="fatName">Trans Fat(g)</th>
                    <th scope="col" class="fatName">Polyunsaturated Fat(g)</th>
                    <th scope="col" class="fatName">Monounsaturated Fat(g)</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row" rowspan="4">breakfast</th>
                    <th scope="row" rowspan="2">breads</th>
                    <th scope="row" class="name">Gluten-Free Bread</th>
                    <td>
                        <img src="img/1.jpeg">
                    </td>
                    <td>134</td>
                    <td>1g</td>
                    <td>1g</td>
                    <td>1g</td>
                    <td>3g</td>
                    <td>20</td>
                    <td>162</td>
                    <td>30</td>
                </tr>
                <tr>
                    <th scope="row" class="name">Gluten Free Cinnamon Raisin Bagels</th>
                    <td>
                        <img src="img/2.jpeg">
                    </td>
                    <td>390</td>
                    <td>1g</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>92</td>
                    <td>914</td>
                    <td>130</td>
                </tr>
                <tr>
                    <th scope="row" rowspan="2">Drinks</th>
                    <th scope="row" class="name">Chocolate Pumpkin Smoothie</th>
                    <td>
                        <img src="img/3.jpeg">
                    </td>
                    <td>297</td>
                    <td>3</td>
                    <td></td>
                    <td>1</td>
                    <td>2</td>
                    <td>10</td>
                    <td>324</td>
                    <td>22021</td>
                </tr>
                <tr>
                    <th scope="row" class="name">Peanut Butter and Jelly Smoothie</th>
                    <td>
                        <img src="img/4.jpeg">
                    </td>
                    <td>460</td>
                    <td>5</td>
                    <td></td>
                    <td>5</td>
                    <td>8</td>
                    <td>10</td>
                    <td>209</td>
                </tr>
                <tr>
                    <th scope="row" rowspan="4">lunch</th>
                    <th scope="row" rowspan="2">cuisine</th>
                    <th scope="row" class="name">Mexican Pasta Salad</th>
                    <td>
                        <img src="img/5.jpeg">
                    </td>
                    <td>248</td>
                    <td>1</td>
                    <td></td>
                    <td>1</td>
                    <td>4</td>
                    <td>2</td>
                    <td>408</td>
                    <td>202</td>
                </tr>
                <tr>
                    <th scope="row" class="name">Keto Taco Bowl</th>
                    <td>
                        <img src="img/6.jpeg">
                    </td>
                    <td>746</td>
                    <td>8g</td>
                    <td>2</td>
                    <td></td>
                    <td></td>
                    <td>128</td>
                    <td>341</td>
                    <td>11816</td>
                </tr>
                <tr>
                    <th scope="row" rowspan="2">Sandwishes</th>
                    <th scope="row" class="name">Honey BBQ Chicken Salad</th>
                    <td>
                        <img src="img/7.jpeg">
                    </td>
                    <td>185</td>
                    <td>2g</td>
                    <td>1g</td>
                    <td>1g</td>
                    <td>1g</td>
                    <td>57</td>
                    <td>278</td>
                    <td>147</td>
                </tr>
                <tr>
                    <th scope="row" class="name">Chef's Salad Lettuce Wraps</th>
                    <td>
                        <img src="img/8.jpeg">
                    </td>
                    <td>265</td>
                    <td>6g</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>101</td>
                    <td>979</td>
                    <td>6440</td>
                </tr>
            </tbody>
        </table>
    </main>
</body>
</html>

img{
    width: 50px;
    height: 50px;
}
th td{
    border:1px solid #ccc;
    margin: 0;
    padding: 10px;
}
.name{
    width: 80px;
}
.fatName{
    width: 80px;
}

码农公寓