• 扒拉扒拉table


    现如今,table被我们中的绝大多数所厌弃,都啥年代了...年代归年代啦,table在特定的时候还是有用的,毕竟W3C标准没有废之。

    说到table的不好,大家肯定一口气说出好几个,但是我们先来说说哪些情况用table甚至是必须

    1、展示多数据列表

    如今table的本义应当用作数据列表的地方,对于一些数据处理用table显得更加有序和语义。

    2、EDM制作

    EDM,table差不多就是必须的(你别告诉楼主你的EDM直接是一张图片)如果想做响应式的EDM可以找我要代码。

    说完了table的可用之处就到了它的缺点了,当小伙伴们迭代一个老项目发现全是table布局的时候,想死的心都有了

    缺点:
    1、页面的渲染性能问题:浏览器需要将整个表格完全读完后才会开始渲染,再发散一下,因为表格最后一个单元格的内容过宽而导致纵列大小完全改变,这些小的变化将导致表格(table)中的所有其他节点回流(reflow)。
    2、由于缺乏语义化,不利于SEO,屏幕朗读软件和盲文浏览器也无法很好地理解 table 中的内容,对视障用户就缺乏了友好性。
    3、table嵌套太多,代码的开销一般都比较大,后期维护也是个大问题。
     
    兼容性:
    当然它也有个不是好处的好处,兼容性好,但如果你的基础比较好,不用table布局也能写出兼容性良好的代码。
    其实table中也是有兼容性问题的,比如它的border-spacing,在table中边框是分离模式下(border-collapse: separate),设置border-spacing,该特性表示 TD 边框之间的距离,如果只设置一个长度值,则表示水平和垂直方向的空间。如果设置两个长度值,第一个值是水平方向的空间,第二个是垂直方向的空间。长度值不能是负值,但是此属性不支持IE6、7和8(Q),此时我们就需要用到cellspacing,若水平和垂直方向的空间相等,可以用 table的 cellspacing (已被废弃但可用)属性代替 border-spacing 特性。
     
    table中还有个需要注意的是table-layout属性:
    取值fixed为固定表格布局:允许浏览器更快地对表格进行布局,表格的水平布局不依赖于单元格的内容,而只依赖于表格的宽度,列的宽度以及边框或单元格的间隔。使用固定布局算法,用户端在下载完第一行后就可以开始表格布局,后续行的单元格不影响列宽。
    取值auto为自动表格布局:默认值,列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
    所以在不需要auto的情况下尽量还是取值fixed,为了更快嘛!
     
    随着HTML和CSS的快速发展,也许没多久table真的要和大家说再见了,但掌握它也没啥坏处,书到用时方恨少吗,文中没有详细讲table包括的标签和众多属性,不过可以移步http://yujiangshui.com/about-table/最后还是欢迎吐槽。。。
  • 相关阅读:
    交换机技术
    第七周课后总结
    以太网原理
    test
    NetCore第一步:千里之行 始于环境构筑
    第二十课(一)
    第十九课(三)
    第十九课(二)
    第十九课(一)
    第十八课(三)
  • 原文地址:https://www.cnblogs.com/web-lexi/p/4224497.html
Copyright © 2020-2023  润新知