display:table与本身的table的区别 | 您所在的位置:网站首页 › 餐桌table和board的区别 › display:table与本身的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 (类似 )此元素会作为块级表格来显示,表格前后带有换行符。 inline-table (类似 )此元素会作为内联表格来显示,表格前后没有换行符。 table-row-group (类似 )此元素会作为一个或多个行的分组来显示。 table-header-group (类似 )此元素会作为一个或多个行的分组来显示。 table-footer-group (类似 )此元素会作为一个或多个行的分组来显示。 table-row (类似 )此元素会作为一个表格行显示。 table-column-group (类似)此元素会作为一个或多个列的分组来显示。 table-column (类似 )此元素会作为一个单元格列显示。 table-cell (类似 和 )此元素会作为一个表格单元格显示。 table-caption (类似 )此元素会作为一个表格标题显示。 “display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。 DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况。 display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比如以下两种情况: 一、父元素宽度固定,想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度,如果设置百分数不一定能整除,设置具体的数值又限制了父元素的宽度固定,很烦。 可以使用display:table来解决: .parent{display: table; width: 1000px;} .son{display: table-cell;} 如此一来,就算是三个或者六个元素也可以很方便均分父元素的宽度了。 二、块级子元素垂直居中 想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题(注意直接对块级元素使用vertical-align是不能解决这个问题的,vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐),同样可以使用display:table方便解决: .parent {display: table;} .son {display: table-cell; vertical-align: middle;} 将块级子元素的display设置为table-cell之后再使用vertical-align就可以了。 注意:虽然display:table解决了避免使用表格的问题,但有几个需要注意的: (1)display: table时padding会失效 (2)display: table-row时margin、padding同时失效 (3)display: table-cell时margin会失效 |
CopyRight 2018-2019 实验室设备网 版权所有 |