如何用CSS定义表格与模拟表格

在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用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>

第 1 2 3 4 5 6 7 8 9 10 11 12 页

如何用CSS定义表格与模拟表格

相关文章:

你感兴趣的文章:

标签云: