0

I am trying to draw the below image enter image description here

I am not able to get the image by using table in html. I have tried using rowspan but it just distorts the table and doesnot create the required result. How can I get the table without using CSS and with using CSS.

Further can we apply rowspan to the last row of the table ? if we can then how ? can someone give an example for the usage also.

2
  • If this needs to be dynamic you need to use JS - something like Masonry – Zach Saucier Dec 13 '18 at 22:06
  • I am not aware of this. But if you want you can share the answer that way we may come to know of new method and dynamic table. – Pushkal Singh Dec 14 '18 at 13:29
3

Maybe you haven't set the cell highs, this is a Codepen example.

While the cells are empty you must set the cell height. It can be removed once the cells have their content: Codepen.

<table width="300" border="1px solid">
<tr>
<td width="33%" height="100"></td>
<td width="33%" height="100"></td>
<td width="33%" height="100"></td>
</tr>
<tr>
<td width="33%" height="100"></td>
<td width="33%" height="200" rowspan="2"></td>
<td width="33%" height="100"></td>
</tr>
<tr>
<td width="33%" height="200" rowspan="2"></td>
<td width="33%" height="200" rowspan="2"></td>
</tr>
<tr>
<td width="33%" height="100"></td>
</tr>
</table>

There are some online table generators that can help you: https://www.tablesgenerator.com

3
  • thanks. This works for the result I was requiring. – Pushkal Singh Dec 14 '18 at 13:26
  • For more clarity can you explain why we are using height and rowspan together ? Will not rowspan=2 work to double the height of the cell ? – Pushkal Singh Dec 14 '18 at 13:47
  • Answer updated. – user120647 Dec 14 '18 at 14:15
0
<table width="400" height="300" border="2" >
    <tr>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center">3</td>
    </tr>

    <tr>
        <td align="center">4</td>
        <td align="center" rowspan="2">5</td>
        <td align="center">6</td>
    </tr>

    <tr>
        <td align="center" rowspan="2">7</td>
        <td align="center" rowspan="2">9</td>
    </tr>

    <tr>
        <td align="center">8</td>
    </tr>
</table>                            

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.