5    Tables and Hyperlinks表和超链接

This chapter introduces you to more HTML elements. More specifically, you’ll learn how to add and use tables and hyperlinks.本章将向您介绍更多HTML元素。更具体地说，您将学习如何添加和使用表和超链接。

This chapter describe other essential HTML elements that haven’t been dealt with up to now. In particular, you’ll learn more about the following topics:本章描述了到目前为止尚未涉及的其他基本HTML元素。尤其是，您将深入了解以下主题：

• Tables
  You’ll learn how to use tables to represent information or data in a grid.您将学习如何使用表来表示网格中的信息或数据。

• Hyperlinks超链接
  Every internet user is familiar with hyperlinks that allow them to move from one website to another. You’ll learn how to link an HTML document to other HTML documents.每个互联网用户都熟悉允许他们从一个网站移动到另一个网站的超链接。您将学习如何将HTML文档链接到其他HTML文档。

5.1    Structuring Data in a Table在表中构造数据

Tables are useful when you want to display data such as stock quotes, financial information, travel schedules, train schedules, bus schedules, travel reports, or sports scores in a grid of rows and columns. 当您想在行列网格中显示股票报价、财务信息、旅行时间表、火车时刻表、公共汽车时刻表、旅行报告或体育比分等数据时，表非常有用。HTML provides some viable options to structure such a table, as listed in Table 5.1.HTML提供了一些可行的选项来构建这样一个表，如表5.1所示。

Table 5.1     Brief Overview of the Table Elements Covered Here此处涵盖的表元素的简要概述

5.1.1    A Simple Table Structure Using <table>, <tr>, <td>, and <th>使用<Table>、<tr>、<td>和<th>的简单表结构

Every table in HTML is created between the elements <table> and </table>. HTML中的每个表都是在元素<table>和</table>之间创建的。The contents of the table are written row by row. The beginning of a row must contain an opening <tr>, while the row must end with a closing </tr> (tr = table row). 表格的内容是逐行写入的。行的开头必须包含一个开头<tr>，而行必须以结尾</tr>结束（tr = table row）。Within a table row between <tr> and </tr>, you write the individual cells (or also columns) with <td> and </td> (td = table data).在<tr>和</tr>之间的表行中，用<td>和</tid>（td = table data）编写单个单元格（或列）。

Figure 5.1     A Basic Table Structure in HTMLHTML中的基本表结构

If you want to use cells or columns as headers of a table, you can place the data between <th> and </th> (th = table heading). 如果要将单元格或列用作表的标题，可以将数据放置在<th>和</th>之间（th = table heading）。You can use the th element in the same way as the td element, except that web browsers usually highlight this element with a bold font centered in the column. 您可以以与td元素相同的方式使用th元素，除了web浏览器通常会在列的中心用粗体突出显示此元素。If it makes sense, you should use table headings, as this is helpful for visitors with screen readers and, if applicable, for search engines, which can index your website better with table headings.如果有意义，你应该使用表格标题，因为这对使用屏幕阅读器的访问者很有帮助，如果适用的话，对搜索引擎也有帮助，搜索引擎可以用表格标题更好地为你的网站建立索引。

For this purpose, we want to create a simple example of a table in which web browser statistics data from a website is summarized in a grid and displayed in a clear overview:为此，我们想创建一个简单的表格示例，其中来自网站的web浏览器统计数据以网格形式汇总，并以清晰的概览显示：

...
  <table>
    <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td>3499</td>
      <td>14.4%</td>
    </tr>
    <tr>
      <td>Safari</td>
      <td>1619</td>
      <td>6.6%</td>
    </tr>
  </table>
... 

Listing 5.1     /examples/chapter005/5_1_1/index.html

As you can see in Figure 5.2, web browsers display the table without any formatting. The height and width of a table are usually adjusted to its contents.如图5.2所示，web浏览器显示的表格没有任何格式。桌子的高度和宽度通常会根据其内容进行调整。

Figure 5.2     The Structured Representation of a Basic Table in HTMLHTML中基本表的结构化表示

5.1.2    Combining Columns or Rows Using “colspan” or “rowspan”使用“colspan”或“rowspan”组合列或行

If you want to combine (or span) table entries across multiple cells, you can do this using the HTML attributes colspan and rowspan. 如果要跨多个单元格组合（或span）表条目，可以使用HTML属性colspan和rowspan来实现。Based on the numerical value you pass to these attributes, the number of cells you want to merge is specified. 根据传递给这些属性的数值，指定要合并的单元格数量。As you might guess from the attribute names, colspan is used to group columns together, and rowspan is used to group rows together.正如您可能从属性名称中猜到的那样，colspan用于将列分组在一起，rowspan用于将行分组在一起。

