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

如何用 CSS 定义表格与模拟表格 更新日期： 2006-03-22 10:49 出处： 作者： 在这里 ~ 首先要说明的 ~ 我不是推荐大家使用表格布局 ,而是跟大家说明在显示大批量的数据时 ~ 还有表格 可以用 ,而用 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 /t