blocks|key|1270106|text|如果所有可能的布局都可以用css完成，而看不到表或伪表，那就太好了。但也有例外，在html和css+(和浏览器支持)允许我们这样做之前，请放心使用您的表。毕竟，重点是满足你的用户，而不是坚持别人的哲学。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1270107|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

It would be swell if every possible layout could be done with css, with no tables or pseudo-tables in sight. But there are exceptions, and until html and css (and browser support) let us do it, be comfortable with your tables. The point, after all, is to satisfy your users, not to adhere to someone else's philosophy.

blocks|key|1270173|text|在HTML中对非表格数据使用table标记的问题在于，它们在应该只包含数据的内容中强加了格式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1270174|由于您将表格格式放在CSS中，因此HTML在语义上仍然是正确的。我的观点是，只要你的HTML在语义上是正确的，你在CSS中做什么让它看起来更好是你自己的事情，我认为你对存在的恐惧是不必要的。|1270175|顺便说一句，我很确定IE6不支持display:table-cell，所以根据你的目标，你可能需要做一些替代的安排。|1270176|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

The problem with using table tags for non-tabular data in HTML is that they impose formatting in what should be just the data.

Since you are putting your table formatting in your CSS, your HTML is still semantically correct. I am of the opinion that as long as your HTML is semantically correct, what you do in the CSS to make it look nice is your own business, and I think your existential dread is misplaced.

On a side note, I'm pretty sure IE 6 doesn't support display:table-cell, so depending on your target you might need to make alternate arrangements.

blocks|key|1055475|text|这就是为display:+table-cell;设计的示例类型。毕竟，您要将格式设置放入样式表，而不是放入标记。所以放松点吧！这很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1055476|entityMap^0|4|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

This is the type of example that <code>display: table-cell;</code> was designed for. You are, after all, putting the formatting into the stylesheet, not the markup. So relax! It's fine.

blocks|key|1055541|text|display:+table-cell|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1055542|是一种样式，而不是像这样的表结构：|unstyled|1055543|<table>
+++<tbody>
+++++++<tr>
++++++++++<td>
++++++++++</td>
+++++++</tr>
+++</tbody>
</table>|1055544|所以我认为使用它是很好的。|1055545|顺便说一句，我不认为桌子真的是邪恶的。|1055546|就我个人而言，我更喜欢用表格来显示表格数据(仅用于数据)，而不是"div“结构。我的主要原因是，用户可以很容易地从他们的浏览器复制粘贴数据到电子表格。Fullfiling+my+lazyness+:">并减少页面加载(通过不使用“下载为excel，或csv或其他”)...嘿嘿...+:D.哦，还有一个，在不同的浏览器中它也是一致的。|1055547|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>display: table-cell
</code></pre>

is a style, not a table structure like this:

<pre><code>&lt;table&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

So i think it's fine to use it.

By the way, i don't think table is really evil after all.

Personally i would prefer table for displaying tabular data (only for data) than "div" structure. My main reason is, user could easily copy paste the data to spread sheet from their browser. Fullfiling my lazyness :"> and reducing page load (by not featuring "download as excel, or csv or other")... hehehe... :D.
Oh one more, in different browsers it's displayed consistent too.

blocks|key|1055606|text|当您谈论语义时，使用display:table是很好的。“表不好”的原因首先是因为标记(HTML)应该描述其中的内容。因此，如果它不是数据，那么它就不属于表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1055607|因为您只是设置标记的显示方式(在表结构中)，所以这完全没有问题。|1055608|然而，这并不适用于所有浏览器。具体地说，IE6和IE7+(以及处于“兼容模式”的IE8+)将无法正确显示此信息。|1055609|有关显示类型和浏览器支持的更多信息，请参阅：http://www.quirksmode.org/css/display.html|offset|length|1055610|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/display.html^0|0|0|0|M|16|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

Using the display:table is fine when you're talking about semantics. The reason "tables are bad" in the first place is because the markup (HTML) is supposed to describe the content inside of it. So, if it's not data, it doesn't belong in a table. 

Since you're just setting how the markup displays (in a table structure), that's perfectly fine.

However, this will not work for all browsers. Specifically IE6 and IE7 (and IE8 in "compatibility mode") will not display this correctly.

For more information on display types and browser support, you can refer to this: <a href="http://www.quirksmode.org/css/display.html" rel="nofollow noreferrer">http://www.quirksmode.org/css/display.html</a>

