Bootstrap - 表格

上一頁
下一頁

本章將討論 Bootstrap 表格以及建立表格的類。表格用於以行和列的形式組織資料。表格允許您對大量資料進行分組，並以清晰且有序的方式呈現它們。以下是 Bootstrap 支援的一些表格專案。

序號 標籤和描述
1

<table>

用於以表格格式顯示資料的包裝元素
2

<thead>

用於表格標題行的 (<tr>) 容器元素，用於標記表格列。
3

<tbody>

用於表格主體中表格行 (<tr>) 的容器元素。
4

<tr>

用於一組表格單元格 (<td> 或 <th>) 的容器元素，這些單元格出現在同一行上。
5

<td>

預設表格單元格。
6

<th>

用於列（或行，取決於範圍和位置）標籤的特殊表格單元格。必須在 <thead> 內使用。
7

<caption>

定義表格標題

簡單表格

如果您想要一個基本的表格樣式，只需新增少量填充和水平分隔線，請在表格中新增.table 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<DOCTYPE html >
<html lang="en">
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title >Bootstrap - Table</title >
</head >
<body >
    <table class="table" >
    <thead >
        <tr >
            <th scope="col" >Sr.No.</th >
            <th scope="col" >Name</th >
            <th scope="col" >Role</th >
            <th scope="col" >Salary</th >
            </tr >
    </thead >
    <tbody >
        <tr >
            <th scope="row" >1</th >
            <td >Jhon</td >
            <td >Software Developer</td >
            <td >40000</td >
        </tr >
        <tr >
            <th scope="row" >2</th >
            <td >David</td >
            <td >Tester</td >
            <td >50000</td >
        </tr >
        <tr >
            <th scope="row" >3</th >
            <td >Mary</td >
            <td >Data Analyst</td >
            <td >35000</td >
        </tr >
    </tbody >
    </table >
</body >
</html >

變體

上下文類允許您更改表格行或單個單元格的背景顏色。新增類.table-active、.table-success、.table-danger、.table-warning 類以突出顯示錶格行或單元格，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Table</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr class="table-default">
            <th scope="row">1</th>
            <td>Oliver</td>
            <td>Full satck developer</td>
            <td>40000</td>
          </tr>
          <tr class="table-primary">
            <th scope="row">2</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>43000</td>
          </tr>
          <tr class="table-secondary">
            <th scope="row">3</th>
            <td>David</td>
            <td>Tester</td>
            <td>60000</td>
          </tr>
          <tr class="table-info">
            <th scope="row">4</th>
            <td>Sam</td>
            <td>Software Developer</td>
            <td>35000</td>
          </tr>
          <tr class="table-danger">
            <th scope="row">5</th>
            <td>Mary</td>
            <td>Data Analyst</td>
            <td>36000</td>
          </tr>
          <tr class="table-success">
            <th scope="row">6</th>
            <td>James</td>
            <td>Tester</td>
            <td>47000</td>
          </tr>
          <tr class="table-active">
            <th scope="row">7</th>
            <td>Mary</td>
            <td>HR</td>
            <td>90000</td>
          </tr>
          <tr class="table-light">
            <th scope="row">8</th>
            <td>Noah</td>
            <td>Data Analyst</td>
            <td>50000</td>
          </tr>
          <tr class="table-warning">
            <th scope="row">9</th>
            <td>Lucas</td>
            <td>Software Developer</td>
            <td>52000</td>
          </tr>
          <tr class="table-dark">
            <th scope="row">10</th>
            <td>Almand</td>
            <td>Software Developer</td>
            <td>73000</td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>

帶強調的表格

條紋行

要在行上獲得斑馬條紋，請在.tbody 中新增.table-striped 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

條紋列

要在列上獲得斑馬條紋，請在.tbody 中新增.table-striped-columns 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-striped-columns">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>

        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>40000</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>David</td>
            <td>Tester</td>
            <td>50000</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Mary</td>
            <td>Data Analyst</td>
            <td>35000</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

