超文本标记语言/表格

表格用于呈现表格数据。它们可以插入页面上的任何位置，甚至可以在其他表格中插入。我们将看一下创建一个基本表格，然后向其中添加许多标签，以便我们可以看到结果是什么。这里最重要的是实验。创建表格时最实用的标签是 <table> - 表格，<tr> - 表格行，<td> - 表格数据，以及 <th> - 表格标题。

最小表格

让我们先看一个快速示例

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

每个表格都以 <table> 标签开头，并以 </table> 标签结尾。在表格标签中，您可以定义表格的属性，您将在后面看到。

表格包含行，每行都以 <tr> 表格行标签开头，并可选地以 </tr> 标签结尾。行必须在表格内。

行包含单元格，每个单元格都以 <td> 表格数据标签开头，并可选地以 </td> 标签结尾。单元格必须在行内。

如果您将表格单元格放在行外，或者忘记关闭单元格、行或表格，则会产生不可预测的结果。原本应该在表格中的文本可能会出现在表格外的意外位置。最糟糕的是，整个表格内容将不会显示。

例如，在 IE 和 Firefox 中

• 行外的单元格被视为在相关垂直位置的单独行中
• 所有在单元格之外的内容，无论是否在行内，都放在整个表格之前，按照其出现的顺序；IE 将每个项目放在新行上；Firefox 不会，但在某些情况下会在项目之间放置一个空格。

如果省略可选的 </td> 和 </tr>，则以上内容指的是第一行之前的內容，以及第一行之前的行中的第一个元素之前的內容。请注意，</table> 是必需的；如果忘记它，所有后续内容都将被视为最后一行的最后一个单元格的一部分，即使是其他表格也是如此。

任务 - 创建表格

1. 打开您的 default.htm 并将其另存为 table.htm 到相应的文件夹中
2. 在文档的 body 中创建此 HTML 代码

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

1. 保存文件并在浏览器中查看它。

结果是

食物	价格
面包	$2.99
牛奶	$1.40

它看起来不太像一个表格，但我们很快就会添加更多内容。

注意：此表格由两行组成（查看两个 <tr> 标签），并且每行内有两个数据条目（两个 <td> 标签）

您可以将表格与电子表格进行比较。这个表格有两行两列，共 4 个包含数据的单元格。（2 行 x 2 列 = 4 个单元格）

标题和标题

让我们从一个快速示例开始

<table>
<caption>Formulas and Results</caption>
<tr><th>Formula</th><th>Result</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

标题 用于定义或描述表格的内容。它们是可选的。

要向表格添加标题，请在打开的 <table> 标签后输入 <caption> 元素，并在元素中添加标题的文本，如下所示。

<table>
<caption>Formulas and Results</caption>
...
</table>

标题通常显示在表格边框外，位于顶部。标题的确切外观和位置取决于 CSS 样式。

表格 标题 是一种定义表格列内容的方法。它们通常仅用于第一个 <tr>，表格行。

我们使用 <th> 而不是 <td> 来表示单元格。

默认情况下，表格标题中的文本以粗体显示并居中。

语法是：<tr><th>文本</th><th>文本</th></tr>

任务 - 表格标题和标题

1. 打开您的 table.html 文件
2. 向表格添加您自己的标题
3. 查看结果
4. 为表格添加表格标题 ITEMS 和 $ PRICE
5. 查看结果

边框

表格周围的边框是可选的：有时它们有助于定义表格，有时表格没有边框看起来更好。

但是，在创建表格时打开边框是一个非常好的主意，因为它使表格更容易处理。完成表格后，您可以删除边框。

此表格的边框宽度为 1 像素。

此表格的边框宽度为 5 像素。

默认值为 0（即无边框）。

边框是表格标签的属性。语法是

<table border=X> 其中 X 是边框大小（以像素为单位）。

您还可以指定边框颜色，尽管这仅是 Internet Explorer 标签。语法是

<table bordercolor="#000000">

请注意，不建议使用 HTML 指定边框颜色 - 使用 CSS 来实现这一目的要好得多。

任务 - 在表格周围创建边框

1. 打开您的 table.htm 文件。
2. 在 <table> 标签中，添加 border="2"
   即 <table border="2">。
3. 保存文件并查看它。
4. 更改边框的大小（例如，尝试 0、10，并尝试一个很大的数字）。
5. 在操作过程中查看结果。

您是否注意到只有外边框变大了？

高度和宽度

默认情况下，表格的大小与其输入的数据一样大。

我们可以更改表格的整体高度和宽度，使其达到我们想要的大小。

可以以绝对像素或以屏幕大小的相对百分比来指定大小。

语法是：<table height=??? width=???> 其中 ??? 是以像素或百分比为单位的大小。

还可以控制单个表格单元格或行的尺寸。

例如 <tr height="80"> <td width="50%">

可以混合使用绝对高度和宽度以及相对高度和宽度。

请注意，您可以通过更改填充来使用 CSS 完成相同的事情。

任务 - 定义表格的大小

1. 打开您的 table.htm 文件。
2. 在 <table border="2"> 标签中，我们将添加高度和宽度
   例如 <table border="2" height=200 width=300>
3. 保存文件然后查看它。调整浏览器窗口的大小，观察发生的情况 - 表格大小保持不变。
4. 尝试更改度量并再次查看文件。
5. 现在用百分比替换像素度量
   例如 <table border="2" height="40%" width="50%">
