HTML表格

*发表于 2021-12-1 11:51:25* · 发表于 2021-12-1 11:51:25

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
<style type="text/css">
table {
border-collapse:collapse;
}
td, th {
border:1px solid black;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>标题单元格 1</th>
<th>标题单元格 2</th>
</tr>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>
</body>
</html>

上面是一个 HTML 表格的例子。该表应用了一些样式（使用<style>文档中的<head>元素）元素。

HTML 表格的工作原理
在 HTML 中，您可以使用<table>标签<tr>和和<td>标签来创建表格：

<table>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
</table>
每个<tr>元素代表一个表格行。每个<td>元素代表一个数据单元格。

还有其他表相关的元素，你可以用你的表使用，如<th>，<thead>，<tfoot>，<tbody>，<caption>，和<colgroup>。

以下是使用这些元素的表格示例：

<table>
<caption>
Caption here...
</caption>
<colgroup span="2" class="first2cols"></colgroup>
<thead>
<tr>
<th>标题单元格 1</th>
<th>标题单元格 2</th>
<th>标题单元格 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
<td>单元格 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 单元格 1</td>
<td>Footer 单元格 2</td>
<td>Footer 单元格 3</td>
</tr>
</tfoot>
</table>
如您所见，许多额外元素允许您将其他元素分组在其中。例如，该<thead>元素用于对表格的列标题进行<tfoot>分组，对列页脚进行分组等。

该<colgroup>元素允许您将列组合在一起。这对于将样式应用于列中的所有单元格非常方便。在上面的示例中，我们使用span="2"对前两列进行分组。我们还将一个类应用于该组列。因此，如果我们要为该类应用例如背景颜色，则背景颜色将仅应用于前两列。

属性
该<table>元素支持border和sortable属性（以及全局属性和）和事件处理程序内容属性。

使用该border属性通常会导致浏览器在表格及其单元格周围呈现基本边框。像这样：

<table border="1">
<tr>
<th>标题单元格 1</th>
<th>标题单元格 2</th>
</tr>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>

然而，该border属性正在失去受欢迎程度，转而支持 CSS。您可以使用 CSS 做更多事情。另外，从 HTML5 开始，该border属性仅用于向浏览器传达该表格未用于布局目的。

该sortable属性旨在允许表的排序接口。

处理表时您可能会发现有用的另外两个属性是colspan和rowspan属性。这些可以与<th>和<td>元素一起使用。它们允许您指定单元格应该跨越多少列或行。下面的例子。

科尔斯潘：
在此示例中，第一个标题单元格跨越两列。

<table border="1">
<tr>
<th colspan="2">标题单元格 1</th>
<th>标题单元格 2</th>
</tr>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
<td>单元格 3</td>
</tr>
<tr>
<td>单元格 4</td>
<td>单元格 5</td>
<td>单元格 6</td>
</tr>
</table>

行跨度：
这里我们应用rowspan=""到第一个标题单元格。这导致标题单元格跨越所有 3 行。

<table border="1">
<tr>
<th rowspan="3">标题单元格 1</th>
<th>标题单元格 2</th>
<th>标题单元格 3</th>
</tr>
<tr>

<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>

<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>

避免使用 HTML 表格进行布局
HTML 表格仅用于呈现表格数据——多维数据。此数据需要行和列才能正确显示。

HTML 表格不打算用于布局目的。虽然使用它们来创建布局可能很诱人，但不建议这样做。您应该使用适当的 HTML 元素和 CSS 来确定您的页面布局。更多关于HTML 布局的内容。