新增.table-dark 和.table-striped 類以在表格上獲得深色斑馬條紋。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-dark  table-striped">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

新增.table-dark 和.table-striped-columns 類以在表格上獲得深色斑馬條紋列。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-dark  table-striped-columns">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

新增.table-success 和.table-striped 類以在表格上獲得淺綠色斑馬條紋。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Table</title>
    </head>
    <body>
      <table class="table  table-success table-striped">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Jhon</td>
                  <td>Software Developer</td>
                  <td>40000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>David</td>
                  <td>Tester</td>
                  <td>50000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Mary</td>
                  <td>Data Analyst</td>
                  <td>35000</td>
                </tr>
              </tbody>
         </table>
     </body>
    </html>

新增.table-success 和.table-striped-columns 類以在表格上獲得淺綠色斑馬條紋列。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Table</title>
    </head>
    <body>
      <table class="table  table-success table-striped-columns">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Jhon</td>
                  <td>Software Developer</td>
                  <td>40000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>David</td>
                  <td>Tester</td>
                  <td>50000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Mary</td>
                  <td>Data Analyst</td>
                  <td>35000</td>
                </tr>
              </tbody>
         </table>
     </body>
    </html>

可懸停的行

新增.table-hover 類以在表格行上獲得懸停效果，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-hover  table-secondary">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

新增.table-hover 和.table-dark 類以在表格行上獲得深色懸停效果。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Table</title>
    </head>
    <body>
      <table class="table  table-dark table-hover">
        <thead>
                <tr>
                  <th scope="col">Sr.No.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Role</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Jhon</td>
                  <td>Software Developer</td>
                  <td>40000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>David</td>
                  <td>Tester</td>
                  <td>50000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Mary</td>
                  <td>Data Analyst</td>
                  <td>35000</td>
                </tr>
              </tbody>
         </table>
     </body>
    </html>

新增.table-hover 和.table-striped 類以在表格上獲得帶斑馬條紋的懸停效果。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
       <title>Bootstrap - Table</title>
    </head>
    <body>
     <table class="table  table-hover  table-striped">
       <thead>
               <tr>
                 <th scope="col">Sr.No.</th>
                 <th scope="col">Name</th>
                 <th scope="col">Role</th>
                 <th scope="col">Salary</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <th scope="row">1</th>
                 <td>Jhon</td>
                 <td>Software Developer</td>
                 <td>40000</td>
               </tr>
               <tr>
                 <th scope="row">2</th>
                 <td>David</td>
                 <td>Tester</td>
                 <td>50000</td>
               </tr>
               <tr>
                 <th scope="row">3</th>
                 <td>Mary</td>
                 <td>Data Analyst</td>
                 <td>35000</td>
               </tr>
             </tbody>
        </table>
    </body>
    </html>

活動表格

新增.table-active 類以突出顯示錶格的行或單元格。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr class="table-active">
            <th scope="row">1</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>40000</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>David</td>
            <td>Tester</td>
            <td>50000</td>
        </tr>
        <tr class="table-active">
            <th scope="row">3</th>
            <td >mery</td>
            <td>Data Analyst</td>
            <td>35000</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

帶邊框的表格

要在每個專案周圍獲得邊界並在整個表格周圍獲得圓角，請在.tbody 中新增.table-bordered 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-bordered  border-primary">
    <thead>
        <tr>
         <th scope="col">Sr.No.</th>
         <th scope="col">Name</th>
         <th scope="col">Role</th>
         <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

無邊框表格

要獲得無邊框的表格，請在.tbody 中新增.table-borderless 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-borderless">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

小型表格

透過將所有單元格填充減半來使表格更緊湊，方法是在任何 .table 中新增.table-sm 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table table-sm">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

表格組分隔符

要使表格組.thead、.tbody 和.tfoot 之間的邊框更粗更暗，請新增.table-sm 類，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
    <title>Bootstrap - Table</title>
