可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I would like to understand what is wrong with this:

<body>
    <h2>
        <table>
        <tr>
            <td> Text</td>
        </tr>
        </table>
    </h2>
</body>

Validator complains: document type does not allow element "table" here; missing one of "object", "ins", "del", "map", "button" start-tag

Further explanation says:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>",or "<font>").

Both h2 and table are block level so the last comment does not seem to apply. I want a table with h2 sized elements that is all... What is the right way to tell table to use the same size that h2 uses?

Thanks!

回答1:

CSS. Tables are simply not allowed inside headings, since it makes no semantic sense. Have you ever seen a book chapter whose title was a table? Don't use HTML semantic tags for appearance; style them yourself.

It doesn't matter whether table is block or inline by CSS, only what the HTML DTD says they are. Look here: only "flow" elements are allowed into td. Follow the link to see the definition of "flow": you'll see it's "inline" or "block". You can continue to follow those links down, until you find that, e.g. sub is fine, as is span... but you won't find table.

Also - tables are not even display: block - they have their own layout value, display: table. Not that it matters.

回答2:

CSS is the appropriate way to change the size of HTML elements. HTML isn’t designed to be used to create visual effects.

There’s no way in CSS to specifically tell a <table> to be whatever size <h2>s are.

However, you can tell tables and h2s to both be one specific size, e.g.:

h2,
table {
    font-size: 2em;
}

You could also use Chrome’s Web Inspector (or similar tools in other browsers) to check what the default styles are, and apply the relevant ones to your table. These default styles might vary between browsers though.

As for why you can’t have a table inside an <h2> tag, I’m not sure off the top of my head if the HTML spec offers rationales for its nesting rules, but <h2>s are meant to mark up headings, i.e. relatively short pieces of text that describe a section of a document.

It’s difficult to imagine how a table would be an appropriate heading.