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