6. 保存文件然后查看它。调整浏览器窗口的大小，观察发生的情况 - 这次表格会随着窗口大小的调整而改变大小。

单元格间距和单元格填充

单元格填充和单元格间距之间的区别

单元格间距是表格单元格之间的像素数。

单元格填充是单元格内部的像素空间。即信息与表格单元格边框之间的距离。

这两个选项都是 <table> 标签的属性

例如 <table border="1" cellspacing="0" cellpadding="0">

注意：两者的默认值为 2

任务 - 单元格间距和填充

1. 打开您的 table.htm 文件。确保您的表格设置了较大的高度和宽度（例如 300x200） - 否则您将看不到单元格填充和单元格间距的效果。
2. 尝试更改表格边框、单元格间距和单元格填充的大小。尝试 0、1、5、10 等的不同组合。
3. 每次查看结果

表格单元格的对齐

表格单元格内容的默认对齐方式是左对齐和垂直居中。

如果您想更改单元格的对齐方式，则必须对每个单元格单独进行。align 命令包含在 <td> 标签中。您还可以通过在 <tr> 标签中指定对齐方式来更改整行的对齐方式

水平对齐
语法
<td align="位置"> 其中 位置 是 left、center 或 right
或
<tr align="位置"> 其中 位置 是 left、center 或 right

垂直对齐
语法
<td valign="位置"> 其中 位置 是 top、middle 或 bottom
或
<tr valign="位置"> 其中 位置 是 top、middle 或 bottom

您还可以在表格行标签和表格标签中包含 align 和 valign 命令。

注意：在 <table> 标签中包含 <code>align="left"</code> 或 <code>align="right"</code> 不会对齐表格内容。相反，它会在页面上对齐整个表格。即，它使表格外的文本围绕表格环绕。

任务 - 表格单元格的对齐

1. 打开您的 table.htm 文件
2. 更改表格单元格的对齐方式，使其看起来像

面包 $2.99 牛奶 $1.40

或

面包 $2.99 牛奶 $1.40

1. 尝试其他垂直和水平对齐方式。
2. 每次查看结果

行跨度和列跨度

每一行必须具有相同数量的表格数据，有时表格数据必须跨越多个列或行。在这种情况下，将使用 colspan 和/或 rowspan 标签 - 在这些标签设置为数字的情况下。

			<-- 此行有三个 表格数据
			<-- 此行有两个。第一个使用 colspan="2"
			<-- 此行有三个表格数据，但其中一个跨越两行，因为它使用了 rowspan="2"
			<-- 此行只有两个表格数据，因为它的第一个被占用。

语法

• <td colspan=X> 其中 X 是单元格跨越的列数。
• <td rowspan=X> 其中 X 是单元格跨越的行数。

任务 - 行跨度和列跨度

1. 打开您的 table.htm 文件。
2. 尝试让一个表格单元格跨越多行。
3. 尝试让一个表格单元格跨越多列。
4. 每次查看结果。

背景颜色和图像

可以为每个表格单元格（或行或表格）提供不同的背景颜色。

语法

<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">

其中颜色是颜色名称或十六进制代码。

注意：表格背景颜色仅在版本 3 及更高版本的浏览器中显示，并且可能无法正确打印。

注意：不建议使用 HTML 指定背景颜色 - 使用 层叠样式表 完成此目的要好得多。

背景图像 是对单元格、行或完整表格的外观进行的另一种修改。同样，这些图像仅在版本 3 及更高版本的浏览器中显示，并且可能无法正确打印。

语法

<td background="filename">
<tr background="filename">
<table background="filename">

其中 filename 是背景图像的路径和文件名。

注意：不建议使用 HTML 指定背景图像 - 使用 CSS 完成此目的要好得多。

任务 - 背景颜色和图像

1. 打开您的 table.htm 文件。
2. 尝试更改表格单元格、表格行和表格本身的背景颜色。
3. 将背景图像添加到表格单元格、表格行和表格本身。
4. 每次查看结果。

列组

要为表格列指定给定格式，可以使用 <col> 和 <colgroup> 标签。这些标签位于表格的顶部，并指定给定列的默认格式。

对于 <col> 标签，第一个实例指示第一列的格式，第二个指示第二列的格式，依此类推。<colgroup> 的工作方式类似，但还包括 span 标签以涵盖多个列。

<table>
 <caption>Project Completion</caption>
 <colgroup>
  <col span="3" style="background-color:red">
  <col style="background-color:yellow">
  <col span="2" style="background-color:green">
 </colgroup>
 <tr><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th></tr>
 <tr><td>3%</td><td>17%</td><td>40%</td><td>55%</td><td>86%</td><td>100%</td></tr>
</table>

滥用表格

在 CSS 流行之前，表格通常被误用来制作页面布局。虽然你可能会看到以这种方式设计的旧网站，但现在使用表格代替 CSS 被认为是不好的做法。

考虑何时使用表格，何时不使用表格。例如，单列表格几乎总是最好实现为列表。

总结

在本模块中，你将学习如何

• 创建和自定义 HTML 表格，
• 控制它们的尺寸和外观，
• 向表格添加标题，
• 控制表格内容的对齐方式，
• 表格标签的各种属性。