使用CSS表格

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

  <head>

    ? HTML head content…

  </head>

  <body>

    <div id="wrapper">

      <div id="header"></div>

      <div id="main">

        <div id="nav">

          ? navigation column content…

        </div>

        <div id="extras">

          ? news headlines column content…

        </div>

        <div id="content">

          ? main article content…

        </div>

      </div>

    </div>

  </body>

</html>

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

#main {

  display: table;

  border-collapse: collapse;

}  

#nav {

  display: table-cell;

  width: 180px;

  background-color: #e7dbcd;

}  

#extras {

  display: table-cell;

  width: 180px;

  padding-left: 10px;

  border-right: 1px dotted #d7ad7b;

}  

#content {

  display: table-cell;

  width: 380px;

  padding-left: 10px;

}

它是怎样实现的？

你可以给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样例，而它们将表现出相同的视觉效果。

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

<div class="container">

  <div class="row">

    <div class="cell">CELL A</div>

    <div class="cell">CELL B</div>

    <div class="cell">CELL C</div>

  </div>

</div>

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

.container {

  display: table;

} 

.row {

  display: table-row;

} 

.cell {

  display: table-cell;

  width: 100px;

  height: 100px;

  border: 1px solid blue;

  padding: 1em;

}

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

<div class="row">

  <div class="cell">CELL A</div>

  <div class="cell">CELL B</div>

  <div class="cell">CELL C</div>

</div>

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

<div class="cell">CELL A</div>

<div class="cell">CELL B</div>

<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. 在不同编程语言中对Unix时间戳进行转换(Unix timestamp)

    最近用到unix时间转换在mysql和.net中的应用.将此资料保存在博客中. 如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)? Java time JavaScript ...

  2. OC语法6——内存管理之引用计数器（retain,release）

    OC内存管理: 一.引用计数器: Java有垃圾回收机制(Garbage Collection,GC).也就是说当我们创建对象后,不需要考虑回收内存的事,Java的垃圾回收机制会自动销毁该对象,回收它 ...

  3. PhotoShop-CS4使用-----如何对psd进行简单切图

    一.如何快速截图 1.如果图片为psd样式   2.要用放大器放大该图,选择放大器,放大后如图 3.开始切图  以其中一个为例,选中你所要选择切的图片 4. 选中后 5.选择文件---新建   6.此 ...

  4. 手把手教程 Surface如何进行系统恢复？

    手把手教程 Surface如何进行系统恢复? 2015-01-29 05:53:00  [  中关村在线 原创  ]   作者: 周博林 |  责编:周博林 收藏文章 分享到 评论(10) Windo ...

  5. 介绍几种IC卡

    介绍几种IC卡 Mifare卡:工作频率:13.56MHZ数据保存期:10年 操作时间:96ms读写距离:2.5-10cm   存储容量:8Kbit尺寸:85.6x54x0.76mm 存储器类型:EE ...

  6. (9)Xamarin测试账号申请与续用

    原文 Xamarin测试账号申请与续用 在Xamarin网站上可以申请30天试用的测试账号.试用期内,Xamarin会提供完整的功能试用. 30天试用时间到期后,在Visual Studio里面你加载 ...

  7. NOI2011 Day2

    NOI2011 Day2 道路修建 题目描述:给出一棵树,求每条边的两边的端点数的差乘边权之和. solution: 题目可能描述得不太清楚,如图: 对于虚边,如果边权为10,两边的端点数之差为2,这 ...

  8. Effective Objective-C 读书笔记

    一本不错的书,给出了52条建议来优化程序的性能,对初学者有不错的指导作用,但是对高级阶段的程序员可能帮助不是很大.这里贴出部分笔记: 第2条: 使用#improt导入头文件会把头文件的内容全部暴露到目 ...

  9. Zookeeper 编程

    ZooKeeper编程(一) 杂记 ZooKeeper的用途:distributed coordination;maintaining configuration information, namin ...

  10. 如何获取启动文件路径 GetModuleFileName

    如何获取启动文件路径 GetModuleFileName CString GetExeDirPath() { }; CString strExeDirPath; GetModuleFileName(N ...