html表格在页⾯的位置,cssTable布局-display：table
使⽤表格布局⼀直是⼀个敏感的主题。⼀般情况下，Web开发⼈员考虑基于表格布局是禁忌。尽管反对的理由看起来证据很充分，但是⼤多数开发者除了谴责基于表格的布局，都⽆法提供完善的使⽤场景。“表格不好。”
从早期反对HTML Table(
诚然，我也是避免使⽤表格布局的开发者之⼀，即使是显⽰表格数据。
我甚⾄曾经斥责我的下属开发者同事，当他们使⽤ display:table ⽤来表仪式的布局(或圣杯布局)的时候。
回想起来，头脑⿇⽊⽽且倔强的我花了⼤把时间，为此写了⼀堆CSS hack，是多么的可笑。
两种类型的表格布局
你有两种⽅式使⽤表格布局?-HTML Table(
HTML Table是指使⽤原⽣的
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
显⽽易见HTML Table使⽤标签
(CSS2)
等标签，就是使⽤CSS Table的相关属性来实现的。从上⾯HTML4的默认样式表中可以看出他们的使⽤对于CSS属性的情况：
table：指定对象作为块元素级的表格。类同于html标签
inline-table：指定对象作为内联元素级的表格。类同于html标签
table-caption：指定对象作为表格标题。类同于html标签
table-cell：指定对象作为表格单元格。类同于html标签
(CSS2)
table-row：指定对象作为表格⾏。类同于html标签
(CSS2)
table-row-group：指定对象作为表格⾏组。类同于html标签
(CSS2)
table-column：指定对象作为表格列。类同于html标签
(CSS2)
table-column-group：指定对象作为表格列组显⽰。类同于html标签
(CSS2)
table-header-group：指定对象作为表格标题组。类同于html标签(CSS2)
table-footer-group：指定对象作为表格脚注组。类同于html标签
(CSS2)
⼀个关键的区别
作为从《CSS禅意花园》中学习CSS的个⼈，我讨厌HTML Table布局。我不知不觉的产⽣了“虚幻的相关偏见”，⾼估HTML Table和CSS Table之间的区别。
如果它看起来、⼯作起来、听起来像⼀个表格，那么它必须是⼀个表格？ 错误！
事实上，HTML Table和CSS Table之间的真正区别是：
适当地调整CSS属性，CSS的Table能做到许多HTML Table 不能做的事情，可以从Table中择优选择属性使⽤。
下⾯是⼀些 display:table ⽰例，你可能会发现它很有⽤：
动态垂直居中对齐html网页设计 table
这也许是使⽤display:table最常见的例⼦了。对于动态⾼度的元素，有了它，就可以实现真正的垂直(居中)对齐。
还有另⼀个不⽤display:table实现的垂直居中的简单⽅式，您可能感兴趣：
动态⽔平居中对齐
为了让元素动态⽔平居中对齐，您可以设置元素为display:inline-block。然后在该元素的外⾯包裹层元素上设置?text-align:center?。这⾥的⽂本对齐缺点是有副作⽤。外⾯包裹层内的所有⼦元素将继承了?text-align:center 属性，造成潜在的覆盖。
感谢@mojtabaseyedi，我发现了动态⽔平居中对齐元素，⽽且⽆副作⽤的新⽅法。再动态元素上应⽤display:table 和 margin: auto。
⼤家可以留意⼀下，li元素上为什么不使⽤display: table-cell来达到像要的效果，甚⾄在ul元素上应⽤ display: table-row ：
ul {
list-style: none;
margin: 0;
padding: 0;
display: table-row
}
li {
display: table-cell;
background-color: #BD4932;
}
毕竟这样好理解，可以看成是⼀个table，⽽且达到的效果⼏乎⼀样(实际有细微的差别)。
这⾥CSS Table布局的优点就显现出来了，我们只要选择我们想⽤的合适的属性就可以了，⽽HTML Table者需要我们使⽤固定的标签格式。
响应式布局
正如刚才提到的，CSS Table布局可以让⼀个元素表现上不像⼀个表格。只要将元素的display属性从table-cell?切换到?block，我们就能够将元素堆叠起来。
你可以根据屏幕的可是区域改变元素堆砌的顺序。例如，上⾯的例⼦中，我们使⽤了媒体查询，当页⾯宽度⼩于等于42opx的时候，将元素纵向堆叠起来：
@media (max-width: 420px) {
.box {
display: block;
width: 100%;
}
}
更多有关该技术你可以阅读这篇⽂章。
动态⾼度的页脚贴在页⾯底部
先来看⼀个⽰意图：
页脚动态贴在底部需要满⾜以下两个条件：
当主体的内容⾼度不超过可视区域⾼度的时候，页脚贴在页⾯底部。
当主体的内容⾼度超过可视区域⾼度的时候，页脚将按正常布局。
如果你搜索页脚贴在底部解决⽅案，你可能已经搜索到由?Chris Coyier 或 Ryan Fait?提供的这些有⽤的代码⽚段。
他们的解决⽅案能够很好的⼯作，但只有⼀个缺点 – 页脚必须是固定的⾼度。你可以⽤JavaScript来解决这个问题，但我更喜欢⽤CSS来解决它。使⽤display:table，你可以创建动态⾼度页脚使其贴在页⾯底部。
圣杯布局
来⾃alistapart的⽂章，圣杯布局指的是⼀个⽹页由页眉，3等⾼列(2个固定侧栏和中⼼内容主体)和贴在页⾯底部的页脚组成。
圣杯布局再尽可能的情况下，应实现这些⽬标如下：
具有中⼼内容主体与固定宽度的侧边栏；
在源代码中，允许中⼼内容主体列出现在第⼀个节点位置；
允许任何⼀列的⾼度最⾼；
使⽤display:table实现的圣杯布局
以上codepen代码再现了圣杯布局。你可以调整窗⼝的⼤⼩，在中⼼内容主体列中添加更多的内容来测试贴在页⾯底部的页脚。没能满⾜的唯⼀⽬标是第⼆点：在源代码中，允许中⼼内容主体列出现在第⼀个节点位置；
我猜这⽬标的⽬的是搜索引擎优化(SEO)。因此，如果搜索引擎优化不是⾮常重要的话，display:table 将相对容易地实现圣杯布局。
你在开玩笑吗？ CSS的Flex可以解决⼀切问题！
事实上，它可以。看看菲利普·沃尔顿的flex 解决⽅案解决我上⾯的例⼦。不过，不要急于下结论。IE8
和IE9仍然占据的桌⾯浏览器32％的市场份额，如果我们想使⽤?flex 解决⽅案，就必须放弃IE8和IE9这部分⽤户。如果⽹站只需要满⾜移动端或者像Chrome这样的⾼级浏览器，那你可是⼤胆尝试flex 解决⽅案，否则我还是会坚持使⽤display:table。(注：作者写这篇⽂章的时间是：2014-10-27)。
⼩结
通过上述实例，我希望能够揭⽰饱受诟病的 display:table 的⼀下优秀的地⽅。不过，我要强调的是CSS?Table不是布局包治百病的良⽅。你可以阅读⼀下⼏个古怪的BUG：
在合适的范围内，合理的利⽤CSS?Table，能减轻研究CSS Hack的痛苦。
======================注=====================
确实似乎现在翻译这篇⽂章有点过时，但是还是觉得应该更加合理的利⽤CSS 属性，每个属性都应该认真学习，怎么使⽤，能解决什么问题，这样才会融汇贯通。当年研究CSS Hack的⼤神，可不是像我们⼀样，⽹上搜索或者考猜的。
相关推荐

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。