标签 | 描述 |
---|---|
<table>
|
包含格式化成表格的数据 |
<thead>
|
包含表头行(<tr> ),标示列
|
<tbody>
|
包含表的内容行(<tr> )
|
<tr>
|
表格的列,包含一个个单元格 (<td> 或者<th> )形成一行数据
|
<td>
|
表格的单元格 |
<th>
|
用于表头,标识列。必须用于<thead> 中
|
<标题>
|
描述和总结表,对于屏幕阅读设备(screen readers) 特别有用 |
<table> <thead> <tr> <th>…</th> <th>…</th> </tr> </thead> <tbody> <tr> <td>…</td> <td>…</td> </tr> </tbody> </table>
名称 | 样式 | 描述 |
---|---|---|
默认表格 | 无 | 没有任何其他样式,仅是行和列 |
基本表格 |
.table
|
行间只有水平的线 |
有边框的表格 |
.table-bordered
|
添加圆角和外边框 |
奇偶相间的表格 |
.table-striped
|
行间添加奇偶背景色 (1, 3, 5, etc) |
压缩的表格 |
.table-condensed
|
将td 和 th 元素的纵向间距(padding)减半从 8px 到 4px |
表格默认的样式仅有一些边框来保证表格的可读性和结构性,DPL中code>.table样式是必须的。
<table class="table"> … </table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
为了实现更好的视觉效果可以在表行上添加奇偶线—仅仅添加 .table-striped
样式.
警告: 奇偶相间的背景使用:nth-child
CSS 选择器 ,在IE7-IE8不支持此特性。
<table class="table table-striped"> … </table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
给整个表格添加边框,同时添加圆角美化表格的内容。
<table class="table table-bordered"> … </table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
使你的表格更紧凑可以使用 .table-condensed
样式,减半单元格的边距(padding),从8px 到 4px。
<table class="table table-condensed"> … </table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
F利用上面的样式,进行组合灵活的实现自己表格的样式。
<table class="table table-striped table-bordered table-condensed"> ... </table>
Full name | |||
---|---|---|---|
# | First Name | Last Name | Username |
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |