HTML - 表格

上一页
下一页

HTML 表格允许我们通过提供行和列功能以有组织的方式呈现数据。还提供有助于清晰和理解的视觉结构，使它们成为 Web 开发的基本元素。

为什么在 HTML 中使用表格？

出于各种原因，表格包含在 HTML 中，主要集中在有效地组织和呈现数据上。一些关键目的包括

  • 结构化数据：表格为组织和显示数据提供了连贯的结构，使用户更容易解释信息。
  • 比较介绍：当需要并排比较不同的数据集时，例如两个概念之间的差异，表格提供了一种清晰且可视的格式。
  • 表格数据表示：自然适合行和列的信息（如计划、统计信息或定价表）可以使用 HTML 表很好地表示。

如何在 HTML 中创建表格？

在 HTML 中创建表格涉及定义结构和内容的多个元素。使用的主要标签是 <table>、<tr>、<td> 和 <th>。

  • HTML <table>标签：用于创建将行和列换行的表。
  • HTML <tr> 标签：代表“表行”，用于在表中创建行。
  • HTML <td> 标签：表示“表数据”，用于在行中创建标准单元格。
  • HTML <th> 标签：表示“表头”，用于在行中创建标题单元格。

关于 HTML 表格

Geeting 从 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 Tables 相关标签

以下是与 HTML 表格相关的所有 HTML 标签的列表

标记 描述  
<table> 这用于创建 HTML 表。
 
<th> 定义表的标题。  
 
<tr> 定义表行。  
<td> 用于存储每个单元格的表数据。  
<caption> 指定 table 元素的标题。  
<colgroup> 描述表中用于 formattig 的一个或多个列的集合。  
<col> 用于提供有关列的信息。  
<thead> 用于定义表头部分。  
<tbody> 用于定义表体部分。  
<tfoot> 用于定义表页脚部分。  
打印本页
上一页
下一页