HTML 表格标签

HTML 表格提供了一种以单元格的行和列的形式导出或定义数据（例如文本、图像、链接等）的方法。可以使用

创建 HTML 表格。标签。默认情况下，表数据左对齐。在本主题中，我们将学习 HTML 表格标签。

可以使用

创建表。标签。

• 第个标签定义表格的标题。

;标签指定用于创建行的表行。

表数据可以在表的

、	和
;标签指定用于创建列的表格数据单元格。

内容中构建。具有大量表格元素。

语法

Table Heading 1	Table Heading 2
Data Cell 1	Data Cell 2
Data Cell 3	Data Cell 4

HTML 表格标签示例

以下是 HTML 表格标签的示例

1.基本表使用

示例：

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

以 .html 扩展名保存代码并在浏览器中打开它。它将显示以下输出：

2.表格标题

表格标题可以使用 caption> 标签指定。

示例

<title>HTML Table Tag Usage</title>

This is Table Caption

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的代码将显示以下输出：

3.表格单元格间距

表格单元格的空间可以使用 cellspacing 属性来定义。 cellspacing 属性指定表格单元格之间的空间。

示例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的代码将显示以下输出：

4.表格单元格填充

表格单元格的填充可以使用 cellpadding 属性来定义。 cellpadding属性表格单元格边框与数据之间的距离。

示例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的代码将显示以下输出：

5.列和行跨度属性

您可以使用 rowspan 属性将两个或多个表行合并为一行，并且可以使用 colspan 属性将表列合并为单列。

示例

<title>HTML Table Tag Usage</title>

Column One	Column Two	Column Three
Row One	Row Two	Row Three
	Row Four	Row Five
Row Six

代码将显示以下输出：

6.桌子背景

您可以使用 bgcolor 属性创建表格的背景。可以使用 border-color 属性指定表格单元格边框。

示例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

执行上面的代码，会显示如下输出：

7.桌子的高度和宽度

您可以使用 width 和 height 属性设置表格的高度和宽度。

示例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的代码将显示以下输出：

8.设置表格单元格样式

示例

<title>HTML Table Tag Usage</title>

<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
table#mytable tr:nth-child(even) {
background-color: #FAD7A0;
}
table#mytable tr:nth-child(odd) {
background-color: #E67E22;
}
table#mytable th {
color: white;
background-color: teal;
}
</style>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

执行上面的代码；你将得到以下输出：

8.嵌套表

您可以在另一个表中使用一个表，称为嵌套表。

让我们考虑下面的嵌套表示例：

示例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的代码将显示以下输出：

表的属性

以下属性如下​​：

• align: 此属性提供元素内的内容对齐。
• bgcolor: 该属性指定表格的背景颜色。
• border: 此属性指定表格单元格的边框。
• cellpadding： 此属性显示表格单元格和表格内容之间的填充。
• cellspacing: 该属性表示表格单元格之间的间距。
• frame:它指定外边框的哪些部分是可见的。
• 规则：这指定内部边框的哪些部分是可见的。
• sortable:此属性告知该表是可排序的。
• 摘要：它提供了当前表格内容的类型。
• width: 该属性告诉表格的宽度。
• height: 该属性指定表格的高度。

结论

到目前为止，我们已经研究了 HTML 中不同类型的表格标签。这些示例展示了如何使用表格样式、将一个表格嵌套在另一个表格中、设置表格的高度和宽度、为表格单元格添加间距和填充、为表格应用背景颜色等等。

以上是HTML 表格标签的详细内容。更多信息请关注PHP中文网其他相关文章！