CSS表元素Bootstrap入门教程[+ 7个示例]

组织网站内容的方式很重要。

有一系列的设计策略可以让你的内容更具可读性。你可以使用图像和/或空白来分割大块的文本。你可以使用印刷术，改变字体大小或单词之间的间距或在页面上安排文本。您也可以使用表。

表对于以容易为读者扫描的方式组织和呈现内容是有效的，并且快速吸收大量数据。

在HubSpot的博客中，你有时会看到一些总结博客文章要点的表格。看看最后的那张桌子Wix vs. WordPress帖子，例如。

这张桌子是建在里面的CMS中心在HubSpot的CMS中，你可以用HTML和CSS从头创建类似的表格。然而，如果不使用移动优先框架，就很难让这些表格在桌面和移动设备上都看起来很好。

这就是为什么，在这篇文章中，我们将介绍如何在CSS框架中创建和样式化一个简单的表格元素引导CSS，这样您就可以向站点上的页面和博客文章添加响应表。让我们开始吧。

引导表CSS

像Bootstrap中的许多东西一样，创建表很容易。简单的添加类.table任何<表>元素的“body”部分中的index . html文件。然后可以使用修饰符类或自定义样式自定义表。

在讨论自定义之前，让我们先从最基本的表标记开始。假设您想要创建一个列出一些周期性元素的表。你想让它有四列三行，看起来像这样:

要创建这个Bootstrap表，你需要使用以下HTML:


<表类= "表" >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /

请注意，此代码段可以分为两个主要部分：< thead >和tbody > <部分(即。表头和表体部分)。控件中定义了这四列< thead >当三排在tbody > <部分。然后，这些部分中的每个部分都封装在父部分中<表>元素。

您可以通过向父元素或子元素添加修饰符类或自定义样式来自定义表。我们将在下面的例子中看看如何做。

引导表CSS示例

下面是一些示例，演示了如何使用和扩展Bootstrap table元素。每个示例将显示所需的不同修饰符类。单击下面的任何链接以跳转到相应的示例。

响应的引导表
黑暗引导表
带彩色头的引导表
带有条带行的引导表
带有可悬浮行的引导表
bootstrap表与彩色行
与引导表

1.响应引导表

Bootstrap的“移动优先”方法是使用该框架构建站点而不是从头开始构建的最具说服力的理由之一。它使得创建响应性元素(包括表)的过程更加简单。

要创建跨所有视图响应的表(也就是说，它们可以轻松地水平缩放)，您只需要包装.table班上.table-responsive类。这意味着，而不是添加“表响应”后.table类，则需要将整个表元素放入< div >控件修改的.table-responsive类。请看下面的效果。

要创建上面的响应式表，请使用以下代码。(您可能注意到，我添加了一些虚拟的行和列来显示.table-responsive类更清楚。)


< div class = " table-responsive”>
<表类= "表" >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
  -  
  -  
  -  
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< td > N / A < / td >
< td > N / A < / td >
< td > N / A < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< td > N / A < / td >
< td > N / A < / td >
< td > N / A < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< td > N / A < / td >
< td > N / A < / td >
< td > N / A < / td >
< / tr >
tbody > < /
< / div >

通过选择表可以水平滚动的最大断点，还可以使表对不同的特定视图(而不是所有视图)具有响应性。

例如，如果你想让你的表格水平滚动到576px，那么你可以使用.Table-encooctive-sm修改器类。768px, 992px和1120px分别是max-width断点.table-responsive {md | lg | xl}．

2.黑暗引导表

Bootstrap表类的默认颜色可能与您的品牌或配色方案不匹配。在这种情况下，您可以使用.table-dark修改器类来反转颜色，使背景色是暗的而文本是亮的。它看起来像这样:

要创建这个表，只需在.table类。您可以在第一行代码中看到这个添加，这是这个标记和基本表标记之间的唯一区别。


表table-dark <表类= " " >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /

3.带彩色头的引导表

如果你想只改变表头的颜色而不改变表体，那么你可以使用修饰符类.thead-dark或者.thead-light．.thead-dark将其设置为深灰色(如下面的例子所示)而.thead-light会变成浅灰色。

来源

而在前面的示例中，您将修饰符类应用于<表>元素，将这些类中的一个应用于< thead >你可以在下面的第二行代码中看到这个变化:


<表类= "表" >
< thead class = " thead-dark " >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /

4.带条纹行的引导表

假设您想更改表身体部分的样式，而不是头部。使用.table-striped类中，可以为其他行添加颜色tbody > <部分。这将给它一个“斑马条纹”的效果，如下所示。

要创建这个表，只需在.table类。这实际上是创建一个暗表的相同过程。这是代码:


<表类= "表拆开," >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /

5.带有可悬浮行的引导表

现在，假设您希望只有当访问者将鼠标悬停在行上时才改变行样式。使用.table-hover类中，您可以在表行上启用悬浮状态tbody > <部分。您可以在下面的演示中看到效果。

来源

属性后添加" table-hover"即可创建此表.table类。这实际上是创建一个深色或条纹表的相同过程。这是代码:


表table-hover <表类= " " >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /

6.带有有色行的引导表

使用Bootstrap，您还可以使用上下文类更改行或单元格的颜色。为此，可以将下列类应用于(行)或元素< td >元素(单个细胞):

表主
Table-secondary
Table-success
Table-danger
Table-warning
Table-info
表格光
Table-dark

我可以将上面的任何类应用于不同的行，使我的表看起来像这样:

下面是创建这个多色表的代码。


<表类= "表" >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
< tr class = "表主" >
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< tr class = " table-success " >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /

7.边界引导表

如果希望在表的所有边都有边框，而不仅仅是水平分隔符，那么可以使用.Table边界修改器类。

属性之后添加" table- borderded"即可创建此表.table类。这实际上与创建深色表、条纹表或具有可悬浮行的表的过程是相同的。这是代码:


表table-bordered <表类= " " >
< thead >
< th范围=“上校”>。< / th >
< th范围=“坳”> < / th >名称
< th范围=“上校”> < / th >象征
< th范围=“上校”>原子量< / th >
< / tr >
< / thead >
tbody > <
1 < th范围= "行" > < / th >
< td > < / td >氢
< td > H < / td >
1.008 < td > < / td >
< / tr >
2 < th范围= "行" > < / th >
氦< td > < / td >
< td >他道明> < /
4.003 < td > < / td >
< / tr >
< th范围= "行" > 3 < / th >
< td > < / td >锂
李< td > < / td >
 6.941 
< / tr >
tbody > < /