1)DIV+CSS是用来替换表格排版的,表格还是用table。
2)可以尝试用ul li 做简单的表格
3)用DIV+CSS做表格的方法和做页面布局的方法一致,所以你要学习一下这方面,可以参考一下相关视频教程。如果做复杂的表格因为需要反复嵌套效果就不好了。
DIV+CSS布局和TABLE布局的优缺点
TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。
什么是div+css?
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML),是一种在HTML 基础上优化和改进的的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。
流行优势
1、符合W3C标准。
2、支持浏览器的向后兼容。
3、搜索引擎更加友好。
4、样式的调整更加方便。
5、CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽。
6、表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
一.div+css布局的好处:
1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的'可维护性。
2.布局精准,网站版面布局修改简单。
3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签,提高另外搜索引擎对网页的搜索效率。
二.table布局的好处(table布局也不是一点用的没有,这点是毋庸置疑的)
1.容易上手。
2.可以形成复杂的变化,简单快速。
3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
.table { border:#30C 1pxborder-style: solidheight:30pxmargin-top:-1px}
</style>
</head>
<body>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
<div class="table"></div>
</body>
</html>
就这样 多列的表格 需要调整布局 这个 调整调整就能实现