CSS之页面布局之五（表格布局）完结

表格布局也是非常常见的布局方式。就是指定CSS表格式样。

这与HTML的<table>元素不同，<table>元素多用于页面上显示表格数据。而表格布局是指通过CSS表格式样将页面显示部分表格化显示出来。

实现方式就是先将HTML端的元素用<div>仿造<table>元素的样子配置好，然后在CSS端为相关<div>指定式样。

第一步，先将HTML端的元素用<div>仿造<table>元素的样子配置：

第二步，在CSS端为相关<div>指定式样：

div#tableContainer {
    display: table;
}

div.tableRow {
    display: table-row;
}

.main {
    display: table-cell;
}

表格布局相对实现起来比较简单（可能这也是受欢迎的原因之一）。各大网站的局部随处可见表格布局：

上图就是用表格布局处理<form>表单的例子 ：）