您现在的位置:首页 >> 前端 >> 内容

Bootstrap 基础CSS - 表格(Tables)

时间:2013/1/27 16:30:25 点击:

  核心提示:标准结构标签描述table用以包装表格化的数据thead容纳表格标题行 (tr)以标识表格列,tbody容纳表格行 (tr)tr容纳行内的一组单元格 (td or th)td默认的表格单元格th用于列...
标准结构

标签 描述

<table> 用以包装表格化的数据

<thead> 容纳表格标题行 (<tr>)以标识表格列,

<tbody> 容纳表格行 (<tr>)

<tr> 容纳行内的一组单元格 (<td> or <th>)

<td> 默认的表格单元格

<th> 用于列头(或是行,取决于标签所在位置和区域)的特殊标签

必须置于 <thead> 标签内。

<caption> 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用

[html]  

<table>  

  <caption>...</caption>  

  <thead>  

    <tr>  

      <th>...</th>  

      <th>...</th>  

    </tr>  

  </thead>  

  <tbody>  

    <tr>  

      <td>...</td>  

      <td>...</td>  

    </tr>  

  </tbody>  

</table>  

 

默认样式

行与行之间用水平线相隔。只需向<table>添加.table

[html] 

<table class="table">  

  …  

</table>  

 

表格的可选类

在.table后面可以添加下列任意类。

 

.table-striped可以使奇数行的背景设为灰色。

[html]  

<table class="table table-striped">  

  …  

</table>  

 

.table-bordered可以使边框显示。

[html]  

<table class="table table-bordered">  

  …  

</table>  

 

.table-hover可以使鼠标悬停的行的背景变为灰色。

[html]  

<table class="table table-hover">  

  …  

</table>  

 

.table-condensed可以使行间距变小。

[html] 

<table class="table table-condensed">  

  …  

</table>  

 

行的可选类

使用下列类可以使行的背景色变化,从而表达一定含义。

向<tr>添加.success、.error、.warning、.info。

[html] 

...  

  <tr class="success">  

    <td>1</td>  

    <td>TB - Monthly</td>  

    <td>01/04/2012</td>  

    <td>Approved</td>  

  </tr>  

...  

 

Tags:BO OO OT TS 
作者:网络 来源:不详