How to build this table using html only (rowspan and colspan)?

HTML-CSS
1

I tried this example, but the thought process given at that example after the first row part didn’t work here. So, I was wondering how to solve this problem? I’ve tried this code:


<table border="1">

<tbody>

<tr>

<td colspan="3">1</td>

<td rowspan="3">2</td>

<td colspan="2">3</td>

<td rowspan="5">4</td>

<td colspan="2" rowspan="2">5</td>

</tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

</tbody>

</table>

But after first row, I lose sense of what it should be afterwards. What should be the second row? I’m not sure about that.

So, can you please guide me how to solve this question. Rather than code alone, thought process would also be invaluable to me.

2

I see you are trying to build a table, but I’m not familiar with these attributes you’re using. If you’re not sure about how tables work you can refer to this: HTML Tables

Maybe somebody more experienced can chime in and give you more detailed help. I’m also not in a position to watch the video you posted so I’ll have to look at that later.

3 
<html>
<head>
</head>
<body>
<style>
 table, tr,td {border:1px solid black;text-align:center;min-width:24px;min-height:24px;} 
</style>
<table>
<tr>
 <td rowspan="1" colspan="3"> 1</td>
 <td rowspan="3" colspan="1"> 2</td>
 <td rowspan="1" colspan="2"> 3</td>
 <td rowspan="5" colspan="1"> 4</td>
 <td rowspan="2" colspan="2"> 5</td>
 
</tr>
<tr>
 <td rowspan="1" colspan="2"> 6</td>
 <td rowspan="1" colspan="1"> 7</td>
 <td rowspan="3" colspan="2"> 8</td>
 </tr>
<tr>
 <td rowspan="1" colspan="1"> 9</td>
 <td rowspan="1" colspan="2">10</td>
 <td rowspan="2" colspan="1">11</td>
 <td rowspan="4" colspan="1">12</td>
</tr> 
<tr>
 <td rowspan="3" colspan="1">13</td>
 <td rowspan="1" colspan="1">14</td>
 <td rowspan="1" colspan="2">15</td>
</tr> 
<tr>
 <td rowspan="3" colspan="1">16</td>
 <td rowspan="1" colspan="1">17</td>
 <td rowspan="1" colspan="2">18</td>
 <td rowspan="2" colspan="1">19</td>
 <td rowspan="1" colspan="1">20</td>
 
</tr>
<tr>
 <td rowspan="1" colspan="3">21</td>
 <td rowspan="2" colspan="2">22</td>
</tr>
<tr>
 <td rowspan="1" colspan="1">23</td>
 <td rowspan="1" colspan="1">24</td>
 <td rowspan="1" colspan="3">25</td>
 <td rowspan="1" colspan="1">26</td>
 
</tr>
</table>
</body>
</html>

This code works.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.