Here’s a simple example in which the daily schedule of a photography seminar was summarized in a table:下面是一个简单的例子，其中摄影研讨会的日程安排总结在一个表格中：

...
  <table>
    <tr>
      <th></th>
      <th scope="col">Morning</th>
      <th scope="col">Noon</th>
      <th scope="col">Afternoon</th>
    </tr>
    <tr>
      <th scope="row">Monday</th>
      <td colspan="2">Photo shooting (outdoor)</td>
      <td>Image editing workshop</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>Street photography (city)</td>
      <td colspan="2">Photo shooting (portrait)</td>
    </tr>
    <tr>
      <th scope="row">Wednesday</th>
      <td>Nude photography</td>
      <td>Image editing workshop</td>
      <td>Closing ceremony</td>
    </tr>
  </table>
... 

Listing 5.2     /examples/chapter005/5_1_2/index.html

As you can see in Figure 5.3, CSS was used to frame the table so that the result of colspan is more visible.如图5.3所示，CSS用于构建表格，以便colspan的结果更明显。

Here, you can see how, on Monday, the Photo shooting (outdoor) cell spans both the Morning and Noon columns thanks to colspan="2". 在这里，您可以看到周一，由于colspan="2"，照片拍摄（室外）单元如何跨越上午和中午列。The same is true for Tuesday and the column Photo shooting (portrait), where Noon to Afternoon has been combined.周二和专栏Photo shooting (portrait)也是如此，其中Noon到Afternoon被结合在一起。

When using colspan, you must keep in mind that you need to reduce the number of cells if, for example, you combine a colspan across two cells. 使用colspan时，必须记住，如果将colspan组合到两个单元格中，则需要减少单元格的数量。In the Monday example, you thus only need to write two td elements instead of three because the first td element already spans two columns.因此，在Monday示例中，您只需要编写两个td元素，而不是三个，因为第一个td元素已经跨越了两列。

Figure 5.3     Merging Columns Using the “colspan” Attribute使用“colspan”属性合并列

By the way, there’s nothing against merging more than two columns. Here, you must pay attention to the number of columns that are actually present. 顺便说一句，合并两列以上是没有什么反对的。在这里，您必须注意实际存在的列数。As an example, on Tuesday, you could merge the Photo shooting (portrait) across three columns:例如，在周二，您可以将照片拍摄（肖像）合并到三列中：

...
    <tr>
      <th scope="row">Tuesday</th>
      <td colspan="3">Photo shooting (portrait)</td>
    </tr>
    <tr>
... 

However, the Street photography (city) cell would then have to be removed as well.然而，Street photography (city)单元格也必须被删除。

Everything just described also applies if you want to combine table entries across multiple rows using rowspan. 如果您想使用rowspan跨多行组合表条目，则上述内容也适用。For this purpose, here’s the example again in which the daily schedule for the photo seminar has been changed a bit because now Street photography (city) takes place in the morning on Tuesday and Wednesday: 为此，这里再次举一个例子，照片研讨会的日程安排有所改变，因为现在Street photography (city)在Tuesday和Wednesday上午举行：

...
  <table>
    <tr>
      <th></th>
      <th scope="col">Morning</th>
      <th scope="col">Noon</th>
      <th scope="col">Afternoon</th>
    </tr>
...
      <th scope="row">Tuesday</th>
      <td rowspan="2">Street photography (city)</td>
      <td colspan="2">Photo shooting (portrait)</td>
    </tr>
    <tr>
      <th scope="row">Wednesday</th>
      <td>Image editing workshop</td>
      <td>Closing ceremony</td>
    </tr>
  </table>
... 

Listing 5.3     /examples/chapter005/5_1_2/index2.html

In the last tr element, you need to remove the td element with Nude photography because you’ve extended the Street photography (city) entry above it downward using the rowspan attribute, which causes that entry to take up space in the cell below it, as you can see in Figure 5.4.在最后一个tr元素中，您需要删除带有Nude photography的td元素，因为您已经使用rowspan属性将其上方的Street photography(city)条目向下扩展，这会导致该条目占用其下方单元格中的空间，如图5.4所示。

Figure 5.4     Merging Rows Using the “rowspan” Attribute使用“rowspan”属性合并行

5.1.3    HTML Attributes for the Table Elements表元素的HTML属性

For the table element, HTML supports only the border attribute to indicate a border; the value can be "1" or "". 对于table元素，HTML只支持border属性来指示边框；该值可以是"1"或""。CSS is recommended as the better option here. For example, to copy border="1", you can simply add the following CSS construct to the HTML document head:这里推荐CSS作为更好的选择。例如，要复制border="1"，只需将以下CSS构造添加到HTML文档头即可：

...
<style>
  table, td, th { border: 1px solid gray }
<style>
... 

