bootstrap专栏 05.表格与表单 01.表格

# 01.表格

[toc]{type: "ol", level: [3]}

### 表格
- table
> 添加表格样式
- table-striped
> 隔行换色
- table-bordered
> 表格边框
- table-hover
> 悬停加深
- align
> 设置文本在表格中的对齐方式
> align-top align-middle align-bottom
```html
<!--       添加表格样式  隔行换色        表格边框       悬停加深 -->
<table class="table table-striped table-bordered table-hover">
    <!--设置高亮/深色模式 table-light-->
    <thead class="table-dark">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>sex</th>
        <th>age</th>
        <th>hobby</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <!--设置表格颜色-->
        <td class="table-success">01</td>
        <td class="table-primary">ming</td>
        <td class="table-info">boy</td>
        <td class="table-warning">36</td>
        <td class="table-danger">read</td>
    </tr>

    <tr>
        <td>02</td>
        <td>lili</td>
        <td>girl</td>
        <td>18</td>
        <td>play</td>
    </tr>

    <tr>
        <td>03</td>
        <td>jack</td>
        <td>boy</td>
        <td>22</td>
        <td>food</td>
    </tr>

    <tr style="height: 80px">
        <!--设置文本在表格中的对齐方式-->
        <td class="align-top">04</td>
        <td class="align-middle">pear</td>
        <td class="align-bottom">girl</td>
        <td class="align-middle">18</td>
        <td>shop</td>
    </tr>
    </tbody>
</table>
```
![表格-表格](01.表格-表格.png)