用css定义表格与模拟表格2

最新推荐文章于 2023-09-19 08:17:02 发布

纯和书院

最新推荐文章于 2023-09-19 08:17:02 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/shanzimedia/article/details/54783692

版权

表格的模拟

1、模拟前的建议:

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

2、两列多行的数据显示:

两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.
我选择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>

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="KEYWords" content="css,xhtml" /><meta name="DEscription" content="CSS" /><meta name="author" content="RotUI" /><meta content="all" name="robots" /><link rel="start" href="http://www.rotui.net" title="Home" /><body><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></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="KEYWords" content="css,xhtml" /><meta name="DEscription" content="CSS" /><meta name="author" content="RotUI" /><meta content="all" name="robots" /><link rel="start" href="http://www.rotui.net" title="Home" /><body><style type="text/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;/* 文本左对齐,可选~保证更多的浏览器是左对齐*/}</style><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></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另一种方法:

html

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="KEYWords" content="css,xhtml" /><meta name="DEscription" content="CSS" /><meta name="author" content="RotUI" /><meta content="all" name="robots" /><link rel="start" href="http://www.rotui.net" title="Home" /><style type="text/css">ul.news2{ width:400px; list-style-type :none;}ul.news2 li{ text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/}ul.news2 li span{ float:right;/*我浮我浮我浮浮浮,我在右边了*/ display : inline;}</style><body><ul <li><span>[广东]</span>这里没电了</li> <li><span>[四川]</span>这里也没电了</li> <li><span>[上海]</span>郁闷!同上,没电啊~</li> <li><span>[北京]</span>挖哈哈 ^_^ 这里有电~</li> <li><span>....</span>........</li></ul></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

更多的装饰
我们可以加background,border,font等定义~可以把他定义得漂亮点,不过这里的目的已经达到了,漂亮的样式等大家自己去尝试

2、三列多行的数据显示:

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

<ol />    <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>

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="KEYWords" content="css,xhtml" /><meta name="DEscription" content="CSS" /><meta name="author" content="RotUI" /><meta content="all" name="robots" /><link rel="start" href="http://www.rotui.net" title="Home" /><body><ol <li><a href="#" title="...">[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li> <li><a href="#" title="...">[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li> <li><a href="#" title="...">[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li> <li><a href="#" title="...">........</a><address>....</address><i>....</i></li> </ol></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="KEYWords" content="css,xhtml" /><meta name="DEscription" content="CSS" /><meta name="author" content="RotUI" /><meta content="all" name="robots" /><link rel="start" href="http://www.rotui.net" title="Home" /><style type="text/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;}</style><body><ol <li><a href="#" title="...">[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li> <li><a href="#" title="...">[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li> <li><a href="#" title="...">[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li> <li><a href="#" title="...">........</a><address>....</address><i>....</i></li> </ol></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

总结

当做到三列时~我发现我已经一步一步的走向我反对的那种模拟了.

HTML4的时代table,table已经成为基本所有的网页设计用来布局的工具, XHTML1.x的时代table的任务只是数据显示,我支持表格的使用,不过不是用来布局的, 要想完全抛弃table,我认为应该等到浏览器们都支持display: table的CSS2才可以

纯和书院

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css定义表格与模拟表格2

表格的模拟 1、模拟前的建议: DIV就是DIV 而不是table,极力反对变下面这样的DIV模拟表格,偶尔也考虑考虑一下亲和力 ... 　2、两列多行的数据显示: 两列多行的数据显示应用得最多的是文章列表之类的,一般来说主要由标题,时间组成的.我选择ol来做~是下面演示的是有有序列表~可能你会问我~为什么不用ul呢??在参考中说到ol:绘制文本的编号列表,ul:绘制文
复制链接

扫一扫