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

来源：互联网发布：单反拍淘宝照片技巧编辑：程序博客网时间：2024/06/03 08:39

在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用DIV可以模拟出绝大部分以前的表格布局跟数据显示,在后面会讲些代替表格的显示方式.

表格应用
1. 表格的基本标签
2. 分析表格的基本标签
3. 基本演示
层模拟表格
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的思想,结构与表现的分离,不再为元素的属性做演示

代码

</colgroup>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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("/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>

晚上我没吃饭2-13
今天是中国的情人节,要一个人过2-12
下午朋友来看我2-11
^_^ 发工资拉,2-10
........... ....

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;/**//* 文本左对齐,可选~保证更多的浏览器是左对齐*/
}

晚上我没吃饭2-13
今天是中国的情人节,要一个人过2-12
下午朋友来看我2-11
^_^ 发工资拉,2-10
........... ....

另一种方法

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>

[原创:JS]由浅到深了解JavaScript类笨红 2-9
[原创:CSS]正确认识html与body 一叶千鸟 2-8
[灌水:泡MM]没有MM的日子怎样过嗷嗷 2-8
........ .... ....

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;
}

[原创:JS]由浅到深了解JavaScript类笨红 2-9
[原创:CSS]正确认识html与body 一叶千鸟 2-8
[灌水:泡MM]没有MM的日子怎样过嗷嗷 2-8
........ .... ....

总结

当做到三列时~我发现我已经一步一步的走向我反对的那种模拟了.
HTML4的时代table,table已经成为基本所有的网页设计用来布局的工具, XHTML1.x的时代table的任务只是数据显示,我支持表格的使用,不过不是用来布局的, 要想完全抛弃table,我认为应该等到浏览器们都支持display: table的CSS2才可以