使用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. 物理引擎简介——Cocos2d-x学习历程(十三)

    Box2D引擎简介 Box2D是与Cocos2d-x一起发布的一套开源物理引擎,也是Cocos2d-x游戏需要使用物理引擎时的首选.二者同样提供C++开发接口,所使用的坐标系也一致,因此Box2D与C ...

  2. Java学习之网络编程实例

    转自:http://www.cnblogs.com/springcsc/archive/2009/12/03/1616413.html 多谢分享 网络编程 网络编程对于很多的初学者来说,都是很向往的一 ...

  3. Activiti5 待审 待批任务 TaskQuery查询 条件查询 like查询

    TaskQuery查询API 有两种方法可以从引擎中查询数据:查询API和原生查询.查询API提供了完全类型安全的API. 你可以为自己的查询条件添加很多条件 (所以条件都以AND组合)和精确的排序条 ...

  4. Generative Learning algorithms

    "generative algorithm models how the data was generated in order to categorize a signal. It ask ...

  5. vb sqlite 使用 litex

    Private Declare Function LoadLibrary Lib "kernel32" Alias "LoadLibraryA" (ByVal ...

  6. 微软Windows 7 “可启动U盘”制作工具及使用方法，非常的简单

    目前,用“可启动U盘”替代光驱光盘安装操作系统,已经成为一种时尚(至少对没有刻录机或不愿购买光碟的群体是这样).制作“可启动U盘”的方法和工具很多,区别无非是制作的难易程度和对“U盘类型”的支持程度. ...

  7. [原]基于CAS实现单点登录（SSO）：登录成功后，cas client如何返回更多用户信息

    从cas server登录成功后,默认只能从casclient得到用户名.但程序中也可能遇到需要得到更多如姓名,手机号,email等更多用户信息的情况. cas client拿到用户名后再到数据库中查 ...

  8. DRP总结

    DRP终于结束了,战线有点长了.记得刚开始听说DRP的时候,感觉这个名词很专业,再加上视频一共有300集,顿时感觉这是一个大项目,很正规.很专业的项目.虽然后来知道DRP知识ERP的一个分支,项目规模 ...

  9. MFC的命令行

    一个程序,我们通过输入不同的命令行参数,就可以实现一个可执行文件,多种功能,通过命令行来控制它的行为,例如,我们在控制台的时候,就是遇到最多的,如一个exe程序,加入为test..exe,我们可以设置 ...

  10. GDI+ 填充背景时，非常多时候不起作用，GDI、GDI+配合运用

    在ONDRAW中运行GDI+ 填充背景时,不起作用,不知道什么原因 [cpp] view plaincopy Graphics graphics(pDC->GetSafeHdc()); Bitm ...