Web 编程为什么越来越少用到 <table>
标签呢,这篇文章列出一些观点供大家参考:

【修真院web小课堂】display:table有那些应用?

大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员

  1. Table要比其它html标记占更多的字节。
    (延迟下载时间,占用服务器更多的流量资源。)

  2. Tablle会阻挡浏览器渲染引擎的渲染顺序。
    (会延迟页面的生成速度,让用户等待更久的时间。)

  3. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
    (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)

  4. 在某些浏览器中Table里的文字的拷贝会出现问题。
    (这会让用户不悦。)

  5. Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
    (这会限制你页面设计的自由性。)

  6. 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。
    (先花时间学一些CSS知识,会省去你以后大量的时间。)

  7. table对对于页面布局来说,从语义上看是不正确的。
    (它描述的是表现,而不是内容。)

  8. table代码会让阅读者抓狂。
    (不但无法利用CSS,而且会你不知所云)

  9. table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
    (你看过CSS Zen Garden吗?)

大家好,我是IT修真院西安分院第1期的学员,一枚正直纯洁善良的WEB程序员
今天给大家分享一下,display:table有那些应用?

今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见的布局方式?

Tables的好处

在某些场合,使用Table是100%的适合、恰当和正确。比如,用table做表格是完全正确的。

如果你无法判断是否应该使用table,参考一下上面的几条,相信你能找到答案。

原文出处:
phrogz   译文出处:
webhek

一、背景介绍

1.背景介绍

当IE8发布时,它将支持很多新的CSS
display属性值,包括与表格相关的属性值:table、table-row和table-cell,(ie6.7不支持).它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

当IE8发布时,它将支持很多新的CSS
display属性值,包括与表格相关的属性值:table、table-row和table-cell,(ie6.7不支持)
。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

2.知识剖析

2.知识剖析

给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值:

给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值:

使该元素按table样式渲染

table

table-row

使该元素按table样式渲染

使该元素按tr样式渲染

table-row

table-cell

使该元素按tr样式渲染

使该元素按td样式渲染

table-cell

table-row-group

使该元素按td样式渲染

使该元素按tbody样式渲染

table-row-group

table-header-group

使该元素按tbody样式渲染

使该元素按thead样式渲染

table-header-group

table-footer-group

使该元素按thead样式渲染

使该元素按tfoot样式渲染

table-footer-group

table-caption

使该元素按tfoot样式渲染

使该元素按caption样式渲染

table-caption

table-column

使该元素按caption样式渲染

使该元素按col样式渲染

table-column

table-column-group

使该元素按col样式渲染

使该元素按colgroup样式渲染

table-column-group

table-cell特性

使该元素按colgroup样式渲染

  对宽度高度敏感    响应padding属性  内容溢出时会自动撑开父元素

table-cell特性

3.常见问题

对宽度高度敏感

1.大小不固定元素的垂直居中

响应padding属性

2.两列自适应布局

内容溢出时会自动撑开父元素

3.等高布局

3.常见问题

4.和inline-block组合使用

1.大小不固定元素的垂直居中

5.列表布局

2.两列自适应布局

4.解决方案

3.等高布局

1.大小不固定元素的垂直居中   

4.和inline-block组合使用

display:table-cell 加上 vertical-align:middle 使高度不同的

5.列表布局

元素都垂直居中,其中div的display:inline-block使几个div在同一行显示。   

4.解决方案

2.两列自适应布局   

1.大小不固定元素的垂直居中

display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将

display:table-cell 加上 vertical-align:middle 使高度不同的
元素都垂直居中,其中div的display:inline-block使几个div在同一行显示。

基于单元格内容自动调整。当内容足够多将宽度完全撑开时,再让某个元素(例如关闭按钮)右侧

2.两列自适应布局

定位就会有问题。所以设置width:3000px的用途是尽可能的宽的意思。   

display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将
基于单元格内容自动调整。当内容足够多将宽度完全撑开时,再让某个元素(例如关闭按钮)右侧
定位就会有问题。所以设置width:3000px的用途是尽可能的宽的意思。

3.等高布局   

3.等高布局

4.和inline-block组合使用

4.和inline-block组合使用

A和B的父元素均设置了display:table-cell属性,所以

A和B的父元素均设置了display:table-cell属性,所以
它们均匀占据设置了display:table的div元素。而A和B元素设置display:inline-block是为了让它们相应text-align的属性设置。

它们均匀占据设置了display:table的div元素。而A和B元素设置display:inline-block是为了让它们相应text-align的属性设置。
  

5.列表布局

5.列表布局   

这类布局常用浮动布局(给每个li加上float:left属性)实现,但这样做有明显不足:

这类布局常用浮动布局(给每个li加上float:left属性)实现,但这样做有明显不足:
  

需要清除浮动

需要清除浮动   

不支持不定高列表的浮动

不支持不定高列表的浮动

display:table-cell可以代替浮动布局,但是其不是最好的方法。其他方法有待进一步学习!

display:table-cell可以代替浮动布局,但是其不是最好的方法。其他方法有待进一步学习!

5.编码实战

5.编码实战

6.扩展思考

table布局有什么缺点,为什么渐渐被淘汰?

澳门新葡萄京官网注册 1

Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。)

澳门新葡萄京官网注册 2

Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)

大小不固定元素的垂直居中 

在某些浏览器中Table里的文字的拷贝会出现问题

澳门新葡萄京官网注册 3

Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)

澳门新葡萄京官网注册 4

Table对对于页面布局来说,从语义上看是不正确的。

等高布局

table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

澳门新葡萄京官网注册 5

7.参考文献

澳门新葡萄京官网注册 6

布局神器(一)display:table-cell

两列自适应布局   

我所知道的几种display:table-cell的应用

6.扩展思考

8.更多讨论

table布局有什么缺点,为什么渐渐被淘汰?

PPT

   

视频:密码:
nwn3

Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。)
 
Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。
  

技能树.IT修真院

在某些浏览器中Table里的文字的拷贝会出现问题   

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

Table会影响其内部的某些布局属性的生效(比如

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !

里的元素的height:100%)   

猛戳这里

Table对对于页面布局来说,从语义上看是不正确的。   

table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

灵活运用display:table属性可以实现很多布局。