Question

我正在使用HTML标签构建一个简单的表。源代码如下：

<table class="tableClass">
    <thead>
        <tr>
            <th>Column Header</th>
            <th>Column Header</th>
        <tr>
    </thead>
    <tbody>     
            <tr>
                <td>Column Data</td>
                <td>Column Data</td>
            </tr>       
    </tbody>
</table>

当我在Head部分的Browser中尝试表时，它似乎是一个空行。我在Firefox和Chrome中尝试过，调试器输出：

   <table class="tableClass">
        <thead>
            <tr>
                <th>Column Header</th>
                <th>Column Header</th>
            <tr>
            <tr></tr>
        </thead>

该空行不会出现在代码中的任何位置，但调试器似乎找到了它。有什么想法可以来自哪里？它与表格风格有关吗？

Answer 1

您未关闭<tr>

中的<thead>

<thead>
    <tr>
        <th>Column Header</th>
        <th>Column Header</th>
    </tr> <!-- here -->
</thead>

Answer 2

在<thead>中，你没有关闭<tr>只是制作一个新的。{/ p>

<table class="tableClass">
    <thead>
        <tr>
            <th>Column Header</th>
            <th>Column Header</th>
        <tr> <!-- NOT CLOSED! -->
    </thead>
    <tbody>     
            <tr>
                <td>Column Data</td>
                <td>Column Data</td>
            </tr>       
    </tbody>
</table>

如果您验证HTML，则可以避免这些错误。

Answer 3

<table class="tableClass">
    <thead>
        <tr>
            <th>Column Header</th>
            <th>Column Header</th>
        <tr> //NOT CLOSED
    </thead>

关闭表格行：）

HTML表头中的神秘行

3 个答案: