Html 简明教程
HTML - Tables
HTML 表格允许我们以有条理的方式呈现数据，提供行和列功能。还提供了一个有助于清晰性和理解的视觉结构，使其成为 Web 开发中的一个基本元素。
Why Tables are Used in HTML?
表格被包含在 HTML 中，原因有很多，主要集中在有效组织和呈现数据。一些主要用途包括：
-
Structuring Data: 表格为组织和显示数据提供了一个连贯的结构，使用户更容易解释信息。
-
Comparative Presentation: 当需要并排比较不同的数据集时，例如两个概念之间的差异，表格提供了一种清晰且易于理解的格式。
-
Tabular Data Representation: 自然适合于行和列的信息，例如日程表、统计信息或定价表，可以使用 HTML 表格很好地表示。
How to create a Table in HTML?
在 HTML 中创建表格涉及定义结构和内容的几个元素。使用的主要标记是 <table>, <tr>, <td>, and <th> 。
-
HTML <table> Tag: 此代码用于创建表格，包裹其中的行和列。
-
HTML <tr> Tag: 表示“表格行”，用于在表格中创建行。
-
HTML <td> Tag: 表示“表格数据”，用于在行中创建标准单元格。
-
HTML <th> Tag: 表示“表格标题”，用于在行中创建标题单元格。
All about HTML Tables
HTML 表格入门 - 从“如何定义表格”到“创建嵌套表格”。表格对于简短的文本内容、数字和非数字数据非常有用。表格最常用的应用是数据库。
尝试单击图标 运行按钮来运行以下 HTML 代码以查看输出。
Define an HTML Table
Example:
考虑一个表格，其中包含包含各自类别和价格的产品的简单列表。此基本表格结构以明确的表格格式组织数据，使其易于阅读和理解。此处，边框是 <table> 标签的属性，用于在所有单元格周围放置边框。如果您不需要边框，则可以使用 border="0"。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
<tr>
<td>Bookshelf</td>
<td>Furniture</td>
<td>$150</td>
</tr>
<tr>
<td>Coffee Maker</td>
<td>Appliances</td>
<td>$50</td>
</tr>
</table>
</body>
</html>Styling HTML Table
要添加应用 css，我们将使用内部 css 方法和一些基本的 CSS 属性来装饰 HTML 表格。
Example:
以下是一个示例，展示了基本 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 Table</h2>
<p>This table is 3*3 cells including table header.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>Table Background Color & Image
我们可以使用 CSS 设置背景颜色或图像，也可以使用 HTML 属性设置相同的属性；在此示例中，我们将使用 HTML 属性。
-
* HTML bgcolor Attribute:* 我们可以设置整个表格或仅一个单元格的背景颜色。
-
HTML background Attribute: 我们可以使用 HTML 背景属性设置背景图像。
您还可以使用 bordercolor 属性设置边框颜色。
Example 1:
以下是如何使用 bgcolor 和 bordercolor 属性为表格背景和表格边框着色的另一个示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Color</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Example 2:
以下是如何使用 background 属性的另一个示例。我们在此处将使用“图像”目录中提供的图像。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Image</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Table Width and Height
您可以通过使用 HTML 宽度和高度属性指定宽度和高度来设置表格大小。您可以指定表格的宽度或高度，单位为像素或占可用屏幕区域的百分比。
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Nested HTML Table
创建 HTML 嵌套表非常容易，我们只需要在 HTML 表中创建表即可。
Example:
在此示例中，我们将创建带有边框 1 的嵌套表格。
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Tables</title>
</head>
<body>
<table border=1>
<tr>
<td> First Column of Outer Table </td>
<td>
<table border=1>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=1>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
<td> First Column of Outer Table </td>
</tr>
</table>
</body>
</html>