使用CSS表格

CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。
在深入了解这种方法之前，让我们先来写份HTML文档实例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  4.   <head>
  5.     ? HTML head content…
  6.   </head>
  7.   <body>
  8.     <div id="wrapper">
  9.       <div id="header"></div>
  10.       <div id="main">
  11.         <div id="nav">
  12.           ? navigation column content…
  13.         </div>
  14.         <div id="extras">
  15.           ? news headlines column content…
  16.         </div>
  17.         <div id="content">
  18.           ? main article content…
  19.         </div>
  20.       </div>
  21.     </div>
  22.   </body>
  23. </html>

这份HTML源代码满足了内容呈现方面的要求。先是导航栏，然后是附加栏，最后是内容栏。
我们同样需要将以下CSS样式应用上去：

  1. #main {
  2.   display: table;
  3.   border-collapse: collapse;
  4. }  
  5.  
  6. #nav {
  7.   display: table-cell;
  8.   width: 180px;
  9.   background-color: #e7dbcd;
  10. }  
  11.  
  12. #extras {
  13.   display: table-cell;
  14.   width: 180px;
  15.   padding-left: 10px;
  16.   border-right: 1px dotted #d7ad7b;
  17. }  
  18.  
  19. #content {
  20.   display: table-cell;
  21.   width: 380px;
  22.   padding-left: 10px;
  23. }

它是怎样实现的？

你可以给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：

  • table 
    使该元素按table样式渲染
  • table-row 
    使该元素按tr样式渲染
  • table-cell 
    使该元素按td样式渲染
  • table-row-group 
    使该元素按tbody样式渲染
  • table-header-group 
    使该元素按thead样式渲染
  • table-footer-group 
    使该元素按tfoot样式渲染
  • table-caption 
    使该元素按caption样式渲染
  • table-column 
    使该元素按col样式渲染
  • table-column-group 
    使该元素按colgroup样式渲染

等等……难道用table布局不是错的吗？

可能你会对我们上面给出的布局实例有点不爽——毕竟，正如我自己也是一名WEB标准化的拥护者，我们不都一直坚持不应该使用table来进行布局吗？
table元素在HTML当中是一个包含语义的标签：它描述什么是数据。因此，你只能用它来标记那些需要制表的数据，例如一张财务信息表。如果数据能够以电子表格的形式保存在你的电脑中，那它在HTML文档中很可能需要用到table标签进行标记。
从另一方面来看，display的table属性值只是声明了某些元素在浏览器中的样式——它不包含语义。如果使用table元素来进行布局，它将会告诉客户端：这些数据是制表的。使用一些display属性被设置为table和table-cell之类的div标签，除了告诉客户端以某种特定的样式来渲染它们以外，不会告诉客户端任何语义，只要客户端能够支持这些属性值。
当然，我们同样还要注意，当我们真的需要制表数据的时候不要使用一大堆被声明为display:table;的div元素。
我们上面的那个例子是一个简单的单行三列布局，无需费尽心思，我们就能够使用这种技术轻松实现复杂的栅格布局。

匿名表格元素

CSS表格除了包含table布局的普通规则之外，同时还有着CSS table布局的超强特性：缺少的表格元素会被浏览器以匿名方式创建。CSS2.1规范中写道：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

这段话的意思是，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。
让我们用个简单的例子来研究下它的这一特性：以下是三栏栅格布局。我们将会用三份不同的HTML样例，而它们将表现出相同的视觉效果。

首先，以下是能够生成三列布局样例的其中一份：

  1. <div class="container">
  2.   <div class="row">
  3.     <div class="cell">CELL A</div>
  4.     <div class="cell">CELL B</div>
  5.     <div class="cell">CELL C</div>
  6.   </div>
  7. </div>