blocks|key|1270444|text|具有讽刺意味的是，使用display:+table很可能是未来常见的可接受的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1270445|请参阅：http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/|1270446|entityMap|0|LINK|mutability|MUTABLE|url|http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/^0|B|E|0|4|2Y|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Ironically, using <code>display: table</code> is likely to be a common acceptable solution in the future.

See: <a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" rel="nofollow noreferrer">http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/</a>

blocks|key|1055698|text|让我来给你解释一下。元素有它的魅力，这就是每个人使用它的原因。但是后来语义得到了发展。我们在语法方面做得非常好。决定放弃XHTML2.0，采用HTML5。请阅读WHATWG+(+Web超文本应用程序技术工作组)的历史，以明确您的概念。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1055699|从HTML中删除某些元素背后的主要立场是，它们不是用来组织事物的，而是用来设计样式的，而HTML与元素样式无关。|1055700|HTML是用来构建网页结构的。CSS就是用来设计这种结构的。|1055701|因此，HTML元素和许多其他元素被从规范中删除。它们是专门用于样式而不是结构的。|1055702|为了决定元素的命运，我们决定将它保留在规范中，因为在真实的表格中是用它来构建的，但为了转移普通网页设计师的关注点，应该将类似的能力/规范添加到CSS中。|1055703|现在，HTML元素只用于表的结构，而不是其他元素。如果希望使用表设置样式，请继续使用display:+table；，这是一个CSS属性，CSS用于在HTML中设置结构元素的样式。如上所述，它可以被修改和控制，例如在RWD中，你可以指定任何元素来改变它的显示，从表到块或其他任何东西。|1055704|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

Let me break it down to you. 
 element had it's charms which was the reason behind everyone using it. But then Semantics got evolving. We were way over and above with Syntax. Decisions were made, on behalf of which XHTML 2.0 was discarded and HTML5 was adopted. Read the history of WHATWG ( Web Hypertext Application Technology Working Group) to get your concepts clear about it. 

The main stance behind removing certain elements from HTML was they were not meant to structure things but were meant to style them, whereas HTML has nothing to do with styling an element. 

HTML is meant to structure a web page.
CSS is meant for styling that structure. 

So, the HTML element and and many others were removed from the specifications. They were specifically being used to style instead of structuring. 

To decide the fate of element it was decided to keep it in the specs as in the real tables are meant to be structured with it, but to shift the focus of a common web designer similar abilities/specs should be added to CSS. 

Now HTML element is meant for the structure of a table and nothing else. 
If you want to use the table for styling go ahead and use display:table; which is a CSS property and CSS is meant to style the elements of a structure in HTML. Above that it can be modified and control E.g. in RWD you can specify any element to change its display from table to block or whatever.

I am trying to make a 2 column layout, apparently the bane of CSS. I know you shouldn't use tables for layout, but I've settled on this CSS. Note the use of display: table etc.

<pre><code>div.container {
 width: 600px; height: 300px; margin: auto;
 display: table; table-layout: fixed;
 }

ul {
 white-space: nowrap; overflow: hidden;
 display: table-cell;
 width: 40%;
 }

div.inner {
 display: table-cell;
 width: auto;
 }
</code></pre>

With this layout:

<pre><code>&lt;div class="container"&gt;

 &lt;ul&gt;
 &lt;li&gt;First&lt;/li&gt;
 &lt;li&gt;Second&lt;/li&gt;
 &lt;li&gt;Third&lt;/li&gt;
 &lt;/ul&gt;

 &lt;div class="inner"&gt;
 &lt;p&gt;Hello world&lt;/p&gt;
 &lt;/div&gt;

 &lt;/div&gt;
</code></pre>

This seems to work admirably. However, I can't help wondering - am I obeying the letter of the "don't use tables" rule, but not the spirit? I think it's ok, since there's no positioning markup in the HTML code, but I'm just not sure about the "right" way to do it.

I can't use css float, because I want the columns to expand and contract with the available space.

Please, stack overflow, help me resolve my existential sense of dread at these pseudo-tables.

Is it bad use "display: table;" to organise a layout into 2 columns?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试做一个2列的布局，显然是CSS的祸害。我知道你不应该使用表格来布局，但是我已经决定使用这个CSS。注意display: table等的用法。div.container {  width: 600px; height: 300px; margin: auto;  display: table; table-la...

问使用"display: table;“将布局组织成两列是不好的吗？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用"display: table;“将布局组织成两列是不好的吗？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用"display: table;“将布局组织成两列是不好的吗？
EN