第11節 Bootstrap的表格用法
11.1 強大的Bootstrap的表格
在html標簽<table>加上基本類別 .table就可以使用Bootstrap的表格可選修飾類別或是自定義樣式進行擴展。
所有表格樣式在Bootstrap中都不會繼承，意味著嵌套表格的樣式都是獨立于父表格。
以下是使用最基本的表格排版在Bootstrap中的外觀。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>表格演示</title> </head> <body> <div> <h1>表格演示</h1> <table> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>程序員</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>美工</td> </tr> <tr> <th>3</th> <td>王五</td> <td colspan="2">我只會耍大刀</td> </tr> </tbody> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
可以看到，默認的簡單表格只是在table標簽加了個class="table"，就和普通的html表格外觀上有了很大改觀。
11.2 表格的顏色
使用語意化class給表格列或單元格上色。表哥顏色可以分別設置在<table>、<tr>、<thead>、<th>、<td>等一切表格元素中。如果是加在表格中，則在整個表格中有效，加在行中對整行有效，加在單元格中對整個單元格有效。
到目前為止好像沒法加在整列中，要對整列使用某個顏色，只能將其中的所有單元格設置顏色。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>表格演示</title> </head> <body> <div> <table> <tr><td>Default</td></tr> <tr><td>table-primary</td></tr> <tr><td>table-secondary</td></tr> <tr><td>table-success</td></tr> <tr><td>table-danger</td></tr> <tr><td>table-warning</td></tr> <tr><td>table-info</td></tr> <tr><td>table-light</td></tr> <tr><td>table-dark</td></tr> <tr><td>table-success</td></tr> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
通過這個例子大家可以基本明白表格顏色的用法，需要主要的是對整個表格運用顏色是用 <table class="table table-secondary">，不要省略前面的table， 雖然例子中最后一行也是table-success，但是事實上，最后一行是設置在單元格上的。
11.3 表格的結構-表頭、表尾、標題
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>表格演示</title> </head> <body> <div> <table class="table caption-top"> <caption><h3>人員登記表</h5></caption> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>警察</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>護士</td> </tr> <tr> <th>3</th> <td>王五</td> <td>男</td> <td>教師</td> </tr> </tbody> <tfoot> <th>序號</th> <td>姓名</td> <td>性別</td> <td>職業</td> </tfoot> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
顯示效果
從上面的例子可以看出表格由下面幾部分組成：
表頭thead：t是表格的簡寫head是頭部
表尾tfoot：t是表格foot是底部
標題caption：只有一行，默認在表尾底部，演示中我通過在table中添加caption-top使他在上部。默認標題靠左對齊，我通過在caption中添加class="text-center"使文字居中。默認字體較小，我通過h3標題使他變大。
行tr：一行，td標簽必須寫在tr中。
列td：一個單元格，通過
<td colspan="2">可以使兩個相鄰的單元格合并，里面的數字可以更改，但不能大于行中所有的列數。表頭列th：與td唯一區別是里面文字粗體顯示
通常為了美觀，一般使用<thead>或<thead> 使<thead>顯示為淺灰色或深灰色，其用法與11.2.1中的行的顏色一樣，另外一般情況下表尾很少使用。
11.4 響應式表格
當表格一行的內容超過瀏覽器寬度的時候，默認瀏覽器會出現滾動條，這樣存在的一個問題就是會把頁面無線拉伸，嚴重影響網頁中其他頁面元素的顯示效果。
而響應式表格是指把表格放在一個<div> </div>標簽中，而該div標簽是響應的，與容器同寬度，當表格寬度大于該div標簽的時候，該div容器就會出現滾動條，而不是在瀏覽器上，這樣就保證了表格不會超出頁面寬度。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>表格演示</title>
<style>
td{white-space:nowrap;}
</style>
</head>
<body>
<div>
<div>
<table class="table caption-top">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<th>表頭4</th>
<th>表頭5</th>
<th>表頭6</th>
<th>表頭7</th>
<th>表頭8</th>
<th>表頭9</th>
<th>表頭10</th>
</tr>
</thead>
<tbody>
<tr>
<td>我是第1個單元格</td>
<td>我是第2個單元格</td>
<td>我是第3個單元格</td>
<td>我是第4個單元格</td>
<td>我是第5個單元格</td>
<td>我是第6個單元格</td>
<td>我是第7個單元格</td>
<td>我是第8個單元格</td>
<td>我是第9個單元格</td>
<td>我是第10個單元格</td>
</tr>
</table>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>該代碼的css部分是為了禁止文字換行，否則單元格會擠壓成很多行。
在特點斷點處響應
table-responsive{-sm|-md|-lg|-xl|-xxl}表示在斷點前會出現滾動條，從該斷點開始，表格將正常運行并且不會水平滾動。你可以把上面的代碼中table-responsive換為table-responsive-md 查看一下效果，在此我就不演示了。
11.5 表格邊框
默認表格是只有行邊框的，你可以用table-bordered 為表格和單元格的所有邊添加邊框，還可以用可以添加邊框顏色實用類來更改邊框顏色（邊框顏色通表格顏色，只不過把前綴table換成border）。
<table class="table table-bordered border-primary"> ... </table>
你還可以table-borderless構造無框的表格。
<table class="table table-borderless"> ... </table>
現在給出一個綜合實例。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>表格演示</title> </head> <body> <div> <table class="table caption-top table-bordered border-primary"> <caption><h3>帶顏色邊框表格</h5></caption> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>警察</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>護士</td> </tr> <tr> <th>3</th> <td>王五</td> <td>男</td> <td>教師</td> </tr> </tbody> </table> <table class="table caption-top table-borderless"> <caption><h3>無邊框表格</h5></caption> <thead > <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>警察</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>護士</td> </tr> <tr> <th>3</th> <td>王五</td> <td>男</td> <td>教師</td> </tr> </tbody> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
11.6 緊湊表格（小表格）
添加table-sm將所有單元格填充減半，使任何table更加緊湊。
<table class="table table-sm">
下面第二個是緊湊表格，仔細看是不是比第一個沒使用table-sm那個行高度要小。
11.7 垂直對齊
<thead> 的表格單元格始終垂直對齊到底部。<tbody>中的表單元格繼承<table>對齊方式，默認情況下將其對齊到頂部。在需要時可以使用垂直對齊類重新對齊。
垂直對齊類有兩種修飾符：
vertical-align: middle;居中對齊
vertical-align: bottom; 對齊到底部
垂直對齊修飾符可以寫到表格，可以寫到行，也可以寫到單元格，寫到哪里就作用于哪里。還可以用到p、div等其它標簽。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>列的排序</title>
<style>
th{white-space:nowrap;}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>簡介</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李白</td>
<td>李白（701年－762年） ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發白帝城》等多首。</td>
</tr>
</tbody>
</table>
<table class="table align-middle">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>簡介</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李白</td>
<td>李白（701年－762年） ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發白帝城》等多首。</td>
</tr>
<tr>
<td>2</td>
<td>杜甫</td>
<td>杜甫（712年—770年），字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現實主義詩人，與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。杜甫創作了《登高》《春望》《北征》《三吏》《三別》等名作。</td>
</tr>
</tr>
<tr>
<td>3</td>
<td>白居易</td>
<td>白居易（772年－846年），字樂天，號香山居士，又號醉吟先生，祖籍山西太原。是唐代偉大的現實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。</td>
</tr>
</tbody>
</table>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>第一個表格是不使用垂直對齊的效果。 第二個表格中第一行繼承了表格的對齊效果，第二行使用了行的對齊效果，第三行第二單元格使用單元格對齊效果，其他兩個單元格使用表格的對齊效果。
11.8 水平對齊
水平對齊其實就是文本對齊，使用的是文本通用類，在前面的表格結構中的標題部分已經用過了，有三個修飾符：
text-start：左對齊，默認。有時候外層使用了其他方式對齊，可以使用它重置。
text-center：居中對齊
text-end：靠右對齊
跟垂直對齊一樣，垂直對齊修飾符可以寫到表格，可以寫到行，也可以寫到單元格，寫到哪里就作用于哪里。還可以用到p、div、h1-h6、span等其它標簽，甚至只要有文本的容器都可以使用這個，應用比垂直對齊多得多。這個在前面的好多例子都用到了，就不舉例了。
11.8 嵌套
表格的嵌套就是在表格中的一個單元格中再嵌入一個表格，嵌套表不會繼承邊框樣式、活動樣式和表變量。
需要注意的是表格必須嵌套在一個單元格內，而不能直接嵌套到一個行內，如果你想嵌套進一行中，請使用單元格合并功能，如下例子。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>列的排序</title>
<style>
th{white-space:nowrap;}
</style>
</head>
<body>
<div>
<table class="table caption-top table-bordered border-primary">
<caption><h3>人員名單</h5></caption>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>職業</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>張三</td>
<td>男</td>
<td>警察</td>
</tr>
<tr>
<th>2</th>
<td>李四</td>
<td>女</td>
<td>護士</td>
</tr>
<tr>
<td colspan="4">
<table class="table caption-top table-bordered border-primary">
<caption><h3>據說天使沒有性別</h5></caption>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>職業</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>加百列</td>
<td>天使長</td>
</tr>
<tr>
<th>2</th>
<td>沙利葉</td>
<td>月之天使</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>11.9 強調表格
11.9.1 條紋行
使用.table-striped在<tbody>范圍內任何表格行增加明暗條紋樣式效果，還可以配合顏色做出更加美觀的表格。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>表格演示</title> </head> <body> <div> <table class="table table-striped"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>警察</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>護士</td> </tr> <tr> <th>3</th> <td>王五</td> <td>男</td> <td>教師</td> </tr> </tbody> </table> <table class="table table-dark table-striped"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>警察</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>護士</td> </tr> <tr> <th>3</th> <td>王五</td> <td>男</td> <td>教師</td> </tr> </tbody> </table> <table class="table table-success table-striped"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>張三</td> <td>男</td> <td>警察</td> </tr> <tr> <th>2</th> <td>李四</td> <td>女</td> <td>護士</td> </tr> <tr> <th>3</th> <td>王五</td> <td>男</td> <td>教師</td> </tr> </tbody> </table> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
11.9.2 可懸停行
在table標簽類中添加table-hover可對<tbody>中的表行啟用懸停效果，當鼠標放在某一行上面時，鄭航會特殊顯示，。 將上面11.9.1代碼中table-striped換為table-hover可實現懸停效果，也可以和table-striped一起使用，用法很簡單，在此就不在演示了。
11.9.3 激活表
通過添加table-active高亮顯示表行或單元格。注意這個修飾符只能加在行或者單元格上，其用法和垂直對齊用法差不多。這里不再演示，只給出效果圖。
今天的課程就到這里，到此，關于網格終于也要告一個段落了。