我们可以通过使用不同的类来样式化来创建不同类型的Bootstrap表。
Bootstrap基本表：
基本的Bootstrap表具有浅色填充物，只有水平分隔物。 .table类用于向表添加基本样式。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Basic Table Example< /h1>< table class="table"> < tr>< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr>< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr>< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr>< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr>< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

自举条纹行表：
.table-striped类用于将斑马条纹添加到表中：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Striped Table Example< /h1>< table class="table table-striped"> < tr>< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr>< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr>< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr>< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr>< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

Bootstrap带边框表：
.table-bordered类用于在表格和单元格的所有侧面添加边框：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Bordered Table Example< /h1>< table class="table table-striped table-bordered"> < tr>< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr>< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr>< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr>< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr>< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

引导程序悬停行表：
.table-hover类用于在表行上启用悬停状态：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Hower rows Table Example< /h1>< table class="table table-hover"> < tr>< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr>< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr>< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr>< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr>< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

引导程序浓缩表：
.table-condensed类用于通过将单元格填充减半来使表更紧凑：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Condensed Table Example< /h1>< table class="table table-condensed"> < tr>< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr>< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr>< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr>< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr>< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

Bootstrap上下文类：
上下文类用于为表行（< tr> ）或表单元格（< td> ）着色：
以下是不同的上下文类：

类	描述
.active	用于将悬停颜色应用于表格行或表格单元格
.success	表示成功或积极的行动
.info	它表明中性的信息变化或行动
.warning	它指定了可能需要注意的警告
.danger	它表示危险或潜在的负面行为

例：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Contextual classes< /h1>< table class="table"> < tr class="success">< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr class="active">< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr class="danger">< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr class="info">< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr class="warning">< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

响应表：
.table-sensitive类用于创建响应表。你甚至可以在小型设备（768像素以下）上打开责任表。然后，表格将水平滚动。显示宽度大于768像素，没有区别。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < body>< div class="container"> < h1>Contextual classes< /h1> < div class="table-responsive">< table class="table"> < tr class="success">< th>Id< /th>< th>Name< /th>< th>Age< /th>< /tr> < tr class="active">< td>101< /td>< td>Rahul< /td>< td>23< /td>< /tr> < tr class="danger">< td>102< /td>< td>Umesh< /td>< td>22< /td>< /tr> < tr class="info">< td>103< /td>< td>Max< /td>< td>29< /td>< /tr> < tr class="warning">< td>104< /td>< td>Ajeet< /td>< td>21< /td>< /tr> < /table>< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091I462-1.jpg">< /script> < /body> < /html>

Bootstrap 4中一些新添加的表：黑/黑表
.table-dark类用于向表添加黑色背景：
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091GE2-15.jpg">< /script> < script src="http://img.readke.com/220416/15091H002-16.jpg">< /script> < /head> < body>< div class="container"> < h2>Black/Dark Table< /h2> < p>The .table-dark class is used to add a black background to the table:< /p> < table class="table table-dark"> < thead> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Ajeet< /td> < td>Kumar< /td> < td>ajeet@jtp.com< /td> < /tr> < tr> < td>Mahesh< /td> < td>Sharma< /td> < td>mahesh@jtp.com< /td> < /tr> < tr> < td>Sonoo< /td> < td>Jaiswal< /td> < td>sonoo@jtp.com< /td> < /tr> < /tbody> < /table> < /div>< /body> < /html>

深色条纹桌
【bootstrap表table】结合使用.table-dark类和.table-striped类，以创建一个暗条纹表：
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091GE2-15.jpg">< /script> < script src="http://img.readke.com/220416/15091H002-16.jpg">< /script> < /head> < body>< div class="container"> < h2>Dark Striped Table< /h2> < p>Combine the .table-dark class and .table-striped class to create a dark, striped table: < /p> < table class="table table-dark table-striped"> < thead> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Ajeet< /td> < td>Kumar< /td> < td>ajeet@jtp.com< /td> < /tr> < tr> < td>Mahesh< /td> < td>Sharma< /td> < td>mahesh@jtp.com< /td> < /tr> < tr> < td>Sonoo< /td> < td>Jaiswal< /td> < td>sonoo@jtp.com< /td> < /tr> < /tbody> < /table> < /div>< /body> < /html>

可悬停的黑色桌子
.table-hover类用于在表行上添加悬停效果（灰色背景色）：
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091GE2-15.jpg">< /script> < script src="http://img.readke.com/220416/15091H002-16.jpg">< /script> < /head> < body>< div class="container"> < h2>Hoverable Dark Table< /h2> < p>The .table-hover class is used to add a hover effect (grey background color) on table rows:< /p> < table class="table table-dark table-hover"> < thead> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Ajeet< /td> < td>Kumar< /td> < td>ajeet@jtp.com< /td> < /tr> < tr> < td>Mahesh< /td> < td>Sharma< /td> < td>mahesh@jtp.com< /td> < /tr> < tr> < td>Sonoo< /td> < td>Jaiswal< /td> < td>sonoo@jtp.com< /td> < /tr> < /tbody> < /table> < /div>< /body> < /html>