</head>
<body>
       <table class="table">
        <thead>
            <tr>
               <th scope="col">Sr.No.</th>
               <th scope="col">Name</th>
               <th scope="col">Role</th>
               <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody class="table-group-divider">
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mary</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

垂直對齊

<thead> 表格的單元格始終垂直對齊到底部。<tbody> 表格中的單元格繼承自 <table> 的對齊方式，預設情況下對齊到頂部。根據需要使用垂直對齊類重新對齊。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Tables</title>
</head>
<body>
    <div class="table-responsive">
    <table class="table align-middle">
        <thead>
         <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
              <th scope="col">Salary</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr class="align-bottom">
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mery</td>
                <td class="align-top">Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
</html>

響應式表格

響應式表格允許表格水平滾動。使用.table-responsive 包裝類.table 使表格在不同的視口中具有響應性。透過使用.table-responsive{-sm|-md|-lg|-xl|-xxl} 為響應式表格新增最大斷點。下表顯示了螢幕尺寸和相應的 Bootstrap 表格類。

類 螢幕寬度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Age</th>
                <th scope="col">Blood Group</th>
                <th scope="col">gender</th>
                <th scope="col">Address</th>
                <th scope="col">Married</th>
                <th scope="col">Education</th>
                <th scope="col">AdharCard Number</th>
                <th scope="col">Pan Number</th>
                <th scope="col">City</th>
                <th scope="col">Country</th>
                <th scope="col">Salary</th>
                <th scope="col">status</th>
                <th scope="col">status</th>
                <th scope="col">status</th>
                <th scope="col">status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>32</td>
                <td>A+</td>
                <td>Male</td>
                <td>Pune,Maharashtra.</td>
                <td>Yes</td>
                <td>B.E(Computer Science)</td>
                <td>0101010101010101</td>
                <td>2020200202020202</td>
                <td>Pune</td>
                <td>India</td>
                <td>40000</td>
                <td>yes</td>
                <td>yes</td>
                <td>yes</td>
                <td>yes</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
</html>

巢狀

表格巢狀用於在一個表格內建立另一個表格，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <thead class="table">
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
            <td colspan="4">
                <table class="table mb-0  table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Sr.No.</th>
                            <th scope="col">Name</th>
                            <th scope="col">Role</th>
                            <th scope="col">Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Almand</td>
                            <td>Software Developer</td>
                            <td>60000</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>David</td>
                            <td>Tester</td>
                            <td>35000</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Sam</td>
                            <td>Data Analyst</td>
                            <td>40000</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Mona</td>
                <td>Data Analyst</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Oliver</td>
                <td>Tester</td>
                <td>45000</td>
                </tr>
        </tbody>
    </table>
</body>
</html>

結構

表格頭部

新增.table-secondary 類以使表格頭部變為灰色，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
    <thead class="table-secondary">
        <tr>
            <th scope="col">Sr.No.</th>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jhon</td>
            <td>Software Developer</td>
            <td>40000</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>David</td>
            <td>Tester</td>
            <td>50000</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td >mery</td>
            <td>Data Analyst</td>
            <td>35000</td>
            </tr>
         </tbody>
    </table>
</body>
</html>

表格腳註

.tfoot 類在表格末尾新增腳註，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td >mery</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">footer</th>
                <td >footer</td>
                <td>footer</td>
                <td>footer</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

標題

<caption> 用於為表格提供標題，如下例所示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Table</title>
</head>
<body>
    <table class="table">
        <caption>List of Employees</caption>
        <thead>
            <tr>
                <th scope="col">Sr.No.</th>
                <th scope="col">Name</th>
                <th scope="col">Role</th>
                <th scope="col">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jhon</td>
                <td>Software Developer</td>
                <td>40000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>David</td>
                <td>Tester</td>
                <td>50000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td >mery</td>
                <td>Data Analyst</td>
                <td>35000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
列印頁面
上一頁
下一頁
廣告