<script type="text/javascript"></script>
用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>
原文来自：http://www.iteye.com/topic/568347
分享到：
相关推荐
### 使用div+CSS实现类似Excel的表格功能 在网页设计中，使用`div+CSS`来构建表格是一种灵活且响应式的设计方式。这种方式不仅能够帮助我们创建出与传统`<table>`标签相似的布局效果，还能更好地控制表格的样式、...
这个文件名可能包含了一个使用`<div>`元素和JavaScript实现的选项卡示例，其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互行为，例如在点击选项卡时动态切换...
传统的表格布局方式难以适应复杂多变的网页设计需求，而使用DIV+CSS，我们可以自由地创建流式布局、网格布局、定位布局等多种布局模式，适应不同设备的屏幕尺寸，实现响应式设计。例如，通过设置浮动（float）、定位...
设计上注重实用性与易用性，通过Div+CSS实现的布局使各种数据和功能模块排列有序，易于理解和操作。可能包含自定义图表、多级菜单、数据表格等元素，方便企业进行高效的数据管理和决策。 5. **操作简单的蓝色设计...
在网页设计领域，`DIV+CSS`是一种广泛采用的技术，用于构建网页布局和样式。`DIV`元素在HTML中作为容器，用来组织内容，而CSS（层叠样式表）则负责定义这些容器及其内容的外观、布局和结构。在这个"简单的网页制作...
通过设置`display`属性（如`block`、`inline-block`、`flex`或`grid`），可以调整`div`元素的排列方式，实现复杂的布局设计。 4. **CSS选择器**：选择器是CSS中的核心概念，如元素选择器（`div`）、类选择器（`....
假设我们需要创建一个包含页头、导航栏、主要内容和页脚的标准网页布局。首先，我们定义基本的HTML结构： ```html <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="footer">...
使用DIV+CSS布局，可以实现内容与样式的完全分离，使代码更规范、更简洁，有利于SEO优化。页面下载速度更快，样式定义更灵活，改版时只需修改CSS文件即可，无需改动HTML结构，从而提高了工作效率和网站的可维护性。 ...
在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升设计师对网页布局的掌控能力。 一、Div与CSS基础...
【标题】"DIV+CSS网页设计效果1"涵盖了网页设计中的关键技术和应用，主要涉及到JSP、CSS和DIV这三个核心元素。在这个主题中，我们将会深入探讨如何利用这些技术来创建高效、美观且功能丰富的网页。 【JSP】全称为...
《CSS+Div网页模板整站解析》 在网页设计领域，CSS（层叠样式表）与Div元素的结合是构建现代网页布局的核心技术。本资料集合包含了一个完整的网站模板，由十个不同页面组成，旨在为网页设计师提供实用的参考和学习...
在网页设计领域，Div+CSS是一种常见的布局技术，它通过分离样式和内容，使得网页设计更加灵活、可维护性更强。"160个div+css模板" 是一个丰富的资源库，提供了大量的预设样式和布局模式，适用于初学者和经验丰富的...
【div+css网页设计教程】是一门专注于网页布局和美化技术的课程，旨在帮助学习者掌握使用HTML（超文本标记语言）和CSS（层叠样式表）进行网页设计的方法。CSS作为一种“老技术”的崭新应用，带来了很多益处，包括...
9. **浏览器兼容性**：虽然Div+CSS是现代网页设计的标准，但考虑到不同的浏览器对CSS支持程度不一，开发者需确保其设计在主要浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常显示。 综上所述，"网站div+...
在网页设计中，掌握DIV+CSS布局对于创建响应式、高效且易于维护的页面至关重要。以下是对这个主题的详细讲解： 一、什么是DIV <div>是HTML中的一个通用容器元素，全称为“division”，意为划分或区域。它没有特定的...
《CSS+DIV网页样式与布局从入门到精通》是一门针对初学者的高职高专职业技能课程，旨在教授...课程结束后，学生应能独立设计符合Web标准的网页，具备良好的CSS+DIV布局能力，为未来的网页开发职业道路打下坚实基础。
**DIV+CSS布局**是网页设计中的核心技术，用于构建网页结构和样式。它结合了HTML的结构元素（DIV）和CSS（层叠样式表）来实现网页的布局控制，使得网页设计更加灵活、可维护性更强。在现代网页开发中，这种布局方式...
`DIV+CSS`布局相比传统的表格布局有着诸多优势，例如代码简洁、可维护性高、易于实现响应式设计等。 首先，我们来了解`<div>`标签。`<div>`是“division”的缩写，意为“区域”或“分组”，它是一个无语义的容器...