There are no attributes for the table row with <tr>. You’ve already learned about the attributes of <td> and <th> with colspan, rowspan, and scope.带有<tr>的表行没有属性。您已经了解了<td>和<th>的colspan、rowspan和scope属性。

5.1.4    Structuring Tables Using <thead>, <tbody>, and <tfoot>使用<thead>、<tbody>和<tfoot>构建表

As an alternative to the basic table elements of HTML you can also divide a table using the elements <thead>, <tbody>, and <tfoot> into a head, data, and foot section, respectively.作为HTML基本表元素的替代方案，您还可以使用元素<thead>、<tbody>和<tfoot>将表分别划分为head、data和foot部分。

The table head is enclosed between <thead> and </thead> (thead = table head). 表头位于<thead>和</thead>之间（thead = table head）。It makes sense to use the th element for the individual cells. 对单个细胞使用th元素是有意义的。You can mark the actual data for the table using <tbody> and </tbody> (tbody = table body). 您可以使用<tbody>和</tbody>（tbody = table body）标记表的实际数据。If you want to write a range as a table foot, you must enclose it with <tfoot> and </tfoot> (tfoot = table foot).如果你想把一个范围写成表脚，你必须用<tfoot>和</tfoot>（tfoot = table foot）括起来。

Here’s an example that uses these three elements in a table:下面是一个在表中使用这三个元素的示例：

...
  <table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Visitors</th>
      <th>Bytes</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Total</th>
      <th>23423</th>
      <th>3234 MB</th>
    </tr> 
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>3234</td>
      <td>132 MB</td>
    </tr>
...
...
    <tr>
      <td>December</td>
      <td>7193</td>
      <td>894 MB</td>
    </tr>
  </tbody>
  </table>
... 

Listing 5.4     /examples/chapter005/5_1_4/index.html

If you look at the HTML source code and the corresponding display in Figure 5.5, you’ll notice that the web browser is able to reproduce the order of the table correctly on its own. 如果您查看HTML源代码和图5.5中的相应显示，您会注意到web浏览器能够自己正确地再现表的顺序。Although the foot section was specified at the top in the source code, the web browser displays it appropriately at the bottom.尽管在源代码的顶部指定了脚部，但web浏览器会在底部适当地显示它。

Figure 5.5     A Longer Table with <thead>, <tbody>, and <tfoot> Elements in Use使用<thead>、<tbody>和<tfoot>元素的长表

Dividing a table into three different sections is optional and usually doesn’t affect the display in the web browser. This is a purely semantic representation. However, these elements are often used to format the appearance of these areas with CSS.将表格划分为三个不同的部分是可选的，通常不会影响web浏览器中的显示。这是一种纯粹的语义表示。然而，这些元素通常用于用CSS格式化这些区域的外观。

Figure 5.6     Only with CSS Can You Visualize These Sections Separately只有使用CSS才能单独可视化这些部分

In addition, when printing long tables across multiple pages, the web browser could use this division to print the table header and footer on each page as well. 此外，当在多个页面上打印长表时，web浏览器也可以使用此划分在每页上打印表头和表尾。This makes it easier to see which column contains the individual data or what the data means. 这使得更容易看到哪个列包含单个数据或数据的含义。Another option is to scroll only the body area between <tbody> and </tbody> for long tables, while leaving the header and footer unchanged. 另一种选择是，对于长表，只滚动<tbody>和</tbody>之间的正文区域，同时保持页眉和页脚不变。Unfortunately, no web browser supports these features yet, but you may be able to do that yourself with CSS and JavaScript if necessary.不幸的是，目前还没有网络浏览器支持这些功能，但如果需要，您可以使用CSS和JavaScript自己完成。

5.1.5    Grouping Columns of a Table Using <colgroup> and <col>使用<colgroup>和<col>对表的列进行分组

Just as you could divide the table rows into three sections using <thead>, <tbody>, and <tfoot>, you can also divide the individual columns into semantic and logical parts by means of the <colgroup> and <col> elements, if that made sense. 正如您可以使用<thead>、<tbody>和<tfoot>将表行划分为三个部分一样，如果有意义的话，您也可以通过<colgroup>和<col>元素将各个列划分为语义和逻辑部分。Grouping columns is useful, for example, to apply specific CSS formatting to a particular column or group of columns, rather than repeating the style for each cell in the column.分组列很有用，例如，将特定的CSS格式应用于特定的列或列组，而不是为列中的每个单元格重复样式。

