srcmini本文概述
- HTML表格标签
- HTML表格示例
- 带边框的HTML表
- 1）HTML Border属性
- 2）CSS Border属性
- 带单元格填充的HTML表
- HTML表格宽度
- 例
- 带colspan的HTML表
- 带行距的HTML表
- 带标题的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>立即测试
输出：
| 名字 | 姓 | 分数 |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
在上面的html表中, 有5行和3列= 5 * 3 = 15个值。
带边框的HTML表
有两种方法可以为HTML表指定边框。
- 按HTML中表格的边框属性
- 通过CSS中的border属性
1）HTML Border属性
你可以在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 Border属性
现在建议使用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 | 姓 | 分数 |
|---|---|---|
| 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 | 姓 | 分数 |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
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>立即测试
输出：
带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 | 手机号码。 | |
|---|---|---|
| 阿耶特·莫里亚 | 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>立即测试
输出：
| Name | 阿耶特·莫里亚 |
|---|---|
| 手机号码。 | 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属性来创建各种类型的表。
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <table> | Yes | Yes | Yes | Yes | Yes |
评论前必须登录！
注册