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创建和样式化表格。记住，熟能生巧，所以不要害怕尝试这些类的不同组合。在你意识到之前，你将能够创建不仅组织数据有效，而且外观出色的表格！

快乐编码，愿你的表格总是美丽地启动！

Credits: Image by storyset