2

I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.

 <table border="1">
  <tr>
    <td rowSpan="2">A1</td>
    <td rowSpan="2">A2</td>
    <td rowSpan="2">A3</td>
    <td rowSpan="2">A4</td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>
0stone0
  • 34,288
  • 4
  • 39
  • 64
Sid
  • 21
  • 2

3 Answers3

1

Are you trying to do that ?

<table border="1">
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td rowspan="2">A4/B4 <br>(2 rows)</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
    <tr>
        <td>C1</td>
        <td colspan="2">C2/C3 <br>(2 cols)</td>
        <td>C4</td>
    </tr>
</table>
Eternal Learner
  • 21
  • 3
0

You'll need some css to set the height of the row;

table td, tr {
  height: 30px;
}


table td, tr {
  height: 30px;
}
<table border="1">
    <tbody>
        <tr>
            <td rowSpan="2">A1</td>
            <td rowSpan="2">A2</td>
            <td rowSpan="2">A3</td>
            <td rowSpan="2">A4</td>
        </tr>
        <tr>
        </tr>
            <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </tbody>
</table>

Note; You should add a tbody to your table; What is the purpose for HTML's tbody?

0stone0
  • 34,288
  • 4
  • 39
  • 64
0

The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.

If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.

 <table border="1">
  <tr style="height: 50px">
    <td >A1</td>
    <td >A2</td>
    <td >A3</td>
    <td >A4</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>
Marty Johnson
  • 165
  • 6