使用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. leetcode Single Number python

    #question : Given an array of integers, every element appears twice except for one. Find that single ...

  2. Android 树形菜单

    首先来一张萌萌哒的效果图(比较懒 - -) 然后是代码: // Node package com.example.treeview.utils; import java.util.ArrayList; ...

  3. JS知识点摘记(一)

    JavaScript:基于对象和事件的脚本语言 特点: 安全性:不允许直接访问本地硬盘,可做的就是信息的动态交互 跨平台性:只要可以解析JS的浏览器就可执行,与平台无关 JavaScript与Java ...

  4. JAVA工具_PinyinConv

    package cn.chh.utils; /** * 获得每个字符的首字母 * @author CHH * @since 2013-01-21 * @bugs 不支持多音字处理 */ public ...

  5. WPF中的触发器简单总结

    原文 http://blog.sina.com.cn/s/blog_5f2ed5cb0100p3ab.html 触发器,从某种意义上来说它也是一种Style,因为它包含有一个Setter集合,并根据一 ...

  6. uva 10129 poj 1386 hdu 1116 zoj 2016 play on words

    //本来是想练一下欧拉回路的,结果紫书上那题是大水题!!!!! 题意:给出n个单词,是否可以把单词排列成每个单词的第一个字母和上一个单词的最后一个字母相同 解:欧拉通路存在=底图联通+初度!=入度的点 ...

  7. [LeetCode][Python]Add Two Numbers

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/add-two ...

  8. chrome 下的 proxy 插件安装

    Install “Proxy SwitchyOmega” extensions for chrome.

  9. linux系统配置Apache虚拟主机实例

    安装apache,php: yum install httpd php 假设VPS的IP是58.130.17.168,有两个域名指向该IP,分别是domain1.com, domain2.com, 修 ...

  10. Samba在CentOS下的图形化界面的安装

    第一步:构建yum仓库(在此用的是北交大的yum仓库) 打开目录/etc/yum.repos.d下的CentOS-Base.repo文件,此处是我自己建的yum仓库,修改里面的链接地址为北交大的镜像的 ...