章
目
录
HTML表格标签用于以表格形式显示数据（行*列）。一行中可以有多列。
我们可以使用<table>元素以及<tr>、<td>和<th>元素来创建一个表格以表格形式显示数据。
在每个表格中，表格行由<tr>标签定义，表格标题由<th>定义，表格数据由<td>标签定义。
HTML表格用于管理页面的布局，例如头部部分、导航栏、主体内容、页脚部分等。但建议使用<div>标签而不是表格来管理页面的布局。
HTML表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格。 |
| <tr> | 定义表格中的一行。 |
| <th> | 定义表格中的表头单元格。 |
| <td> | 定义表格中的数据单元格。 |
| <caption> | 定义表格标题。 |
| <colgroup> | 用于指定表格中一个或多个列的格式。 |
| <col> | 与 <colgroup> 元素一起使用，用于指定每列的属性。 |
| <tbody> | 用于分组表格中的主体内容。 |
| <thead> | 用于分组表格中的头部内容。 |
| <tfoot> | 用于分组表格中的底部内容。 |
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>
它的输出如下所示：
在上面的HTML表格中，有5行和3列，即5 * 3 = 15个值。
HTML带边框的表格
有两种方法可以指定HTML表格的边框。
1）HTML边框属性
您可以使用HTML中的table标签的边框属性来指定边框。但现在不推荐使用。
<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>
2）CSS边框属性
现在推荐使用CSS的边框属性来指定表格边框。
<style>
table, th, td {
border: 1px solid black;
}
</style>
效果和上图一样。
另外，您可以使用border-collapse属性将所有边框折叠成一个边框。这将折叠边框成一个。
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
HTML表格带单元格填充
您可以通过两种方式为表头和表数据指定填充：
- 使用HTML表格中的cellpadding属性
- 使用CSS中的padding属性
HTML表格标签的cellpadding属性现在已被弃用。建议使用CSS。让我们看一下CSS的代码。
<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
HTML表格宽度：
我们可以使用CSS的width属性来指定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>
HTML表格带colspan
如果要使单元格跨越多列，可以使用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>
HTML表格带rowspan
如果要使单元格跨越多行，可以使用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>
HTML表格带标题
HTML标题显示在表格上方。它必须在table标签之后使用。
<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属性创建各种类型的表格
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <table> | Yes | Yes | Yes | Yes | Yes |
