成都小程序開發(fā)可以采用多種設(shè)計(jì)方法來使您的內(nèi)容更具可讀性。也可以使用圖像和/或空格來分解大塊文本，并且可以更改字體大小或單詞之間的間距。當(dāng)然我們也可以使用表格。
表格可以有效地組織和呈現(xiàn)內(nèi)容，使讀者可以輕松瀏覽并快速吸收大量數(shù)據(jù)。但是，如果不使用移動(dòng)優(yōu)先框架，就很難讓這些表格在移動(dòng)設(shè)備上看起來不錯(cuò)。
在這篇文章中，我們將介紹如何在CSS框架Bootstrap中創(chuàng)建一個(gè)簡(jiǎn)單的表格元素并設(shè)置其樣式，以便您可以將響應(yīng)式表格添加到您網(wǎng)站上的頁面和博客文章中。讓我們開始吧。
引導(dǎo)表CSS
與Bootstrap中的許多事情一樣，創(chuàng)建表格很容易。只需將類 .table添加到HTML中的任何元素。然后，您可以使用修飾符類或自定義樣式自定義表格。
在我們談?wù)撟远x之前，讓我們從最基本的表格標(biāo)記開始。假設(shè)您要?jiǎng)?chuàng)建一個(gè)表格，列出一些周期性元素，有四列和三行。
要使用Bootstrap創(chuàng)建它，請(qǐng)使用以下示例中的HTML：
請(qǐng)注意，這段代碼可以分為兩個(gè)主要部分：
（表頭）和（表體）。四列在部分中定義，而三行在部分中定義。這兩個(gè)部分都包含在父
您可以通過向父元素或子元素添加修飾符類或自定義樣式來自定義表格。我們將在下面的例子中看到如何。
下面是一些示例，演示如何使用Bootstrap來使用和擴(kuò)展表元素。每個(gè)示例將顯示所需的不同修飾符類。單擊下面的任何鏈接跳轉(zhuǎn)到示例。
Bootstrap的移動(dòng)優(yōu)先設(shè)計(jì)方法使創(chuàng)建響應(yīng)式元素（包括表格）變得更加簡(jiǎn)單。
要?jiǎng)?chuàng)建跨所有視口響應(yīng)的表格（意思是，它們可以水平縮放），您只需要用.table-responsive類包裝.table類。將整個(gè)
您還可以通過選擇表格可以水平滾動(dòng)的最大斷點(diǎn)，使表格響應(yīng)不同的特定視口，而不是所有視口。
例如，如果您希望表格水平滾動(dòng)到576像素，那么您可以使用.table-responsive-sm修飾符類。768px、992px和1120px 分別是.table-responsive{-md|-lg|-xl}的最大寬度斷點(diǎn)。
Bootstrap表類的默認(rèn)顏色可能與您的品牌或配色方案不匹配。您可以使用.table-dark修飾符類來反轉(zhuǎn)顏色，以便背景顏色為深色而文本為淺色
如果您只想更改表頭的顏色而保持表體不變，請(qǐng)使用修飾符類.thead-dark或.thead-light。.thead-dark會(huì)使表頭變成深灰色（如下例所示），而.thead-light會(huì)使它變成淺灰色。
在前面的示例中，您將修飾符類應(yīng)用于
假設(shè)您要更改表體部分的樣式，而不是表頭部分。使用.table-striped修飾符類，您可以為
部分中的每一行添加顏色。這會(huì)給它一個(gè)“斑馬條紋”的效果。
要?jiǎng)?chuàng)建此表，只需在.table類之后添加“table-striped”。
現(xiàn)在假設(shè)您希望行的樣式僅在訪問者將鼠標(biāo)懸停在行上時(shí)發(fā)生變化。使用.table-hover修飾符類，您可以在
部分的表格行上啟用懸停狀態(tài)。
要?jiǎng)?chuàng)建此表，請(qǐng)?jiān)?table類之后添加table-hover。
使用Bootstrap，您還可以使用上下文類更改行或單元格的顏色。
如果您希望表格的所有邊都有邊框，而不僅僅是水平分隔線，那么您可以使用.table -bordered修飾符類。在.table類之后添加此類。
如果您想刪除所有邊框，則可以使用.table-borderless修飾符類。
表格有助于以一種易于訪問者閱讀和理解的方式組織網(wǎng)站上的大量數(shù)據(jù)。上述任何表格示例都可以添加和自定義到您獨(dú)特的Bootstrap站點(diǎn)。成都小程序開發(fā)只需要熟悉HTML和CSS即可開始使用。
