<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是WEB标准（网站标准）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 用div盒...
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用...
主要包含HTML5+CSS3基础知识，各种...css弹性盒模型：flex属性，横轴排列，纵轴排列，flex占比； 行内元素水平居中设置； 定宽块状元素水平居中设置； 已知宽高实现盒子水平垂直居中； 不知宽高实现盒子水平垂直居中。
div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章（源代码\第15章） 示例描述：本章演示CSS基础部分知识。 CSS基础.html 演示CSS基础链接知识用法。 style1.css ...
这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码...
《CSS设计彻底研究》在透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。《CSS设计彻底研究》适合需要使用CSS的Web设计人员和开发...
1.2.1 CSS标准简介 1.2.2 在HTML中引入CSS的方法 1.3 基本CSS选择器 1.3.1 标记选择器 1.3.2 类别选择器 1.3.3 ID选择器 1.4 复合选择器 1.4.1 “交集”选择器 1.4.2 ...
…… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 圆角设计 第12章 应用Spry制作高级网页组件 第13章 固定宽度布局剖析与制作 第14...
是网页教学网给大家提供的系列教程，主要是为初学者讲解网页中表格的应用，包括最基础的知识，表格的一些技巧等，希望大家支持网页教学网。表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是使用表格...
16.2.1 在“布局”模式下使用表格进行网页布局 16.2.2 在“布局”模式下修改网页布局 16.2.3 设置“布局”模式的首选参数 16.2.4 将内容添加到布局单元格中 16.3 使用嵌套表格进行网页布局实务 16.3.1 通过嵌套表格...
但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素 <div> 或 表格（）来布局 Web 页面的内容。 使用表格进行布局，是...
2、target : 目标，指定新网页的打开形式 取值： 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接，内容为 ：学子商城，点击时，在自身标签页中 打开 ...
div标签用于在html文档中指定一个section，div可以被认为是一个在css的帮助下将html中的数据右、左、上、下对齐的盒子。 文本、图像和视频放置在 div 内。 更快的页面加载时间：当网站使用 div 设计时，网站加载...
4、 网站模板与程序分离，支持多种标签调用，支持DIV+CSS，通过模板设计便可实现个性化网站 科汛cms实现了“网站模板与程序完全分离”的新概念，独创ajax输出和JS标签跨站调用，支持不同频道、栏目、专题、内容页...
独特的类名称帮助我按CSS中的位置排列它们。 例如，在元素57和89中，当镧系元素和in系元素拆分表时，我使它们分开并向下推标记。 请参阅主要CSS文件，了解我的操作方式。 在按原样排列元素之后，然后在React上进行...