HTML <table>标签
HTML <table>标签作用
HTML<table>标签用于以表格形式（行*列）显示数据。一行中可以有很多列。
我们可以在<tr>，<td>和<td>的帮助下，使用<table>元素创建一个表格以表格形式显示数据。元素。
在每个表中，表行由<tr>标签定义，表头由<td>定义，表数据由<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>
输出:
| 名字 |
姓氏 |
标签 |
| Sonoo |
Jaiswal |
60 |
| James |
William |
80 |
| Swati |
Sironi |
82 |
| Chetna |
Singh |
72 |
在上面的html表中，有5行3列= 5 * 3= 15个值。
带边框的HTML表格
有两种方法为HTML表格指定边框。
通过HTML中表格的border属性
通过CSS中的border属性
1）HTML边框属性
您可以在HTML中使用表格标签的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>
输出:
| 名字 |
姓氏 |
标签 |
| Sonoo |
Jaiswal |
60 |
| James |
William |
80 |
| Swati |
Sironi |
82 |
| Chetna |
Singh |
72 |
2）CSS边框属性
现在建议使用CSS的border属性在表格中指定边框。
<style>
table, th, td {
border: 2px solid red;
}
</style>
您可以通过border-collapse属性将所有边界折叠到一个边界中。它将边框折叠成一个。
<style>
table, th, td {
border: 2px solid red;
border-collapse: collapse;
}
</style>
输出:
| 名称 |
姓氏 |
标签 |
| Sonoo |
Jaiswal |
60 |
| James |
William |
80 |
| Swati |
Sironi |
82 |
| Chetna |
Singh |
72 |
带有单元格填充的HTML表
您可以通过两种方式为表头和表数据指定填充:
通过HTML中表格的cellpadding属性
通过CSS中的padding属性
HTML表标签的cellpadding属性现在已过时。建议使用CSS。因此，让我们看看CSS的代码。
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
输出:
| 名称 |
姓氏 |
标签 |
| Sonoo |
Jaiswal |
60 |
| James |
威廉 |
80 |
| Swati |
Sironi |
82 |
| Chetna |
Singh |
72 |
HTML表格宽度:
我们可以使用
CSS width 属性指定HTML表格宽度。可以像素或百分比指定。
我们可以根据需要调整表格宽度。以下是显示宽度表格的示例。
示例:
<!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>
输出:
| 名称 |
手机号码 |
| Ajeet Maurya |
7503520801 |
9555879135 |
具有行距的HTML表格
如果要使单元格跨度超过一行，则可以使用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>
输出:
| 姓名 |
小张 |
| 电话号码 |
xxx03520801 |
| 1119555879135 |
带标题的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属性来创建各种类型的表。
支持浏览器
