和之前的表格相比，标签更丰富更加语义化，效果更佳美观
<table>： 为表格添加基础样式
<thead>： 表格标题行的容器元素（<tr>）
<tbody>：表格主体中的表格行的容器元素 （<tr>）
<tr>： 表格行
<td>： 默认的表格单元格
<th>： 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用
<caption>：关于表格存储内容的描述或总结
.table 为任意 <table>添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
.table-condensed 让表格更加紧凑
适合应用在<th>、<tr>，<td>
.active 激活效果（悬停颜色）
.success 表示成功或积极的动作
.info 表示普通的提示信息或动作
.warning 表示警告或需要用户注意
.danger 表示危险或潜在的带来的负面影响的动作
表格的父元素设置响应式 -- 小于768px，出现边框
<table class="table table-responsive"> <caption>经营产品大全</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr class="info"> <td>产品1</td> <td>2020-1-1</td> <td>待发货</td> </tr> <tr class="active"> <td>产品2</td> <td>2020-1-2</td> <td>已发货</td> </tr> <tr class="success"> <td>产品3</td> <td>2020-1-3</td> <td>未付款</td> </tr> <tr class="warning"> <td>产品4</td> <td>2020-1-4</td> <td>已退货</td> </tr> <tr class="danger"> <td>产品5</td> <td>2020-1-5</td> <td>已退款</td> </tr> </tbody> </table>
原文：https://www.cnblogs.com/JasperZhao/p/15247308.html