Bootstrap - 表格：初学者的友好指南

你好，未来的网页开发者們！今天，我們將要進入 Bootstrap 表格的精彩世界。不 用擔心你以前從未編過程——我將成為你這次旅程中的友好指南，我們將一步步學習。在這個教學的結尾，你將能夠像專業人士一樣創建有美麗、響應式的表格！

Bootstrap 表格是什麼？

在我們開始之前，讓我們先來了解一下 Bootstrap 表格是什麼。想像你正在書架上整理你喜歡的書籍。Bootstrap 表格就像那個書架，但它是為你的網站而設的！它們幫助你以整齊、有組織的方式展示信息，讓你的訪客容易閱讀和理解。

簡單表格

讓我們從基礎開始。以下是如何創建一個簡單的 Bootstrap 表格：

<table class="table">
<thead>
<tr>
<th>名稱</th>
<th>年齡</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>紐約</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>倫敦</td>
</tr>
</tbody>
</table>

這段代碼創建了一個有三個列的表格：名稱、年齡和城市。<thead> 標籤定義了表格頭部，而 <tbody> 包含了實際數據。class="table" 是賦予它 Bootstrap 魔力的關鍵！

表格變體

Bootstrap 為你的表格提供了不同的樣式。這就像為你的數據選擇不同的衣服！以下是一些變體：

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

只需將這些類別添加到你的 <table> 標籤中，就可以改變表格的整體外觀。這就是這麼簡單！

有特色的表格

想要讓某些行或單元格脫穎而出？Bootstrap 也可以滿足你的需求：

<table class="table">
<thead>
<tr>
<th>列 1</th>
<th>列 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>活動行</td>
<td>脫穎而出</td>
</tr>
<tr>
<td>正常行</td>
<td class="table-primary">有特色的單元格</td>
</tr>
</tbody>
</table>

table-active 類別會突出整個行，而像 table-primary 這樣的類別可以用於個別的單元格。

隔行換色

還記得上學時候用的那些斑馬線筆記本嗎？你也可以在表格上做同樣的事情！

對於隔行換色的行：

<table class="table table-striped">
...
</table>

對於隔行換色的列：

<table class="table table-striped-columns">
...
</table>

滑鼠悬停行

想要讓你的表格具有互動性？讓行在滑鼠悬停時亮起：

<table class="table table-hover">
...
</table>

這就像魔法——試試看！

有邊框和無邊框表格

你可以為你的表格添加邊框：

<table class="table table-bordered">
...
</table>

或者完全移除它們：

<table class="table table-borderless">
...
</table>

小型表格

為了獲得更紧凑的外觀，使用 table-sm 類別：

<table class="table table-sm">
...
</table>

這在需要在小空間中放置大量數據時非常適合！

表格組分隔

想要分組你的數據？使用 table-group-divider 類別：

<table class="table">
<thead>
<tr>
<th>標題 1</th>
<th>標題 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據 1</td>
<td>數據 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>數據 3</td>
<td>數據 4</td>
</tr>
</tbody>
</table>

這在表格身體組之間添加了一個可見的分隔。

垂直對齊

你可以控制單元格內容在細胞內垂直對齊的方式：

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>這個單元格及其鄰居是底部對齊的</td>
<td>底部</td>
<td class="align-top">這個單元格是頂部對齊的</td>
</tr>
</tbody>
</table>

使用 align-middle 進行中間對齊，使用 align-top 進行頂部對齊。

响應式表格

讓你的表格在所有設備上都看起來很好，使用 table-responsive 類別：

<div class="table-responsive">
<table class="table">
...
</table>
</div>

這允許你的表格在小屏幕上水平滾動。這就像給你的表格超能力，讓它能夠適應任何屏幕大小！

嵌套

你甚至可以在表格內放置表格！以下是方法：

<table class="table table-striped">
<thead>
<tr>
<th>名稱</th>
<th>詳情</th>
</tr>
</thead>
<tbody>
<tr>
<td>父行</td>
<td>
<table class="table table-sm">
<tr>
<td>嵌套行 1</td>
</tr>
<tr>
<td>嵌套行 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

這就像俄羅斯套娃，但用表格來做！

表格的解剖

讓我們分解一下表格的部分：

表頭

<table class="table">
<thead>
<tr>
<th>標題 1</th>
<th>標題 2</th>
</tr>
</thead>
...
</table>

<thead> 包含你的列標題。

表尾

<table class="table">
...
<tfoot>
<tr>
<td>尾 1</td>
<td>尾 2</td>
</tr>
</tfoot>
</table>

使用 <tfoot> 為表格添加尾部，適合摘要或總計。

標題

使用 <caption> 為你的表格添加標題：

<table class="table">
<caption>用戶列表</caption>
...
</table>

這就像給你的表格一個名稱標籤！

結論

現在，各位，你已經學會了如何使用 Bootstrap 來創建和風格化表格。記住，熟能生巧，所以不要害怕嘗試這些類別的不同組合。在你還不知道之前，你就會創造出既能有效組織數據，又看起來很棒的表格！

快樂編程，願你的表格永遠美麗地引入 Bootstrap！

功能	類別	描述
簡單表格	table	基本 Bootstrap 表格
變體	table-primary, table-secondary, 等。	不同顏色方案
有特色的表格	table-active, table-primary, 等。	突出特定行或單元格
隔行換色的行	table-striped	選擇行顏色
隔行換色的列	table-striped-columns	選擇列顏色
滑鼠悬停行	table-hover	在悬停時突出行
有邊框的表格	table-bordered	在表格和單元格的所有側添加邊框
無邊框的表格	table-borderless	移除所有邊框
小型表格	table-sm	使表格更紧凑
表格組分隔	table-group-divider	在表格身體組之間添加分隔
垂直對齊	align-top, align-middle, align-bottom	控制單元格內容的垂直對齊
响應式表格	table-responsive	使表格在小設備上水平滾動
嵌套	N/A	表格可以在表格單元格中嵌套
表頭	<thead>	定義表頭
表尾	<tfoot>	定義表尾
標題	<caption>	為表格添加標題

Credits: Image by storyset