使用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. scanf 和cin 的区别

    笔试的时候经常遇到突然string s;cin>>s; 有的时候编译会错误,不知道为什么. 今天在练习枚举类型的时候,也遇到这样一个问题. enum weekday{Monday,Tues ...

  2. EC读书笔记系列之7：条款12 复制对象时勿忘其每一个成分

    记住: ★copying函数应确保复制“对象内的所有成员变量”及“所有base class成分” ★不要尝试以某个copying函数实现另一个copying函数.应该将共同机能放进第三个函数中,并由两 ...

  3. Tomcat 设置为服务使用脚本 service

    进入到Tomcat的bin目录下,如果使用的是Windows系统则使用service.bat进行操作;Linux系统则使用service.sh进行. service.bat install/remov ...

  4. onload ready

    确保在 <body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件. 可以在同一个页面中无限次地使用$(document).ready()事 ...

  5. javaScript的2种变量范围有什么不同

    1.javascript怎样选中一个checkbox,怎样设置它无效? document.all.cb1[0].disabled = true;   2.js中的3种弹出式消息提醒(警告窗口,确认窗口 ...

  6. Nginx+PostgreSQL+Django+UWSGI搭建

    最近因为项目上的需要开始大量使用nginx,因此也想趁机将以前常用的django+apache的架构换成django+nginx.常见的 django webapp 部署方式采用FCGI 或 WSGI ...

  7. 点语法、property、self注意

    1.点语法(找出不合理的地方)#import <Foundation/Foundation.h>@interface Person : NSObject{    int _age;}- ( ...

  8. swift 创建tableView并实现协议

    // // ViewController2.swift // swift_helloword // // Created by Charlie on 15/7/13. // Copyright (c) ...

  9. flash跨域策略文件crossdomain.xml

    flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访问www. ...

  10. CouldnotcreateServerSocketonaddress0.0.0.0/0.0.0.0:9083

    错误记录 安装的时候遇到了如下错误 Exception in thread "main" org.apache.thrift.transport.TTransportExcepti ...