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 (类似 <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;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。

猜你喜欢

转载自www.cnblogs.com/xiaoan0705/p/8921559.html