1 表格基本功能回顾

1.1 定义表格总结，定义行及行内元素

1.table标签表示一整张表。thead表示表头部分通常指的是第一行。tbody表示表主体。tfooter表示页脚。
2.tr标签表示一行单元格。
3.td标签表示一个单元格，th表示加粗的单元格，通常用来表示表头。表示表头最好加上scope属性表示是行表头还是列表头。
4.caption标签，添加在开头表示标题或者总结。

<table>
    <caption>表头</caption>
    <thead>
        <tr>
            <th scope="col">列1</th>
            <th scope="col">列2</th>
            <th scope="col">列3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">行1</th>
            <td>1,1</td>
            <td>1,2</td>
        </tr>
        <tr>
            <th scope="row">行2</th>
            <td>2,1</td>
            <td>2,2</td>
        </tr>
    </tbody>
    <tfoot>表格页脚</tfoot>
</table>

1.2 合并单元格

1.通过colspan表示横跨几个单元格，rowspan表示纵跨几个单元格。后面的表格会依次往后排。

2 表格样式

2.1 基础样式

普通的表格什么样式都没有，基础样式table类，会有简单的边距和分割线。
官方实例

<table class="table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>

2.2 有边框的表格 table-bordered类

表的定义改为这样

<table class="table table-bordered">

2.3 条纹状表格 table-striped类

表的定义改为这样实现灰白条纹

<table class="table table-striped">

2.4 点击会有悬浮样式的表格 table-hover

表的定义改为这样，鼠标移动到对应的行会有特殊效果。

<table class="table table-hover">

2.5 紧凑型表格

表的定义改为这样，表格间距更小，效果不明显

<table class="table table-condensed">

2.6 响应式表格

我暂时看不到什么效果。

<table class="table table-responsive">

3.表格颜色

3.1 表格整体颜色，普通tr，td，th的颜色

可以用table-颜色类表示在加上一个active，除了mute，其他的颜色都可以用在表格里。
https://v4.bootcss.com/docs/4.0/utilities/colors/
在table标签里使用，整个表的颜色改变
tr标签改变一行颜色
td、th标签改变单个单元格的颜色。

3.2 表头颜色 thead标签的颜色

只能用thead-dark和thead-light类。

<table class="table table-active">
    <thead class="thead-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr class="table-warning">
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row" class="table-info">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

3.3也可以设置表格背景颜色

待补充

Bootstrap3 表格处理