用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>
分享到：
相关推荐
在“DIV+CSS网页标准实现表格形式的数据排列”这个主题中，我们将深入探讨如何利用这种技术来创建具有表格特性的数据展示方式，而无需使用传统的HTML `<table>` 标签。 首先，理解基础的HTML结构至关重要。`<div>` ...
### 使用div+CSS实现类似Excel的表格功能 在网页设计中，使用`div+CSS`来构建表格是一种灵活且响应式的设计方式。这种方式不仅能够帮助我们创建出与传统`<table>`标签相似的布局效果，还能更好地控制表格的样式、...
例如，外部大盒子设定居中，内部则采取左中右布局，下方则是横向浮动排列的方式，这些都充分体现了DIV+CSS布局的优势。 ### 2. **CSS样式设计** - **核心概念**：CSS（Cascading Style Sheets）层叠样式表是一种...
这个文件名可能包含了一个使用`<div>`元素和JavaScript实现的选项卡示例，其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互行为，例如在点击选项卡时动态切换...
通过设置`display`属性（如`block`、`inline-block`、`flex`或`grid`），可以调整`div`元素的排列方式，实现复杂的布局设计。 4. **CSS选择器**：选择器是CSS中的核心概念，如元素选择器（`div`）、类选择器（`....
设计上注重实用性与易用性，通过Div+CSS实现的布局使各种数据和功能模块排列有序，易于理解和操作。可能包含自定义图表、多级菜单、数据表格等元素，方便企业进行高效的数据管理和决策。 5. **操作简单的蓝色设计...
可以创建一个`div`，并通过CSS将其设置为与主体内容并列或垂直排列。 4. **页脚（Footer）**：包含版权信息、联系表格、社交媒体链接等。同样，使用一个`div`来包裹这部分内容，并设置适当的样式。 在CSS方面，...
《CSS+DIV网页样式与布局从入门到精通》是一门针对初学者的高职高专职业技能课程，旨在教授学生如何利用CSS（层叠样式表）和DIV进行网页设计和布局。课程按照“操作-理论-操作”的原则，通过设计案例帮助学生建立...
在本资料中，每个页面可能都由多个Div元素构成，这些元素通过嵌套和并列，形成页面的层次结构，从而实现动态和静态内容的排列。 在文件名称列表中，我们看到诸如“item_1739980815”等命名的文件，这些可能是每个...
CSS（Cascading Style Sheets）则负责控制这些Div元素的样式，如颜色、字体、大小、位置等，实现视觉效果。 1. **Div元素**：Div是HTML中的一个块级元素，它可以包含其他HTML元素，如文本、图片、表格等。通过设置...
在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升设计师对网页布局的掌控能力。 一、Div与CSS基础...
### CSS盒子模型与Div+CSS页面布局 #### CSS盒子模型概览 在深入探讨Div+CSS页面布局前，我们首先需要了解CSS盒子模型的基本概念。CSS盒子模型是Web设计中的核心概念之一，它用于描述HTML元素如何根据CSS属性在...
在网页设计中，掌握DIV+CSS布局对于创建响应式、高效且易于维护的页面至关重要。以下是对这个主题的详细讲解： 一、什么是DIV <div>是HTML中的一个通用容器元素，全称为“division”，意为划分或区域。它没有特定的...
- **网页重构**：将旧的表格布局转换为div+CSS布局，提高页面加载速度和SEO优化。 - **动画效果**：利用CSS3动画和过渡效果增强用户体验，如滑动、淡入淡出等。 6. **调试与优化** - **浏览器兼容性**：理解各...
1. **数据展示**：对于表格数据，table 元素提供了天然的结构，使数据排列整齐，易于阅读。 2. **快速原型**：在快速构建页面原型时，table 的布局方式可以快速实现基本的页面结构。 然而，table 的缺点也很明显： ...
- **100%自适应高度**：实现div的高度能够随着内容自动调整。 ##### 6. **自适应高度** - **实现自适应高度的方法**：利用CSS的百分比单位、min-height属性或其他布局技巧来实现。 ##### 7. **不用表格的菜单** ...
在这些模板中，你可以学习到如何使用Div（division）元素作为容器来组织页面结构，并通过CSS（Cascading Style Sheets）来定义这些元素的样式，包括颜色、字体、尺寸、位置、背景和边框等。CSS的灵活性在于它可以...
**DIV+CSS（样式表手册）** 在网页设计领域，`DIV+CSS`是一种非常重要的技术，它使得网站布局和样式控制变得更加灵活和高效。`DIV`是HTML中的一个通用容器元素，全称为“Division”，意为“划分”，主要用于组织和...