Bootstrap 4上下文表
上下文类可用于为整个表（< table> ），表行（< tr> ）或表单元格（< td> ）着色。
可以使用的类是：
.table-primary，.table-success，.table-info，.table-warning，.table-danger，.table-active，.table-secondary，.table-light和.table-dark：
让我们以一个示例来看一下Bootstrap 4表中所有上下文类的用法。
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091GE2-15.jpg">< /script> < script src="http://img.readke.com/220416/15091H002-16.jpg">< /script> < /head> < body>< div class="container"> < h2>Contextual Classes Example< /h2> < table class="table"> < thead> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Default< /td> < td>A< /td> < td>a@jtp.com< /td> < /tr> < tr class="table-primary"> < td>Primary< /td> < td>B< /td> < td>b@jtp.com< /td> < /tr> < tr class="table-success"> < td>Success< /td> < td>C< /td> < td>c@jtp.com< /td> < /tr> < tr class="table-danger"> < td>Danger< /td> < td>D< /td> < td>d@jtp.com< /td> < /tr> < tr class="table-info"> < td>Info< /td> < td>E< /td> < td>e@jtp.com< /td> < /tr> < tr class="table-warning"> < td>Warning< /td> < td>F< /td> < td>f@jtp.com< /td> < /tr> < tr class="table-active"> < td>Active< /td> < td>G< /td> < td>g@jtp.com< /td> < /tr> < tr class="table-secondary"> < td>Secondary< /td> < td>H< /td> < td>h@jtp.com< /td> < /tr> < tr class="table-light"> < td>Light< /td> < td>I< /td> < td>j@jtp.com< /td> < /tr> < tr class="table-dark text-dark"> < td>Dark< /td> < td>K< /td> < td>k@jtp.com< /td> < /tr> < /tbody> < /table> < /div>< /body> < /html>

表头颜色
你可以通过使用.thead-dark类向表头添加黑色背景，并使用.thead-light类向表头添加灰色背景来更改表头的背景颜色。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091GE2-15.jpg">< /script> < script src="http://img.readke.com/220416/15091H002-16.jpg">< /script> < /head> < body>< div class="container"> < h2>Table Head Colors< /h2> < table class="table"> < thead class="thead-dark"> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Ajeet< /td> < td>Kumar< /td> < td>ajeet@jtp.com< /td> < /tr> < tr> < td>Mahesh< /td> < td>Sharma< /td> < td>mahesh@jtp.com< /td> < /tr> < tr> < td>Sonoo< /td> < td>Jaiswal< /td> < td>sonoo@jtp.com< /td> < /tr> < /tbody> < /table> < table class="table"> < thead class="thead-light"> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Ajeet< /td> < td>Kumar< /td> < td>ajeet@jtp.com< /td> < /tr> < tr> < td>Mahesh< /td> < td>Sharma< /td> < td>mahesh@jtp.com< /td> < /tr> < tr> < td>Sonoo< /td> < td>Jaiswal< /td> < td>sonoo@jtp.com< /td> < /tr>< /tbody> < /table> < /div>< /body> < /html>

小桌子
.table-sm类用于通过将单元格填充减半来使表变小。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15091GE2-15.jpg">< /script> < script src="http://img.readke.com/220416/15091H002-16.jpg">< /script> < /head> < body>< div class="container"> < h2>Small Table Example< /h2> < p>The .table-sm class is used to make the table smaller by cutting cell padding in half.< /p> < table class="table table-bordered table-sm"> < thead> < tr> < th>Firstname< /th> < th>Lastname< /th> < th>Email< /th> < /tr> < /thead> < tbody> < tr> < td>Ajeet< /td> < td>Kumar< /td> < td>ajeet@jtp.com< /td> < /tr> < tr> < td>Mahesh< /td> < td>Sharma< /td> < td>mahesh@jtp.com< /td> < /tr> < tr> < td>Sonoo< /td> < td>Jaiswal< /td> < td>sonoo@jtp.com< /td> < /tr>< /tbody> < /table> < /div>< /body> < /html>

推荐阅读

• 

  深情唯美短句 50句最深情的句子
• 

  暖心句子简短 让人看了又看!
• 

  车子打火困难什么原因 车子打火困难是什么原因
• 

  七年级下册地理学习计划
• 

  妈宝男的十大特征表现 视频 妈宝男的十大特征表现
• 

  美图秀秀从哪一年收费的,美图秀秀退费不退怎么处理
• 

  敏感性皮肤可以用洁面凝胶吗
• 

  三星电子有哪些业务？三星集团呢？
• 

  iphone12电池容量，iphone12电池官方价格
• 

  安装MYSQL端口被占用
• 

  别克GNX是有史以来最稀有和最受欢迎的汽车之一
• 

  低风险地区回来需要隔离吗 低风险地区回来需要报备吗2021
• 

  首保为什么还要付钱 首保为什么一定要去4s店
• 

  坐马桶竞速游戏，马桶 游戏
• 

  g103次列车为什么票价便宜很多,g103次列车复兴号如何
• 

  如何更改IP地址所属的服务器？ 修改ip归属服务器怎么改
• 

  数据包分析网卡品牌
• 

  冰糖炖雪梨共多少集 冰糖炖雪梨多少集和好
• 

  雅典|上海雅典机械表呈现误差的处置办法
• 

  棕榈湾小记

• bootstrap表单form
• bootstrap网格grid
• bootstrap按钮button
• bootstrap的超大屏幕
• bootstrap容器
• bootstrap例子
• bootstrap是什么
• bootstrap入门教程