表格相关的盒模型

　　除了上一节介绍的inline-table盒模型之外，CSS 3还为display提供了如下属性值。T table：将目标HTML组件显示为表格。
　　➢　table-caption：将目标HTML组件显示为表格标题。
　　➢　table-cell：将目标HTML组件显示为单元格。
　　➢　table-column：将目标HTML组件显示为表格列。
　　➢　table-column-group：将目标HTML组件显示为表格列组。
　　➢　table-header-group：将目标HTML组件显示为表格头部分。
　　➢　table-footer-group：将目标HTML组件显示为表格页脚部分。
　　➢　table-row：将目标HTML组件显示为表格行。
　　➢　table-row-group：将目标HTML组件显示为表格行组。
　　通过上面这些盒模型，可以使用元素构建表格，例如如下页面。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表格相关的盒模型 </title>
    <style type="text/css">
        div>div {
            display: table-row;
            padding: 10px;
        }
        div>div>div{
            display: table-cell;
            border: 1px solid black;
        }
    </style>
</head>  
<body>  
<div style="display:table;width:400px;">  
    <div style="display:table-caption;">疯狂Java体系图书</div>
    <div>
        <div>疯狂Java讲义</div>
        <div>疯狂Android讲义</div>
    </div>
    <div>
        <div>疯狂Ajax讲义</div>
        <div>疯狂XML讲义</div>
    </div>
<div>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。