您的位置:首页 > 网页制作 > HTML/Xhtml

XHTML中的表格应用及表格的模拟

日期:2006-07-06 11:54:35 点击: 来自:www.rotui.net 作者:嗷嗷

 

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

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

表格应用

表格的基本标签

  • 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 虽然很不情愿.

分析表格的基本标签

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

基本演示

不想过多的讲表格,这是一个比较完整的表格的演示,同时继承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>
无样式表现
表名
表头1表头2表头3表头4
表底1表底2表底3表底4
行1列1行1列2行1列3行1列4
行2列1行2列2行2列3行2列4
行3列1行3列2行3列3行3列4
行4列1行4列2行4列3行4列4
定义基本样式
表名
表头1表头2表头3表头4
表底1表底2表底3表底4
行1列1行1列2行1列3行1列4
行2列1行2列2行2列3行2列4
行3列1行3列2行3列3行3列4
行4列1行4列2行4列3行4列4
css部分
table.tab{
	border :1px black solid;
}

table.tab .g1 .c1
{
	background-color :Yellow;
	width:50px;
}
table.tab .g1 .c2
{
	background-color :  Lime;
	width : 100px;

}
table.tab .g1 .c3{
	background-color :  Green;
	width : 140px;
}
table.tab colgroup.g2{
	background:Teal url("http://rotui.net/images/bg.jpg") repeat top center;
	width : 200px;
	/* IE only start */
	/* 非IE的浏览器都不支持非width background以外的定义 */
	color : White;
	text-align : right;
	/* IE only end */
}
table.tab thead th
{
	background-color : Black;/*由于colgroup 定义了背景 th没定义 会因浏览器不同解析不同*/
	/*IE,Opera,Netscape会使用colgroup 定义的背景  MOZ系列的不会 非WIN系统浏览未测试 */
	color : White;
}
table.tab tfoot td
{
	background-color : Gray;
}
 

表格的模拟

模拟前的建议

div就是div 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力

<div>
    <div>
        <div>...</div>
    </div>
</div> 

两列多行的数据显示

两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.
我选择ol来做~是下面演示的是有有序列表~可能你会问我~为什么不用ul呢??
在参考中说到ol:绘制文本的编号列表,ul:绘制文本的项目符号列表 简单的说就是ol是有序列表,ul是无序列表

html部分
<ol>
    <li><a href="#" title="晚上我没吃饭">晚上我没吃饭</a>2-13</li>
    <li><a href="#" title="今天是中国的情人节,要一个人过">今天是中国的情人节,要一个人过</a>2-12</li>
    <li><a href="#" title="下午朋友来看我">下午朋友来看我</a>2-11</li>
    <li><a href="#" title="^_^ 发工资拉">^_^ 发工资拉,</a>2-10</li>
    <li><a href="#" title="...">...........</a> ....</li>
    </ol>	
  1. 晚上我没吃饭2-13
  2. 今天是中国的情人节,要一个人过2-12
  3. 下午朋友来看我2-11
  4. ^_^ 发工资拉,2-10
  5. ........... ....
CSS部分
ol.news{
	width:400px;/*装饰用的~只限显示的数据总宽度 */
	list-style-type :none;/*去掉列表数据*/
}
ol.news li{
	text-align:right;/* 把文本右对齐,主要的作用是把时间放在右边*/
	clear:both;/*清行*/
}
ol.news li a{
	float:left;
	display : inline;/* 再把主要显示的内容浮动到左边*/
	text-align:left;/* 文本左对齐,可选~保证更多的浏览器是左对齐*/
}
  1. 晚上我没吃饭2-13
  2. 今天是中国的情人节,要一个人过2-12
  3. 下午朋友来看我2-11
  4. ^_^ 发工资拉,2-10
  5. ........... ....
另一种方法
html
<ul class="news2">
  <li><span>[广东]</span>这里没电了</li>
  <li><span>[四川]</span>这里也没电了</li>
  <li><span>[上海]</span>郁闷!同上,没电啊~</li>
  <li><span>[北京]</span>挖哈哈 ^_^ 这里有电~</li>
  <li><span>....</span>........</li>
</ul>
CSS
ul.news2{
	width:400px;
	list-style-type :none;
}
ul.news2 li{
	text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/
}
ul.news2 li span
{
	float:right;/*我浮我浮我浮浮浮,我在右边了*/
	display : inline;
}
  • [广东]这里没电了
  • [四川]这里也没电了
  • [上海]郁闷!同上,没电啊~
  • [北京]挖哈哈 ^_^ 这里有电~
  • ............
更有的装饰
我们可以加background,border,font等定义~可以把他定义得漂亮点,不过这里的目的已经达到了,漂亮的样式等大家自己去尝试

三列多行的数据显示

这里依然选择文章列表来做演示,选择标签为ol,li,a,address,i.当然,你也可以依照你的文档资料选择如span,b,s等来做

HTML部分
<ol class="art">
    <li><a herf="#" title="...">[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li>
    <li><a herf="#" title="...">[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li>
    <li><a herf="#" title="...">[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li>
    <li><a herf="#" title="...">........</a><address>....</address><i>....</i></li>
</ol>
  1. [原创:JS]由浅到深了解JavaScript类
    笨红
    2-9
  2. [原创:CSS]正确认识html与body
    一叶千鸟
    2-8
  3. [灌水:泡MM]没有MM的日子怎样过
    嗷嗷
    2-8
  4. ........
    ....
    ....
CSS部分
ol.art{
	list-style-type :none;
}
ol.art li{
	clear:both;/*清行*/
}
ol.art li a{
	width:500px;/*定义宽度只是发了对齐*/
	float:left;display:inline;/*不能路过就浮过吧*/
}
ol.art li address{
	width:100px;
	font-style : normal;/*中文斜体不是很好看的说*/
	float:left;display:inline;
}
ol.art li i{
font-style : normal;
	float:left;display:inline;
}
	
  1. [原创:JS]由浅到深了解JavaScript类
    笨红
    2-9
  2. [原创:CSS]正确认识html与body
    一叶千鸟
    2-8
  3. [灌水:泡MM]没有MM的日子怎样过
    嗷嗷
    2-8
  4. ........
    ....
    ....

总结

当做到三列时~我发现我已经一步一步的走向我反对的那种模拟了.
HTML4的时代table,table已经成为基本所有的网页设计用来布局的工具, XHTML1.x的时代table的任务只是数据显示,我支持表格的使用,不过不是用来布局的, 要想完全抛弃table,我认为应该等到浏览器们都支持display: table的CSS2才可以
以前文章只是个人看法,在WEB设计中我属于学得晚的,学得菜的,可能里面说的有些不大对,也希望大家能帮我指出来.

原文地址:http://www.rotui.net/lab/tables/

More..素材图片 Picture Navigation
相关链接 Correlation Link
HTML/Xhtml热门 Class Hot
HTML/Xhtml推荐 Class Commend
版权所有:中国网站资源 2005- 未经授权禁止复制或建立镜像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.chinaddv.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.