在 HTML5 中使用 HTML 表格进行布局答案

【问题标题】：Using an HTML table for layout in HTML5在 HTML5 中使用 HTML 表格进行布局
【发布时间】：2015-07-12 01:19:55
【问题描述】：

我目前正在将 MediaWiki 安装从古老的 1.6.10 升级到 1.19.2。其中一个变化是新的 MediaWiki 使用了<!DOCTYPE html>，这会稍微改变布局。

现在 MediaWiki 扩展之一使用表格进行布局。例如：

<!DOCTYPE html>
<table>
 <tr style="background-color:lime;">
  <td><img src="pixel.gif"></td>
 </tr>
</table>

现在即使 pixel.gif 只有 1x1 像素大，石灰矩形使用 3x22 像素。我的意图是该行应该只有 1 个像素高。有没有使用<table>的简单方法，还是必须改用<div>s？

【问题讨论】：

为什么要坚持使用表格进行布局，弊大于利 - 大时代。
感谢升级。 :) 看到 MediaWiki wiki 运行十年前的代码总是很痛苦。

标签： html layout html-table

【解决方案1】：

添加这个 css：td { font-size:0;padding:0 }

这实际上与表格无关。使用 div 也会遇到同样的问题。所以同样地，使用div { font-size:0; }。更现实地说，您需要使用类来限定您想要样式的 div。例如div.myimagecontainer { font-size:0; }。

【讨论】：

【解决方案2】：

表格是表格和 html，与 HTML5 没有什么不同，但当然，表格不应该用于布局。

【讨论】：

【解决方案3】：

如果您必须使用 <table> 进行布局，请确保您按照 W3C html5 建议正确设置角色属性 <table role="presentation">：

不应将表格用作布局辅助工具。历史上，许多 Web 作者使用 HTML 格式的表格来控制他们的页面布局使得从此类文档中提取表格数据变得困难。在特别是，无障碍工具（如屏幕阅读器）的用户可能会发现很难浏览使用了表格的页面用于布局。如果要使用表格进行布局，则必须将其标记为用户代理的属性 role="presentation" 正确将桌子呈现给辅助技术并正确传达作者对希望提取表格数据的工具的意图来自文档。

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

【讨论】：