当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS网页布局使用表格可以吗?

CSS样式表
CSS定位中Positoin、absolute、Relative的一些研究
脚本控制三行三列自适应高度DIV布局的代码
word-wrap在firefox中不起作用的解决方法
网页设计者需要了解的_网页字体大小数据参考
div+css与xhtml+css分别是什么意思?
xhtml+css网页制作中常见问题解决方法
表格标签table深入了解
DIV+CSS网页另类上下布局的实例代码
CSS实现每行新闻数量不等效果代码
JAVASCRIPT IE 与 FF 中兼容写法记录
让超出DIV宽度范围的文字自动显示省略号...
CSS使用学习总结
解决IE6 3像素Bug的css写法
用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大
firefox margin-top失效的原因与解决办法
IE hack条件写法
css pointer控制在firefox下显示手型的代码
纯CSS实现上下左右都居中的代码
在DW中CSS编码需要注意和掌握的一些技巧
DIV CSS网页布局 最小高度(min-height)的妙用

CSS样式表 中的 CSS网页布局使用表格可以吗?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-09   浏览: 116 ::
收藏到网摘: n/a

 CSS网页布局的宗旨是语义化具有良好结构的HTML文档,将外观表现分离到CSS文件中,这是ruanchen.com一直强调的页面开发思维。有朋友在RuanChen论坛中提出问题,引发了思考。在html页面,初学DivCSS网页布局的时候,排斥table,用很多的div来嵌套:(看起来很差劲)

<div>
<div>DivCSS网页布局中使用表格的一些讨论</div><div>www.ruanchen.com</div>
<div>DivCSS网页布局中使用表格的一些讨论</div><div>www.ruanchen.com</div>
</div>

  如图所示:

l图1。
图2。

  知道html要具有语义之后,进化成这样的写法:

<ul>
<li><span>DivCSS网页布局中使用表格的一些讨论</span>www.ruanchen.com<li>
<li><span>DivCSS网页布局中使用表格的一些讨论</span>www.ruanchen.com<li>
</ul>

  因为要固定标题的宽度,又涉及到<span>标签的inline-block。
  而且,当涉及到标题一行,内容需要换行的时候很麻烦,如图效果:

图3。

  我想,既然要避免使用table标签会造成如此多麻烦,可不可以干脆使用table呢,简单直接,而且从html的语义上考虑,这样的内容似乎用table也有道理。但是语义并不明确。也不可取。

  我们来讨论可以使用的方法:

图1。
图3。

  图1和图3,可以用无序列表ul或定义列表dl标识。配合使用li dt dd strong em span标签。

图2。

  图2是一个表单,可以用form label input等标签加以标识。

  小结:

  这三个图片所示的页面元素,均不是表格类的数据,用表格标签不妥当。

  使用表格作为网页排版、布局页面元素是不合理的。
  表格是用来显示数据的。
  至于什么样的数据形式以表格来标识,没有统一的规范。
  或许大家对它有着不同的理解,除了数据表,别的元素在什么情况下用表格表示呢。
  其实根据情况,可以选择多种标签。可能是无序列表,可能是定义列表。
  至于CSS样式的实现,那就是属性定义的问题。
  不要因为CSS设置比较繁琐,而否定内容本身的语义。