Question 201534 in Html Question posted in
Some basic documentation can be found here.

Why/How does setting `rowspan` on <td> seems giving an unexpected layout in HTML table?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Receipt</title>
</head>

<body>
    <table>
        <tr>
            <td rowspan="2">item</td>
            <td rowspan="2">price</td>
            <td rowspan="2">quantity</td>
        </tr>

        <tr>
            <td>book</td>
            <td>17.99</td>
            <td>1</td>
        </tr>

        <tr>
            <td>pencil</td>
            <td>2.99</td>
            <td>3</td>
        </tr>

        <tr>
            <td colspan="2">subTotal:</td>
            <td>26.96</td>
        </tr>

        <tr>
            <td colspan="2">tax:</td>
            <td>2.40</td>
        </tr>

        <tr>
            <td colspan="2">total:</td>
            <td>29.36</td>
        </tr>

    </table>

</body>

</html>

I have the above HTML where I want to use rowspan to control my first row’s height, but it seems to give me a very weird layout where content of my 2nd is wrapped up to the first row. (see image).table layouot

Does anyone know why? And what’s my alternative here?

I have try validating my HTML format online to see if I messed up any format. And most of them said
A table row was 6 columns wide and exceeded the column count established by the first row (3).. I’m not sure whether it is related to that or another thing which I am also very confused.

I generated the HTML with Freemaker template with Java.

update

this layout was what I looking for

Currently,

  • a. the wrapping problem is solved by adding an empty <tr></tr> after the 1st row;

  • b. however, the height of the 1st row is effective with the rowspan="2" so I resorted to css height="2em" on <tr>.

Tags:

2

Answers


  1. 0

    check this out is this what you asking for, if yus then just change rowspan to 1 and remove colspan from everywhere.{And you can style to look better (i just used for better looking u can avoid if u want)}
    [1]: https://phpout.com/wp-content/uploads/2023/07/d96Bl.png

    Login or Signup to reply.
  2. 0

    • You have set rowspan="2" for the first three cells in the first row.

    • This means that these cells should span two rows vertically.

    • So the second row should be empty

    • but the height issue will not be solved by this method.

    • To control the height of the first row without using rowspan, you can apply CSS styling.

      <style>        
 .first-row {
     height: 60px;
 }
</style>

    • Add class="first-row" to your first row, adjust the height accordingly by changing the 60px;

    For more clarification :
    For example if you have 3 cells in a row and you have added rowspan="2" for first 2 cells in first row,
    second row should contain only one cell.

    <html>
<body>
<table border="1">
  <tr>
    <td  rowspan="2">Heading 1 </td>
    <td  rowspan="2">Headeing 2</td>
    <td>Heading 3</td>
  </tr>
  <tr>
    <td>Sub Heading</td>
  </tr>
</table>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search