我的html表中有额外的空替换行

时间:2017-03-21 15:35:26

标签: html5 html-table rows

制作一个简单的表格,当我尝试使用备用行和javascript执行某些操作时,我注意到了一些奇怪的事情。当我在Firefox和Chrome中的检查器中查看页面时,我发现每行之间都有额外的行。当我只有没有CSS或JS的表时,它甚至会这样做。

我可以解决这个问题并不是一个问题我只是想知道为什么他们在那里?

这是我的页面:

<!doctype html>
<html lang=en>
     <head>
          <meta charset=utf-8>
          <title>table test</title>
     </head>
     <body>
        <table>
            <tr>
              <th>title 01</th>
              <th>title 02</th>
            </tr>
            <tr>
              <td>thing 01</td>
              <td>attribute 01</td>
            <tr>
            <tr>
              <td>thing 02</td>
              <td>attribute 02</td>
            <tr>
            <tr>
              <td>thing 03</td>
              <td>attribute 03</td>
            <tr>
        </table>
     </body>
</html>

这是Firefox检查器中的代码:

This is what the code looks like in Firefox inspector

1 个答案:

答案 0 :(得分:1)

在第2行,第3行和第4行,您使用了一个开头<tr>,您应该使用结束</tr>

&#13;
&#13;
<!doctype html>
<html lang=en>
     <head>
          <meta charset=utf-8>
          <title>table test</title>
     </head>
     <body>
        <table>
            <tr>
              <th>title 01</th>
              <th>title 02</th>
            </tr>
            <tr>
              <td>thing 01</td>
              <td>attribute 01</td>
            </tr> <!-- CHANGED TO CLOSING </tr> -->
            <tr>
              <td>thing 02</td>
              <td>attribute 02</td>
            </tr> <!-- CHANGED TO CLOSING </tr> -->
            <tr>
              <td>thing 03</td>
              <td>attribute 03</td>
            </tr> <!-- CHANGED TO CLOSING </tr> -->
        </table>
     </body>
</html>
&#13;
&#13;
&#13;