这份嵌套的div元素看起来不是那么让人兴奋，稍等一会，我们现在来做点什么。它的CSS样式也非常简单：

  1. .container {
  2.   display: table;
  3. } 
  4.  
  5. .row {
  6.   display: table-row;
  7. } 
  8.  
  9. .cell {
  10.   display: table-cell;
  11.   width: 100px;
  12.   height: 100px;
  13.   border: 1px solid blue;
  14.   padding: 1em;
  15. }

以上CSS给类名为container的元素定义了“display:table;”属性，类名为row的元素定义了“display:table-row;”，类名为cell的元素定义了“display:table-cell;”，同样还给它定义了边框、高度和宽度值。
以上HTML文档明确地为三个单元格定义了包含它的表格和表格行，使用到了所有我们创建的CSS类名。然而，我们可以减少这些标签，移除一行div元素试试：

  1. <div class="row">
  2.   <div class="cell">CELL A</div>
  3.   <div class="cell">CELL B</div>
  4.   <div class="cell">CELL C</div>
  5. </div>

即使上面的代码遗漏了声明表格的那一行，浏览器仍将创建一个匿名的表格行。我们还可以移除更多的代码:

  1. <div class="cell">CELL A</div>
  2. <div class="cell">CELL B</div>
  3. <div class="cell">CELL C</div>

以上代码遗漏了声明表格和表格行的代码，浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素，最终的效果仍然是一样的。

转自：http://www.blueidea.com/tech/web/2008/6257_2.asp

css table 布局的更多相关文章

  1. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  2. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  3. css table布局

    表格布局有两种方式: 1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性). HTML Table是指使用原生的<ta ...

  4. css table 布局 与 JavaScript 指定区域打印功能

      <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="conte ...

  5. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  6. html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

    DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...

  7. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  8. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  9. 日历控件table布局

    作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...

随机推荐

  1. 关于mysql使用dbForge调试的问题:Object 'test.p_insertRoute' does not exist.

    mysql中使用dbForge6.1版本调试存储过程,如果存储过程中定义的变量时枚举类型,那么就会报出该存储过程没有报出的错误,这个应该是dbForge6.1版本的bug

  2. linux 程序运行监控

    一 . 使用supervise 是daemon-tools 的一个功能,系统的守护进程.在进程挂掉的时候可以自动重启. 二   安装 wget http://cr.yp.to/daemontools/ ...

  3. Hibernate之dynamic-update

    问题:设置了dynamic-update, 可是事实上并没有按照期望进行了update. 案例代码如下: 1.持久化对象 package com.jdw.hibernate.entities; imp ...

  4. nginx-configure执行大致流程

    1,configure 命令行参数处理 2,初始化各种文件路径 3,分析源码结构 4,生成编译过程中所需路径 5,准备 .h,.err等编译所需文件 6,写入命令行参数 7,检测环境(系统,编译器,第 ...

  5. FAQ:Python中*args和**agrs的区别

    python提供了两种特别的方法来定义函数的参数: 1. 位置参数 *args,  把参数收集到一个元组中,作为变量args   >>>def show_args(*args):   ...

  6. SD和SDHC和SDXC卡的区别是什么

    SD卡,SDHC卡,SDXC卡区别在规格不一样,SD卡最大支持2GB容量,SDHC 最大支持32GB容量,SDXC 最大支持2TB(2048GB)容量,支持SDXC卡的数码设备是兼容支持SD卡与SDH ...

  7. Nginx模块开发入门(转)

    前言 Nginx是当前最流行的HTTP Server之一,根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中,Nginx的占有率为6.8%.与Apache相比,Nginx在高并 ...

  8. git Feature分支

    Feature分支 软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在 ...

  9. centos6 qt ENV

    打算做嵌入式图像处理,计划方案嵌入式Linux+OpenCV+QT,昨天简单入门OpenCV今天看看QT,QT就先弄Linux下面的,回家之前争取把基本的摸通,然后能在板子上跑起来 关于QT安装 QT ...

  10. 解析配置文件ConfigParser模块

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...