创建 HTML
- 使用 <table> 元素并在 <table> 内放置带有 <tr> 和 <th> 元素的 <thead> 标记。
- 添加三个 <tbody> 元素。
- 在每个 <tbody> 标签中使用 <tr> 元素和 <td> 元素。
<table>
<thead>
<tr>
<th>Day</th>
<th>Month</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-10</td>
<td>June</td>
<td>20pcs</td>
</tr>
<tr>
<td>11-20</td>
<td>June</td>
<td>20pcs</td>
</tr>
<tr>
<td>21-30</td>
<td>June</td>
<td>20pcs</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1-10</td>
<td>Jule</td>
<td>50pcs</td>
</tr>
<tr>
<td>11-20</td>
<td>Jule</td>
<td>50pcs</td>
</tr>
<tr>
<td>21-31</td>
<td>Jule</td>
<td>50pcs</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1-10</td>
<td>August</td>
<td>100pcs</td>
</tr>
<tr>
<td>11-20</td>
<td>August</td>
<td>100pcs</td>
</tr>
<tr>
<td>21-31</td>
<td>August</td>
<td>100pcs</td>
</tr>
</tbody>
</table>
添加 CSS
- 通过指定 width、border-bottom 和 font-weight 属性来设置 元素的样式。
- 将 :nth-child(odd) 伪类添加到 <tbody> 并为其设置背景和边框属性。
- 将 :nth-child(even) 伪类添加到 <tbody> 并为其设置背景和边框属性。
thead th {
width: 150px;
border-bottom: solid 1px #000;
font-weight: bold;
}
tbody:nth-child(odd) {
background: #a8e3b6;
border: solid 1px #000;
}
tbody:nth-child(even) {
background: #c9d1cb;
border: solid 1px #000;
}
现在，尝试完整示例。
在同一个表中添加多个 <tbody> 元素的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table,
table th,
table td {
border: 1px solid #cccccc;
}
thead th {
width: 150px;
border-bottom: solid 1px #000;
font-weight: bold;
}
tbody:nth-child(odd) {
background: #a8e3b6;
border: solid 1px #000;
}
tbody:nth-child(even) {
background: #c9d1cb;
border: solid 1px #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Day</th>
<th>Month</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-10</td>
<td>June</td>
<td>20pcs</td>
</tr>
<tr>
<td>11-20</td>
<td>June</td>
<td>20pcs</td>
</tr>
<tr>
<td>21-30</td>
<td>June</td>
<td>20pcs</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1-10</td>
<td>Jule</td>
<td>50pcs</td>
</tr>
<tr>
<td>11-20</td>
<td>Jule</td>
<td>50pcs</td>
</tr>
<tr>
<td>21-31</td>
<td>Jule</td>
<td>50pcs</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1-10</td>
<td>August</td>
<td>100pcs</td>
</tr>
<tr>
<td>11-20</td>
<td>August</td>
<td>100pcs</td>
</tr>
<tr>
<td>21-31</td>
<td>August</td>
<td>100pcs</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML <tbody> 元素定义了 HTML 表格的正文内容并其中创建了一个单独的语义块。
一个 <table> 可以有多个 <tbody> 元素，每个元素指定一个行组。
在这个片段中，我们将展示如何在同一个表中添加多个 <tbody> 元素。
从创建 HTML 开始。
日期：2020-06-02 22:15:05 来源：oir作者：oir