KISSY Table Demo

表格标签

标签	描述
`<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

表格示例

1. 默认的表格样式

表格默认的样式仅有一些边框来保证表格的可读性和结构性，DPL中code>.table样式是必须的。

<table class="table">
  …
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

2.奇偶相间的表格

为了实现更好的视觉效果可以在表行上添加奇偶线—仅仅添加 .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	@twitter

3. 有边框的表格

给整个表格添加边框，同时添加圆角美化表格的内容。

<table class="table table-bordered">
  …
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

4. 压缩的表格

使你的表格更紧凑可以使用 .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		@twitter

5.组合使用上面的样式

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		@twitter