CSS之页⾯布局之五(表格布局)完结
表格布局也是⾮常常见的布局⽅式。就是指定CSS表格式样。
这与HTML的<table>元素不同,<table>元素多⽤于页⾯上显⽰表格数据。⽽表格布局是指通过CSS表格式样将页⾯显⽰部分表格化显⽰出来。
实现⽅式就是先将HTML端的元素⽤<div>仿造<table>元素的样⼦配置好,然后在CSS端为相关<div>指定式样。
第⼀步,先将HTML端的元素⽤<div>仿造<table>元素的样⼦配置:
第⼆步,在CSS端为相关<div>指定式样:
div#tableContainer {
display: table;
}
div.tableRow {
html表格元素
display: table-row;
}
.main {
display: table-cell;
}
表格布局相对实现起来⽐较简单(可能这也是受欢迎的原因之⼀)。各⼤⽹站的局部随处可见表格布局:
上图就是⽤表格布局处理<form>表单的例⼦ :)