成都小程序设计可以采用多种设计方法来使您的内容更具可读性。也可以使用图像和/或空格来分解大块文本，并且可以更改字体大小或单词之间的间距。当然我们也可以使用表格。
表格可以有效地组织和呈现内容，使读者可以轻松浏览并快速吸收大量数据。但是，如果不使用移动优先框架，就很难让这些表格在移动设备上看起来不错。
在这篇文章中，我们将介绍如何在CSS框架Bootstrap中创建一个简单的表格元素并设置其样式，以便您可以将响应式表格添加到您网站上的页面和博客文章中。让我们开始吧。
引导表CSS
与Bootstrap中的许多事情一样，创建表格很容易。只需将类 .table添加到HTML中的任何元素。然后，您可以使用修饰符类或自定义样式自定义表格。
在我们谈论自定义之前，让我们从最基本的表格标记开始。假设您要创建一个表格，列出一些周期性元素，有四列和三行。
要使用Bootstrap创建它，请使用以下示例中的HTML：
请注意，这段代码可以分为两个主要部分：
（表头）和（表体）。四列在部分中定义，而三行在部分中定义。这两个部分都包含在父
您可以通过向父元素或子元素添加修饰符类或自定义样式来自定义表格。我们将在下面的例子中看到如何。
下面是一些示例，演示如何使用Bootstrap来使用和扩展表元素。每个示例将显示所需的不同修饰符类。单击下面的任何链接跳转到示例。
Bootstrap的移动优先设计方法使创建响应式元素（包括表格）变得更加简单。
要创建跨所有视口响应的表格（意思是，它们可以水平缩放），您只需要用.table-responsive类包装.table类。将整个
您还可以通过选择表格可以水平滚动的最大断点，使表格响应不同的特定视口，而不是所有视口。
例如，如果您希望表格水平滚动到576像素，那么您可以使用.table-responsive-sm修饰符类。768px、992px和1120px 分别是.table-responsive{-md|-lg|-xl}的最大宽度断点。
Bootstrap表类的默认颜色可能与您的品牌或配色方案不匹配。您可以使用.table-dark修饰符类来反转颜色，以便背景颜色为深色而文本为浅色
如果您只想更改表头的颜色而保持表体不变，请使用修饰符类.thead-dark或.thead-light。.thead-dark会使表头变成深灰色（如下例所示），而.thead-light会使它变成浅灰色。
在前面的示例中，您将修饰符类应用于
假设您要更改表体部分的样式，而不是表头部分。使用.table-striped修饰符类，您可以为
部分中的每一行添加颜色。这会给它一个“斑马条纹”的效果。
要创建此表，只需在.table类之后添加“table-striped”。
现在假设您希望行的样式仅在访问者将鼠标悬停在行上时发生变化。使用.table-hover修饰符类，您可以在
部分的表格行上启用悬停状态。
要创建此表，请在.table类之后添加table-hover。
使用Bootstrap，您还可以使用上下文类更改行或单元格的颜色。
如果您希望表格的所有边都有边框，而不仅仅是水平分隔线，那么您可以使用.table -bordered修饰符类。在.table类之后添加此类。
如果您想删除所有边框，则可以使用.table-borderless修饰符类。
表格有助于以一种易于访问者阅读和理解的方式组织网站上的大量数据。上述任何表格示例都可以添加和自定义到您独特的Bootstrap站点。成都小程序设计只需要熟悉HTML和CSS即可开始使用。
