繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS网页布局使用表格可以吗？
- CSS样式表
- CSS教程:制作网页中常用的5个CSS属性
- 网页制作理论:精确还原设计稿
- CSS教程:Firefox浏览器下margin-top问题
- CSS教程:li标记在IE下产生间距
- CSS实例教程:CSS制作虚线的2种方法
- CSS教程:网页中英文字体的设置
- 根据IE版本不同调用不同CSS样式文件
- CSS网页布局:tbody标签与thead和tfoot标签
- 网页制作技巧:CSS网页布局中文排版心得
- 网页制作CSS教程:自适应圆角
- Css Hack：Pixel Perfect
- OOcss教程:认识OOCSS和简单应用OOCSS
- 网页制作教程:面向对象的CSS应用
- CSS写法:不同组合间的优先级及浏览器的支持性
- CSS sprite实例教程:li:hover修改密码
- 利用负边距技术制作自适应宽度布局的网页
- WEBJX收集漂亮的大背景网页设计实例
- 使用一张或两张图片创建大背景网站
- CSS教程:CSS选择符的用法和实例
- CSS实例:a:hover伪类在IE6下的问题
CSS样式表 中的 CSS网页布局使用表格可以吗？
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 70 ::
收藏到网摘: 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>
<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>
<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设置比较繁琐，而否定内容本身的语义。
评论 (0) All
