Home/ Questions/Q 1000655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T07:32:53+00:00

Here is a link my example of the misaligned table rows Click preview in

  • 0

Here is a link my example of the misaligned table rows

Click preview in the upper top left corner of the JS Bin menu bar to see this example in the works. You can see the top 2 borders of the table cells with Email and an input field in them are a bit lower than the top 2 borders of the 2 table cells to the left of them (Username and an input field).

Why is this happening?

Also I am finding I have to write rowspan="4" for <th> and <td> elements in the second element to make them span the 3 rows beside it. Why do I have to do that? It makes no sense if there are only 3 rows I have to clear. It’s as if there is a mysterious hidden row somewhere.

UPDATE with example answer:

I implemented the answer in this example. As you can see, there is perfect alignment between all table cells.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    right… easy peasy…

    basically, the second row needs to have 4 cells in it, the username and input cells AND the email and input cells…

    the username and input cells need to have rowspan="3" and then the NEXT two rows need to be password and new password with their input fields.

    code:

    <html>
  <head>
  </head>
  <body>
    <table border="1">
      <tbody>
        <tr>
          <th colspan="4" rowspan="1">
            <h3>Profile Settings</h3>
          </th>
        </tr>
        <tr>
          <th rowspan="3">
            <label for="">USERNAME:</label>
          </th>
          <td rowspan="3">  
            <input type="text">
          </td>
          <th>
            <label for="">Email:</label>
          </th>
          <td>  
            <input type="text">
          </td>  
        </tr>
        <tr>
          <th>
            <label for="">Password:</label>
          </th>
          <td>  
            <input type="password">
          </td>  
        </tr>  
        <tr>
          <th>
            <label for="">New Password:</label>
          </th>
          <td>  
            <input type="password">
          </td>  
        </tr>
        <tr>
          <td colspan="4">  
            <input type="button" value="save">
          </td>  
        </tr>
      </tbody>
    </table>
  </body>
</html>
    • 0