日期:2013-07-02  浏览次数:21130 次

在这里~首先要说明的~我不是推荐大家使用表格规划,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用DIV可以模仿出绝大部分以前的表格规划跟数据显示,在后面会讲些代替表格的显示方式.同时,由于找详细的中文引见.英文的水平又无限.看W3C那引见~有些地方可能理解错误,如果有发现的朋友请帮忙指出.

[1]表格使用
1表格的基本标签
2分析表格的基本标签
3基本演示
[2]层模仿表格
1模仿前的建议
2两列多行的数据显示
3三列多行的数据显示

表格使用

1、表格的基本标签:

TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

虽然CSS2里可以把别的标签定义得跟table的一样
可是 IE 不支持 所以~应该用表格的地方还是用表格好?
说到表格,本人悄然的BS一下FF 虽然很不情愿.

2、分析表格的基本标签:

table
table元素定义一个表格的开始
tr
表格中的行
THEAD
表头
TBODY
表的主体
TFOOT
表底
COL
指定基于列的表格默认属性,嵌套的 COL 属性将覆盖 COLGROUP 属性
COLGROUP
指定表格中一列或一组列的默认属性。
TD, TH
单元格
CAPTION
表名

3、基本演示:

不想过多的讲表格,这是一个比较完整的表格的演示,同时承继XHTML的思想,结构与表现的分离,不再为元素的属性做演示

<table class="tab">
  <caption>表名</caption>
  <colgroup class="g1" span="3" >
    <col class="c1" />
    <col class="c2"/>
    <col class="c3"/>
  </colgroup>
  <colgroup class="g2" span="1" >
  </colgroup>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>表底1</td>
      <td>表底2</td>
      <td>表底3</td>
      <td>表底4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
      <td>行1列4</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
      <td>行2列4</td>
    </tr>
     <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
      <td>行3列4</td>
    </tr>
    <tr>
      <td>行4列1</td>
      <td>行4列2</td>
      <td>行4列3</td>
      <td>行4列4</td>
    </tr>
  </tbody>
</table>

无款式表现:

运转代码框