資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學Bootstrap基本表格講解
一般來說，表格是資料的結構化表示，它被組織成行和列。表格通常用於各種環境中，例如資料庫系統、電子表格和HTML網站。
在HTML中，如果我們建立一個基本的表格，它只會顯示其記錄，沒有任何邊框或單元格分隔符。而在Bootstrap中，基本的表格具有輕微的填充和水平分隔符。Bootstrap提供了一套CSS類，用於建立視覺上吸引人的網站。
在本文中，我們將討論所有不同的類，這些類可用於建立和設定Bootstrap中表格的樣式，並提供相應的示例。
Bootstrap基本表格
我們可以使用".table"類建立一個基本的Bootstrap表格。它只有輕微的填充和水平分隔符。
示例
在下面的示例中，我們在table標籤內使用".table"類建立一個基本的Bootstrap表格。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
當我們執行上面的程式碼時，輸出顯示一個基本的Bootstrap表格。
條紋行
使用".table-striped"類，我們可以為表格新增斑馬紋條紋。
示例
在下面的示例中，我們使用".table-striped"類為表格的行新增斑馬紋條紋。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Striped Table</h2>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
執行給定程式碼後，輸出如下所示：
帶邊框的表格
".table-bordered"類可用於為整個表格和單元格新增邊框：
示例
在這裡，我們使用".table-bordered"類在表格和單元格的四邊新增邊框：
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
上面程式碼的輸出如下所示：
滑鼠懸停表格行
".table-hover"類用於為表格行新增懸停效果。每當我們將滑鼠懸停在表格行上時，它都會新增一個灰色背景顏色。
示例
在下面的示例中，我們在表格行上使用".table-hover"類。因此，每當我們將滑鼠懸停在表格行上時，都會新增一個灰色背景。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
如果我們編譯並執行程式碼，結果將如下所示：
緊湊型表格
".table-condensed"類將透過將單元格填充減半來使表格更緊湊。
示例
在這裡，我們在table標籤中使用".table-condensed"類。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Condensed Table</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
上下文類
在Bootstrap中，上下文類用於為表格行或表格資料新增顏色。以下是可使用的上下文類：
.active − 為表格行或表格單元格新增懸停顏色（灰色）。
.success − 此顏色表示成功或積極的操作。
.info − 此顏色表示中性的資訊性更改或操作。
.warning − 此顏色表示警告。
.danger − 此顏色表示危險或潛在的負面操作。
示例
在下面的示例中，我們在表格行上使用了所有上述上下文類：
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Contextual Classes</h2>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr class="danger">
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr class="info">
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>14523</td>
</tr>
<tr class="warning">
<td>James</td>
<td>Anderson</td>
<td>51</td>
<td>53124</td>
</tr>
<tr class="active">
<td>Stuart</td>
<td>Broad</td>
<td>42</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出
讓我們編譯並執行程式碼，以產生以下結果：
更新於：2023年8月4日
瀏覽量：101
廣告