Bootstrap - 表格

本章将讨论引导表和创建表的类。表格用于以行和列的形式组织数据。表格允许您对大量数据进行分组并以清晰有序的方式呈现它们。下面列出了 Bootstraps 支持的一些表项。

先生。 标签和描述
1

<表>

用于以表格格式显示数据的包装元素
2

<标题>

表头行 (<tr>) 的容器元素，用于标记表列。
3

<正文>

表正文中表行 (<tr>) 的容器元素。
4

<tr>

出现在单行上的一组表格单元格（<td> 或 <th>）的容器元素。
5

<td>

默认表格单元格。
6

<第>

用于列（或行，取决于范围和位置）标签的特殊表格单元格。必须在 <thead> 内使用
7

<标题>

定义表格标题

简单的桌子

如果您想要一个只有一点点填充和水平分隔线的基本表格样式，请在 table 处添加.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-sm类添加到任何 .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 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 < 576 像素
.table-responsive-md < 768 像素
.table-响应式-lg < 992 像素
.table-responsive-xl < 1200 像素
.table-responsive-xxl < 1400 像素

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!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>