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

最新推荐文章于 2024-09-28 15:21:40 发布

hongse_zxl

最新推荐文章于 2024-09-28 15:21:40 发布

阅读量2.4k

点赞数

分类专栏： CSS 文章标签： css 布局

本文链接：https://blog.csdn.net/hongse_zxl/article/details/41250455

版权

8 篇文章 0 订阅

订阅专栏

表格布局也是非常常见的布局方式。就是指定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>表单的例子：）