Bootstrap 表格
簡介
在本教學中，您將學習如何使用 Bootstrap 工具包來創建表格。
解釋
Bootstrap 版本 2.0 的 bootstrap.css 中的表單行號 1034 到行號 1167，包含了表格樣式。
正如您所知道的，表格只是用來呈現表格數據。Bootstrap 也一樣，標記的位置必須如下所示：
如果您使用了列標題，層次結構應該如下所示：
Bootstrap 的簡單表格實例
實例
<table class="table">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>Rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>Rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
輸出
線上查看
Bootstrap 的斑馬表格實例
這個表格使用了斑馬條紋的 CSS class，這個 class 是在相關的 bootstrap css 檔中定義，class 名稱是 .table-striped。
實例
<table class="table table-striped">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>Rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>Rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
輸出
