資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 HTML5 中對錶格主體內容進行分組？
HTML 表格通常用於以結構化的方式呈現資料。表格由行和列組成，其中每一行代表一條記錄，每一列代表該記錄中的一個欄位。在某些情況下，您可能希望對錶格主體中的內容進行分組，例如當您有多個屬於同一組的資料點時。在這篇博文中，我們將探討在 HTML 表格中對主體內容進行分組的不同方法。
方法一：使用 <tbody> 元素
在 HTML 表格中對主體內容進行分組最簡單的方法是使用 <tbody> 元素。<tbody> 元素用於對錶格中的一組行進行分組，通常用於分組表格的主要內容。以下是一個示例。
示例
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
在這個示例中，我們使用了 <tbody> 元素來對包含表格主要內容的兩行進行分組。預設情況下，所有未顯式包含在 <thead> 或 <tfoot> 元素中的行都會自動包含在 <tbody> 元素中。
方法二：使用 <colgroup> 和 <tbody> 元素
在 HTML 表格中對主體內容進行分組的另一種方法是將 <colgroup> 和 <tbody> 元素一起使用。<colgroup> 元素允許您將列組合在一起並對整個組應用樣式或屬性，而 <tbody> 元素允許您將行組合在一起。以下是一個示例：
示例
<table>
<colgroup span="2"></colgroup>
<colgroup span="1"></colgroup>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td colspan="2">Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
在這個示例中，我們使用了 <colgroup> 元素將前兩列組合在一起，並將最後一列單獨分組。我們還使用了 colspan 屬性來跨越 <thead> 元素的前兩列。<tbody> 元素用於對包含表格主要內容的兩行進行分組。
方法三：使用 CSS
在 HTML 表格中對主體內容進行分組的另一種方法是使用 CSS。使用 CSS，您可以對錶格中的特定行或單元格應用不同的樣式，從而建立視覺分組效果。以下是一個示例：
示例
<style>
.group1 {
background-color: #f2f2f2;
}
.group2 {
background-color: #e5e5e5;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
在這個示例中，我們使用 CSS 類 .group1 和 .group2 定義了兩個具有不同背景顏色的組。然後，我們將這些類應用於表格主體中的相應行，以視覺上對內容進行分組。
您還可以使用 CSS 來設定表格中各個單元格或列的樣式。例如，您可以對第一列中的每個單元格應用特定樣式，或者對根據其內容滿足特定條件的單元格應用樣式。這有助於進一步對錶格中的內容進行分組和區分。
使用 CSS 對 HTML 表格中的主體內容進行分組在表格的視覺設計和樣式方面提供了很大的靈活性。但是，這需要對 CSS 有很好的理解，並且可能比討論的其他方法更費時。
使用 JavaScript 建立動態分組主體內容
類似於對錶格標題進行分組，您還可以使用 JavaScript 和 jQuery 在表格中建立動態分組的主體內容。如果您在表格中有大量資料需要使用者更易於管理，這將特別有用。您可以使用 JavaScript 根據使用者互動（例如單擊標題行）來切換行的可見性。以下是一個示例。
示例
<script>
$(document).ready(function() {
$('.group-header').click(function() {
$(this).toggleClass('collapsed');
$(this).nextUntil('.group-header').toggle();
});
});
</script>
<table>
<thead>
<tr class="group-header">
<th>Group 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Group 1</td>
</tr>
<tr>
<td>Row 2, Group 1</td>
</tr>
<tr class="group-header">
<th>Group 2</th>
</tr>
<tr>
<td>Row 1, Group 2</td>
</tr>
<tr>
<td>Row 2, Group 2</td>
</tr>
</tbody>
</table>
在這個示例中，我們使用 jQuery 向組標題行添加了一個單擊事件處理程式。當用戶單擊標題行時，我們將切換一個類以顯示或隱藏摺疊圖示，並使用 nextUntil() 函式來切換直到下一組標題行之前所有行的可見性。
使用巢狀表格對內容進行分組
在 HTML 表格中對內容進行分組的另一種方法是使用巢狀表格。這涉及在現有表格的一個或多個單元格內建立一個新表格。然後，您可以對巢狀表格應用樣式或屬性以對內容進行分組。以下是一個示例。
示例
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>27</td>
<td>
<table>
<tbody>
<tr>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>35</td>
<td>
<table>
<tbody>
<tr>
<td>San Francisco</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
在這個示例中，我們在主表格的“城市”列中嵌套了一個表格。我們為每個巢狀表格使用了單獨的 tbody 元素，以保持 HTML 結構的有條理。然後，您可以對巢狀表格應用樣式或屬性以對內容進行分組。
分組表格內容的可訪問性注意事項
使用分組表格內容時，務必考慮依賴螢幕閱讀器或其他輔助技術的使用者的可訪問性。您應確保您的標記以在離線閱讀時有意義的方式進行結構化，並使用適當的 HTML 屬性（如 aria-label）為無法看到視覺分組提示的使用者提供上下文。
以下是一些確保可訪問性的額外提示
為每個組使用有意義的標題，並確保使用 <th> 元素正確標記它們。
使用描述性標題或標籤為每個組提供其他上下文，並使用 aria-describedby 屬性將其與組關聯。
使用 tabindex 屬性確保僅使用鍵盤的使用者可以導航到分組內容並與其互動。
使用 CSS 來視覺區分分組內容，但確保視覺提示不是識別分組的唯一方法。例如，您可以使用顏色、邊框或陰影來視覺分組內容，還可以使用有意義的標題和標籤來提供上下文。
使用螢幕閱讀器或其他輔助技術測試您的標記，以確保分組準確有效地傳達。
結論
在 HTML 表格中對主體內容進行分組是一種有用的技術，可以提高資料的可讀性和組織性。有幾種方法可以實現這一點，包括 <tbody> 元素、<colgroup> 元素和 CSS。此外，使用 JavaScript 和 jQuery 建立動態分組的主體內容或使用巢狀表格可以為您分組資料的方式提供更大的靈活性。在實現分組表格內容時，務必考慮依賴輔助技術的使用者的可訪問性。
2K+ 次瀏覽
