CODEWITHSUNDEEP
htmlhtml-tablerows
lomokev
lomokev

Reputation: 118

Extra empty alternate rows in my html table

Making a simple table and I noticed something odd when I was trying to do something with alternate rows and javascript and it did not work. When I looked at the page in inspector in Firefox and Chrome I noticed extra rows between each one of my rows. It even does it when I just have the table with no CSS or JS.

I can work around this it's not not a problem I am just wondering why they are there?

This is my page:

<!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>

This is what the code looks like in Firefox inspector:

This is what the code looks like in Firefox inspector

Upvotes: 0

Views: 291

Answers (1)

APAD1
APAD1

Reputation: 13666

On the 2nd, 3rd and 4th rows you're using an opening <tr> where you should be using a closing </tr>

<!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>

Upvotes: 1

Related Questions