CSS:用DIV+CSS实现表格形式的数据排列

愚人 · 发表于 2011-6-16 17:09

用DIV+CSS网页标准实现表格形式的数据排列

　　本教程是利用DIV+CSS的UL LI实现表格的形式的一种方法，也就是说在标准前提下可以实现表格的形式的。

　　表格的数据，就应该使用表格来组织，不是说制作符合WEB标准的网站，表格就一无是处、彻底下岗了。表格类的数据，它有着得天独厚的条件，也非常方便组织。这类数据内容直接使用表格就可以了。

　　或许你认为你的数据并不是表格式的数据，还有着其它的用法或你自己的见解，我们也可以用ul、li来实现表格形式的布局。

　　我们首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：

<ul id="biaoge">

<li class="biaotou">第一列</li>

<li class="biaotou">第二列</li>

<li class="biaotou">第三列</li>

<li class="biaotou">第四列</li>

<li>数据1-1</li>

<li>数据1-2</li>

<li>数据1-3</li>

<li>数据1-4</li>

<li>数据2-1</li>

<li>数据2-2</li>

<li>数据2-3</li>

<li>数据2-4</li>

<li>数据3-1</li>

<li>数据3-2</li>

<li>
数据3-3</li>

<li>数据3-4</li>

<li>数据4-1</li>

<li>数据4-2</li>

<li>数据4-3</li>

<li>数据4-4</li>

</ul>　　

一个无序列表biaoge，前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。所以单独赋予了类，可以方便控制。下面我们开始CSS代码的编写：

* {

margin:0;

padding:0;

font-size:12px;

color:#000;

}　　
CSS整体布局声明，边距为零，填充为零，文字大小为12px，文字颜色为黑色#000；

#biaoge {

width:405px;

margin:50px auto;

}　　

ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。

#biaoge li,#biaoge li.biaotou {

list-style-type:none;

width:100px;

height:30px;

line-height:30px;

text-align:center;

float:left;
margin-left:1px;

margin-bottom:1px;

background:#ccc;

}　　

对各个列表项li（即单元格）进行样式定义，设置列表项预设标记为无，宽度与高度分别是100px、30px，为了让文字垂直居中于li中，设置行高为30px，文字水平居中。设置为向左浮动，并且左边距与底边距均为1px，实现了简单的表格线的效果。（如果设计成border的表格线，很多CSS HACK很难控制与调整，特别是FF中极不正常，不建议使用border来实现这类ul+li实现表格线的定义！）设置背景色为浅灰色#ccc。

#biaoge li.biaotou {

background:#999;

}　　

我们设置四个“表头”li的背景色为深灰色#999，与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。

　　最后我们再次声明，表格类的数据最好是用表格来实现，符合WEB标准不必拘泥于完全不用表格，只是在适当的情况下，可以使用此案例的方法来实现类似于表格的布局。

　　运行下面代码可以查看演示效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.webjx.com</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
color:#000;
}

#biaoge {
width:405px;
margin:50px auto;
}

#biaoge li,#biaoge li.biaotou {
list-style-type:none;
width:100px;
height:30px;
line-height:30px;
text-align:center;
float:left;
margin-left:1px;
margin-bottom:1px;
background:#ccc;
}

#biaoge li.biaotou {
background:#999;
}
</style>
</head>
<body>

<ul id="biaoge">
<li class="biaotou">第一列</li>
<li class="biaotou">第二列</li>
<li class="biaotou">第三列</li>
<li class="biaotou">第四列</li>

<li>数据1-1</li>
<li>
数据1-2</li>
<li>数据1-3</li>
<li>数据1-4</li>
<li>数据2-1</li>
<li>数据2-2</li>
<li>数据2-3</li>
<li>数据2-4</li>
<li>数据3-1</li>
<li>数据3-2</li>
<li>数据3-3</li>
<li>数据3-4</li>
<li>数据4-1</li>
<li>数据4-2</li>
<li>数据4-3</li>
<li>数据4-4</li>
</ul>
</body>

</html>

叫我小乖 · 发表于 2011-6-16 17:09

表格还有一个很重要的特点，就是合并单元格

fossil · 发表于 2011-6-16 17:09

谢谢分享经验。

走失的猫咪 · 发表于 2011-6-16 17:09

楼主在Firefox中试试。

broken · 发表于 2011-6-16 17:09

web标准不是不让你用table,而是让你只在该用table表现的时候使用table,table应该忠于他的本意，就是表现表格数据

走失的猫咪 · 发表于 2011-6-16 17:09

[推荐]适合大家入门的CSS+DIV好书

一本绝对适合大家上手的CSS+DIV设计好书《新手学CSS+DIV》

CSS技术是目前最流行的网页制作技术。本手册由浅入深，循序渐进介绍了如何使用CSS技术来制作网页。全手册内容包括认识CSS技术和XHTML语言、CSS基础语法、使用CSS属性控制页面元素的样式、DIV+CSS布局基础、盒模型、块级元素和行内元素、浮动和定位、页面排版方式、HACK技术和修正浏览器bug技术、WEB标准和网站重构。为了便于读者学习，本手册最后几章提供了完整的网站制作实例。具体讲解了个人网站首页、个人博客网站、服饰商城和大型门户网站的网页制作。

本手册适合广大Web网站开发人员、网页设计师、网页前端架构师、用户体验设计师、大中专院校的学生和社会培训学生使用，尤其是零基础入门的网页制作人员。

本手册配套光盘内容为实例源代码、语音视频教学及电子教案（PPT）。

Jethro · 发表于 2011-8-10 10:43

呵呵　　我傻了‘～～哈哈

爱车车 · 发表于 2011-8-16 10:01

希望可以用些时间了~````

帐号		自动登录	找回密码
密码			成为会员

CSS:用DIV+CSS实现表格形式的数据排列

相关帖子