HTML 表格允许我们通过提供行和列功能以有组织的方式呈现数据。还提供有助于清晰和理解的视觉结构，使它们成为 Web 开发的基本元素。
在 HTML 使用表格
出于各种原因，表格包含在 HTML 中，主要集中在有效地组织和呈现数据上。一些关键目的包括
- 结构化数据：表格为组织和显示数据提供了连贯的结构，使用户更容易解释信息。
- 比较介绍：当需要并排比较不同的数据集时，例如两个概念之间的差异，表格提供了一种清晰且可视的格式。
- 表格数据表示：自然适合行和列的信息（如计划、统计信息或定价表）可以使用 HTML 表很好地表示。
创建 HTML 表格
您可以使用 <table> 标签以及定义表格内结构和内容的多个标签在 HTML 中创建表格。与 <table> 标签一起使用的主标签是 <tr>、<td> 和 <th>。
HTML 创建表格涉及定义结构和内容的多个元素。使用的主要标签是 <table>、<tr>、<td> 和 <th>。
| 标签 | 描述 |
|---|---|
| <table> | 用于创建将行和列换行的表。 |
| <th> | 表示“表头”，用于在行中创建标题单元格。 |
| <tr> | 代表“表行”，用于在表中创建行。 |
| <td> | 表示“表数据”，用于在行中创建标准单元格。 |
关于 HTML 表格
从 HTML 表格开始——从“我们如何定义表格”到“创建嵌套表格”。表格对于简短的文本内容、数字和非数字数据非常有用。表最有用的应用是数据库。
尝试运行以下 HTML 代码以查看输出。
定义 HTML 表
HTML 表使用 <table> 标签定义，以创建行 <tr> 标签，<th> 和 <td> 用于创建表头和表数据单元格。
例：考虑一个表格，该表表示产品及其各自类别和价格的简单列表。这种基本的表格结构以清晰的表格格式组织数据，使其易于阅读和理解。在这里，边框是 <table> 标记的属性，它用于在所有单元格上放置边框。如果你不需要边框，那么你可以使用 border=“0”。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>产品</th>
<th>类别</th>
<th>价格</th>
</tr>
<tr>
<td>笔记本电脑</td>
<td>电子产品</td>
<td>$800</td>
</tr>
<tr>
<td>书架</td>
<td>家具</td>
<td>$150</td>
</tr>
<tr>
<td>咖啡机</td>
<td>器具</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
设置 HTML 表格样式
为了添加应用 css，我们将使用内部 css 方法和一些基本的 CSS 属性来装饰 HTML 表格。
例：下面是一个示例，说明了基本的 HTML 表格，该表格将使用 CSS 进行设计，使其看起来不错。
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>HTML 表格</h2>
<p>此表为3*3个单元格，包括表头。
<table>
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</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>
</body>
</html>
表格背景颜色和图像
我们可以使用 CSS 来设置背景颜色或图像，也可以使用 HTML 属性，在这两个示例中，我们将使用 HTML 属性。
- HTML bgcolor 属性：我们可以为整个表格或仅为一个单元格设置背景颜色。
- HTML background 属性：我们可以使用 HTML background 属性设置背景图像。
您还可以使用 bordercolor 属性设置边框颜色。
示例 1：这是使用 bgcolor 和 bordercolor 属性为表格背景和边框着色的另一个示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML表格背景颜色</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
</tr>
<tr>
<td rowspan="2">第1行单元格1</td>
<td>第1行单元格2</td>
<td>第1行单元格3</td>
</tr>
<tr>
<td>第2行单元格2</td>
<td>第2行单元格3</td>
</tr>
<tr>
<td colspan="3">第3行单元格1</td>
</tr>
</table>
</body>
</html>
示例 2：
这是使用 background 属性的另一个示例。在这里，我们将使用“images”目录中可用的图像。
<!DOCTYPE html>
<html>
<head>
<title>HTML表格背景图像</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
</tr>
<tr>
<td rowspan="2">第1行单元格1</td>
<td>第1行单元格2</td>
<td>第1行单元格3</td>
</tr>
<tr>
<td>第2行单元格2</td>
<td>第2行单元格3</td>
</tr>
<tr>
<td colspan="3">第3行单元格1</td>
</tr>
</table>
</body>
</html>
工作台宽度和高度
您可以通过使用 HTML width 和 height 属性提及宽度和高度来设置表格大小。您可以以像素或可用屏幕面积的百分比为单位指定表格宽度或高度。
例：在此示例中，我们将使用 HTML width 和 height 属性设置 和 height 400 和 150 的表。
<!DOCTYPE html>
<html>
<head>
<title>HTML表格宽度/高度</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<th>标题 2</th>
<th>标题 2</th>
</tr>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</body>
</html>
嵌套 HTML 表格
创建一个嵌套的HTML表格非常简单，我们只需要在HTML表格中创建表格。
例：在此示例中，我们将创建边框为 1 的嵌套表。
<!DOCTYPE html>
<html>
<head>
<title>HTML嵌套表</title>
</head>
<body>
<table border=1>
<tr>
<td> 外表的第一列 </td>
<td>
<table border=1>
<tr>
<td> 内部表格的第一行 </td>
</tr>
<tr>
<td> 内部表格的第二行 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=1>
<tr>
<td> 内部表格的第一行 </td>
</tr>
<tr>
<td> 内部表格的第二行</td>
</tr>
</table>
</td>
<td> 外表的第一列</td>
</tr>
</table>
</body>
</html>
HTML 表格相关标签
以下是与 HTML 表格相关的所有 HTML 标签的列表
| 标签 | 描述 |
|---|---|
| <table> | 这用于创建 HTML 表。 |
| <th> | 定义表的标题。 |
| <tr> | 定义表行。 |
| <td> | 用于存储每个单元格的表数据。 |
| <caption> | 指定 table 元素的标题。 |
| <colgroup> | 描述表中用于 formattig 的一个或多个列的集合。 |
| <col> | 用于提供有关列的信息。 |
| <thead> | 用于定义表头部分。 |
| <tbody> | 用于定义表体部分。 |
| <tfoot> | 用于定义表页脚部分。 |
