inline-table盒模型

　　在默认情况下，<table.../>元素属于block盒模型，也就是说，该元素默认占据一行：它的左边不允许出现其他内容，它的右边也不允许出现其他内容；该元素也可以通过width、height设置宽度和高度。
　　CSS为<table.../>元素提供了一个inline-table盒模型，这个盒模型允许表格通过width、height设置宽度和高度，而且允许它的左边、右边出现其他内容。
　　为了控制表格与前、后内容垂直对齐，可以通过添加vertical-align属性来实现，设置该属性为top，这表明让该表格与前、后内容顶端对齐；设置该属性为bottom，这表明让该表格与前、后内容底端对齐。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> inline-table盒模型 </title>
    <style type="text/css">
        td {
            border: 1px solid black;
        }
        table{
            width: 360px;
            border-collapse: collapse;
            /* 设置表格显示为inline-table盒模型 */
            display: inline-table;
            /* 设置顶端对齐 */
            vertical-align: top;
        }
    </style>
</head>  
<body>  
前面内容
<table style="">  
    <tr><td>疯狂Java讲义</td><td>疯狂Ajax讲义</td></tr>
    <tr><td>疯狂XML讲义</td><td>疯狂Android讲义</td></tr>
</table>  
后面内容
</body>  
</html>

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