HTML教程-HTML表格
HTML 表格标签用于以表格形式（行*列）显示数据。一行中可以有很多列。
在 <tr> 、 <td> 和 <th> 元素的帮助下，我们可以使用 <table> 元素创建表格以表格形式显示数据。
在每个表中，表行由<tr>标签定义，表头由<th>定义，表数据由<td>标签定义。
HTML 表格用于管理页面的布局，例如页眉部分、导航栏、正文内容、页脚部分等。但建议在表格上使用 div 标签来管理页面的布局。
HTML 表格标签
| 标签 | 描述 |
|---|---|
| <table> | 它定义了一个表。 |
| <tr> | 它定义表中的一行。 |
| <th> | 它定义表格中的标题单元格。 |
| <td> | 它定义了表格中的一个单元格。 |
| <caption> | 它定义表格标题。 |
| <colgroup> | 它在表格中指定一组一个或多个列以进行格式化。 |
| <col> | 它与 <colgroup> 元素一起使用以指定每一列的列属性。 |
| <tbody> | 它用于对表中的正文内容进行分组。 |
| <thead> | 它用于对表格中的标题内容进行分组。 |
| <tfooter> | 它用于对表格中的页脚内容进行分组。 |
HTML 表格示例
让我们看一下 HTML 表格标签的例子。它的输出如上所示。
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table> 输出：
| First_Name | Last_Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
在上面的html表格中，有5行3列=5*3=15个值。
带边框的 HTML 表格
有两种方法可以为 HTML 表格指定边框。
- 通过 HTML 表格的 border 属性
- 通过 CSS 中的边框属性
1）HTML边框属性
您可以使用 HTML 中 table 标签的 border 属性来指定边框。但是现在不推荐。
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table> 输出：
| First_Name | Last_Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
2) CSS 边框属性
现在推荐使用 CSS 的 border 属性来指定表格的边框。
<style>
table, th, td {
border: 1px solid black;
}
</style> 您可以通过 border-collapse 属性折叠一个边框中的所有边框。它会将边界合二为一。
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style> 输出：
| Name | Last Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
带有单元格填充的 HTML 表格
您可以通过两种方式为表头和表数据指定填充：
- 通过 HTML 表格的 cellpadding 属性
- 通过 CSS 中的填充属性
HTML table 标签的 cellpadding 属性现已废弃。建议使用 CSS。那么让我们看看CSS的代码。
<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style> 输出：
| Name | Last Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
HTML 表格宽度：
我们可以使用 CSS宽度属性指定 HTML 表格宽度。它可以以像素或百分比指定。
我们可以根据需要调整表格宽度。以下是显示带宽度的表格的示例。
table{
width: 100%;
}例子：
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html> 输出：
带有 colspan 的 HTML 表格
如果你想让一个单元格跨越一列以上，你可以使用 colspan 属性。
它将一个单元格/行分成多列，列数取决于 colspan 属性的值。
让我们看一下跨越两列的示例。
CSS 代码：
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style> HTML 代码：
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table> 输出：
| Name | Mobile No. | |
|---|---|---|
| Ajeet Maurya | 7503520801 | 9555879135 |
带行跨度的 HTML 表格
如果你想让一个单元格跨越多行，你可以使用 rowspan 属性。
它将一个单元格分成多行。划分的行数将取决于 rowspan 值。
让我们看一下跨越两行的示例。
CSS 代码：
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style> HTML 代码：
<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table> 输出：
| Name | Ajeet Maurya |
|---|---|
| Mobile No. | 7503520801 |
| 9555879135 |
带标题的 HTML 表格
HTML 标题显示在表格上方。它只能在表格标签之后使用。
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table> 样式化 HTML 表格偶数和奇数单元格
CSS 代码：
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style> 输出：
注意：您还可以在表格中使用不同的 CSS 属性来创建各种类型的表格。
