How come the last 3 rows of cells in my table are not perfectly lined up with the 1st row in my HTML table?_问答_开发者

How come the last 3 rows of cells in my table are not perfectly lined up with the 1st row in my HTML table?

开发者 https://www.devze.com 2023-01-11 19:37 出处：网络

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 c

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 开发者_JAVA技巧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.

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>

Your first row is has 1 td with a colspan of 4, but your second row is 2 td's both with a normal colspan?

Your mark up is flawed, fix this first.

What is the end result supposed to look like? The way it looks now?