星空网 > 软件开发 > 网页设计

display:table的几个妙用:垂直居中、浮动……

一、为什么不用table系表格元素?

目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢?

1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示

3、非表格内容用table来装,不符合标签语义化要求,不利于SEO

4、table的嵌套性太多,用DIV代码会比较简洁

……

 

 二、但我想要一个表格的布局方式怎么办?

好处很多,但是有的项目中又需要类似表格的布局怎么办呢?可以用display:table来解决

display:table系列几乎是和table系的元素相对应的,请看下表:

table(类似 <table>)此元素会作为块级表格来显示,表格前后带有换行符。
inline-table(类似 <table>)此元素会作为内联表格来显示,表格前后没有换行符。
table-row-group(类似 <tbody>)此元素会作为一个或多个行的分组来显示。
table-header-group(类似 <thead>)此元素会作为一个或多个行的分组来显示。
table-footer-group(类似 <tfoot>)此元素会作为一个或多个行的分组来显示。
table-row(类似 <tr>)此元素会作为一个表格行显示。
table-column-group(类似 <colgroup>)此元素会作为一个或多个列的分组来显示。
table-column(类似 <col>)此元素会作为一个单元格列显示。
table-cell(类似 <td> 和 <th>)此元素会作为一个表格单元格显示。
table-caption(类似 <caption>)此元素会作为一个表格标题显示。

目前display:table的应用场景也是比较广泛的,Google地图在搜索路线时,左侧的路线详情就是用的display:table来实现的。

 

三、如何使用display:table?

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>模拟表格</title></head><body><style type="text/css" rel="stylesheet">  .table {    display: table;    border: 1px solid #cccccc;    margin: 5px;    /*display: table时padding会失效*/  }  .row {    display: table-row;    border: 1px solid #cccccc;    /*display: table-row时margin、padding同时失效*/  }  .cell {    display: table-cell;    border: 1px solid #cccccc;    padding: 5px;    /*display: table-cell时margin会失效*/  }</style><div class="table">  <div class="row">    <div class="cell">张三</div>    <div class="cell">李四</div>    <div class="cell">王五</div>  </div>  <div class="row">    <div class="cell">张三</div>    <div class="cell">李四</div>    <div class="cell">王五</div>  </div></div></body></html>

由此,我们可以用display:table系列在做一些常用的布局设计

1、让块级标签实现行内效果,即浮动至同一横轴

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>display:table实现浮动效果</title></head><body><style type="text/css" rel="stylesheet">  .table {    display: table;    margin: 5px;    width: 1000px;  }  .row {    display: table-row;  }  .cell {    display: table-cell;    padding: 10px;  }</style><div class="table">  <div class="row">    <div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>    <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>    <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>  </div></div></body></html>

2、实现垂直居中

 

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>display:table实现垂直居中</title></head><body><style type="text/css" rel="stylesheet">  .table {    display: table;    margin: 5px;    width: 500px;    height: 300px;    background-color: #ccc;  }  .cell {    display: table-cell;    padding: 10px;    vertical-align: middle;/*该属性是定义行内元素垂直对齐的,只有行内元素会生效。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。*/
  }</style><div class="table">    <div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div></body></html>

 

今天先这么多,以后发现有新的妙用继续补充




原标题:display:table的几个妙用:垂直居中、浮动……

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

私域活动运营实战笔记:https://www.kjdsnews.com/a/1548706.html
shopee,lazada,etsy店群如何高效安全的管理:https://www.kjdsnews.com/a/1548707.html
跨境兴运灵活应对的跨境物流解决方案:https://www.kjdsnews.com/a/1548708.html
美国汽配供不应求,把握今夏销售时机:https://www.kjdsnews.com/a/1548709.html
​拼多多本地生活分析!:https://www.kjdsnews.com/a/1548710.html
20.1万亿!细看上半年外贸成绩,这些趋势独立站卖家必须关注:https://www.kjdsnews.com/a/1548711.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流