Why the ouput differ from 1 2 then 3 4 in another line and so on?

Question

<table border="20">
<tr>
<td rowspan="2"colspan="2"><br/>01</td>
<td rowspan="2"colspan="2"><br/>02</td>
</tr>
<tr>
<td rowspan="2"colspan="2"><br/>03</td>
<td rowspan="2"colspan="2"><br/>04</td>
</tr>
<tr>
<td rowspan="2"colspan="2"><br/>05</td>
<td rowspan="2"colspan="2"><br/>06</td>
</tr>
<tr>
<td rowspan="2"colspan="2"><br/>07</td>
<td rowspan="2"colspan="2"><br/>08</td>
</tr>
</table>
https://code.sololearn.

Answer 1

You mean why are the rows not aligned?

Well, the problem arises from your usage of colspan and rowspan. Why do you use them? They should be used when you want one cell to span several rows or columns. Since each row is set to colspan=2 and each column to rowspan=2,, it makes it 4 columns and 8 rows, which shifts the table in a weird way.

If you are attempting to alter the table's look in some way, just use CSS instead. You should also replace the line breaks with CSS. Height, width, text-align, margin and padding attributes on the table, tr and/or td elements are the answer to most layout problems.

If you wanted to make it square, 4x2, here's an example:

<table border="20" width="150px" height="150px" style="text-align:center;">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
</tr>
<tr>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
</tr>
</table>