You need to write the <colgroup> and <col> elements after the opening table element and before any other elements such as tr, thead, tfoot, or tbody. 您需要在打开table元素之后，在tr、thead、tfoot或tbody等任何其他元素之前写入<colgroup>和<col>元素。You can open a column group using <colgroup> and close it with </colgroup> (colgroup = column group). 您可以使用<colgroup>打开列组，并使用</colgroup>关闭它（colgroup = column group）。To group a column, you can use the standalone <col> tag. If you want to combine several columns in one col element, you can do this using the attribute span and the number of columns as the attribute value.要对列进行分组，可以使用独立的<col>标记。如果要在一个col元素中组合多个列，可以使用属性span和列数作为属性值。

Here’s a simple example that illustrates what has just been described:这里有一个简单的例子来说明刚才描述的内容：

...
<table>
  <colgroup>
    <col span="2" style="background-color:lightgray;">
    <col style="background-color:snow;">
  </colgroup>
    <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
    ...
    ...
  </table>
... 

Listing 5.5     /examples/chapter005/5_1_5/index.html

In Figure 5.7, the first two columns have been grouped together using span="2" and highlighted in color with CSS for demonstration purposes. The last column is a separate column group.在图5.7中，前两列使用span=“2”分组在一起，并用CSS以彩色突出显示以供演示。最后一列是一个单独的列组。

Figure 5.7     First Two Columns Have Been Grouped Together with Last Column as a Separate Column Group前两列已与最后一列一起分组为单独的列组

Figure 5.8     Semantic Division of Columns into Groups: Here, You Can See a Group with Two Columns and a Group with One Column列到组的语义划分：在这里，你可以看到一个有两列的组和一个有一列的组

If, on the other hand, you want to use a separate group for each column, you can do this as follows:另一方面，如果您想为每一列使用单独的组，可以按如下方式操作：

  <table>
  <colgroup>
    <col style="background-color: lightgray;">
    <col style="background-color: snow;">
    <col style="background-color: lightgray;">
  </colgroup>
    <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
...
  </table>
... 

Now each column has been grouped into its own col group. 现在，每一列都被分组到自己的col组中。The advantage doesn’t become apparent until you want to style columns with CSS. The semantic division into three columns can be found in Figure 5.9.只有当你想用CSS设置列的样式时，优势才会变得明显。语义划分为三列，如图5.9所示。

Figure 5.9     Semantic Division into Three Columns语义分为三列

5.1.6    Labeling Tables Using <caption> or <figcaption>使用<caption>或<figcaption>为表格添加标签

To assign a label to a table, you can either use the caption element, which must be used immediately after the opening <table> tag, or the new figure and figcaption elements.要为表分配标签，您可以使用caption元素，该元素必须在打开<table>标签后立即使用，也可以使用新的figure和figcaption元素。

Labeling a Table with <caption>用<title>标记表格

As mentioned previously, the caption element must follow immediately after the opening <table> tag. In addition, only one label can be used per table. Let’s look at a simple example:如前所述，caption元素必须紧随<table>标签之后。此外，每张表只能使用一个标签。让我们来看一个简单的例子：

...
  <table>
    <caption>Browser statistics 11/2023</caption>
  <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
    ...
    ...
  </table>
... 

Listing 5.6     /examples/chapter005/5_1_6/index.html

Figure 5.10     The Caption Is Displayed Centered above the Table by Default默认情况下，标题显示在表格上方的中心

If you want to add notes to a table caption, you can place the HTML elements details and summary between <caption> and </caption>.如果你想在表格标题中添加注释，你可以将HTML元素的details和summary放在<caption>和</caption>之间。

Figure 5.11     Expanding and Collapsing Information Thanks to the HTML Elements <details> and <summary> (Example in /examples/chapter005/5_1_6/index2.html)借助HTML元素<details>和<summary>展开和折叠信息（/examples/chapter005/5_1_6/index2.html中的示例）

Labeling a Table Using <figcaption>使用<figcaption>标记表格

I already described the figcaption and figure elements in Chapter 4, Section 4.2.9. 我已经在第4章第4.2.9节中描述了figcaption和figure元素。It’s a good idea to position tables between <figure> and </figure> and to insert a caption for this table at the beginning after the opening <figure> or at the end before the closing </figure>. 最好将表放置在<figure>和</figue>之间，并在开头</figure>之后或结尾</figure>之前的末尾插入此表的标题。Here’s an example of how you can label a table using the new figure and figcaption elements:下面是一个如何使用新的figure和figcaption元素标记表的示例：

...
  <article>
  <h1>Browser Statistics </h1>
  <figure>
  <table>
  <tr>
      <th>Browser</th>
      <th>Accesses</th>
      <th>Percent</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>14478</td>
      <td>59.6%</td>
    </tr>
...
  </table>
  <figcaption>Table 1: Browser Statistics 04/2023</figcaption>
  </figure>
  </article>
... 

Listing 5.7     /examples/chapter005/5_1_6/index3.html

Figure 5.12     Labeling Tables Using <figure> and <figcaption>使用<figure>和<figcaption>标记表格