資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在同一表格中新增多個<tbody>元素？
在HTML 表格中，<tbody> 元素用於將表格內容分組並組織成各個部分。在處理大型表格時，它尤其有用。它有助於有效地管理和設定資料的樣式。
雖然一個表格包含一個<tbody>，但你可以在同一個表格中使用多個<tbody>元素來將資料結構化為不同的部分或類別。
為什麼要使用多個<tbody>元素？
- 資料分組：多個<tbody>元素允許您在同一表格中分別對相關資料行進行分組。
- 樣式設定：您可以對每個<tbody>應用不同的樣式，以直觀地區分各個部分。
- 滾動：用於建立某些部分需要獨立滾動的表格。
- 動態內容：允許您動態更新或操作表格的特定部分，而不會影響其他部分。
定義簡單的HTML表格
在這裡，我們將建立一個沒有多個<tbody>元素的簡單HTML表格。
示例
<table border="1"> <thead> <tr> <th>Header1</th> <th>Header2</th> </tr> </thead> <tbody> <tr> <td>Content1</td> <td>Content2</td> </tr> <tr> <td>Content3</td> <td>Content4</td> </tr> </tbody> </table>
新增多個<tbody>元素
要向表格新增多個<tbody>元素，只需在第一個<tbody>標籤後插入其他<tbody>標籤即可。每個<tbody>可以包含它自己的一組行 (<tr>)。以下是如何構建包含多個<tbody>元素的表格的示例。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Tbody Elements</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid black;
}
thead {
background-color: #acaaaa;
}
.section-header {
background-color: #e2e2e2;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="section-header">
<td colspan="3">Section 1</td>
</tr>
<tr>
<td>1011</td>
<td>Akash</td>
<td>17</td>
</tr>
<tr>
<td>1012</td>
<td>Rahul</td>
<td>16</td>
</tr>
</tbody>
<tbody>
<tr class="section-header">
<td colspan="3">Section 2</td>
</tr>
<tr>
<td>1013</td>
<td>Rajesh</td>
<td>16</td>
</tr>
<tr>
<td>1014</td>
<td>Zafar</td>
<td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
解釋
- HTML <thead>標籤：它包含表格的標題行。它通常出現在表格頂部。
- 第一個<tbody>標籤：它包含第一部分資料。帶有類 section-header 的行用於指示此部分的開始。
- 第二個<tbody>標籤：它包含第二部分資料。與第一個<tbody>類似，它包含一個部分標題行。
- 樣式設定：基本的CSS用於設定表格樣式，使標題和部分標題在視覺上有所區別。
更新於：2024年7月24日
252 次瀏覽
廣告