标准结构
标签 | 描述 |
---|---|
<table> | 用以包装表格化的数据 |
<thead> | 容纳表格标题行 (<tr> )以标识表格列, |
<tbody> | 容纳表格行 (<tr> ) |
<tr> | 容纳行内的一组单元格 (<td> or <th> ) |
<td> | 默认的表格单元格 |
<th> | 用于列头(或是行,取决于标签所在位置和区域)的特殊标签 必须置于 <thead> 标签内。 |
<caption> | 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用 |
- <table>
- <caption>...</caption>
- <thead>
- <tr>
- <th>...</th>
- <th>...</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>...</td>
- <td>...</td>
- </tr>
- </tbody>
- </table>
默认样式
行与行之间用水平线相隔。只需向<table>添加.table
- <table class="table">
- …
- </table>
表格的可选类
在.table后面可以添加下列任意类。
.table-striped可以使奇数行的背景设为灰色。
- <table class="table table-striped">
- …
- </table>
.table-bordered可以使边框显示。
- <table class="table table-bordered">
- …
- </table>
.table-hover可以使鼠标悬停的行的背景变为灰色。
- <table class="table table-hover">
- …
- </table>
.table-condensed可以使行间距变小。
- <table class="table table-condensed">
- …
- </table>
行的可选类
使用下列类可以使行的背景色变化,从而表达一定含义。
向<tr>添加.success、.error、.warning、.info。
- ...
- <tr class="success">
- <td>1</td>
- <td>TB - Monthly</td>
- <td>01/04/2012</td>
- <td>Approved</td>
- </tr>
- ...