We need to learn one special tag called colspan (Column Span).
It's useful when you wanna create a table with one column at the top and two headers and two column below like this👇
Create a new file and save it with colspan.html
Copy and paste this code in it👇
______start from <!doctype html>_____
<!doctype html>
<html>
<head>
<title>TopCrix Studio</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2"><h3>People I love</h3></th>
</tr>
<tr>
<th>Name</th>
<th>Reason</th>
</tr>
<tr>
<td>Yemi Alade</td>
<td>She's so sexy</td>
</tr>
<tr>
<td>MC Lively</td>
<td>He's too funny</td>
</tr>
</table>
</body>
</html>
_____stop at </html>________
In this colspan concept, you can see that we have two different headers.
One at the top colspan (Column spanned) into the next available column given us only one table row at the very top.
The second table header is the normal header we created earlier.
And lastly our two normal text column below.
Next time you want something like this, all you need to do is to specify the numbers of columns you want to span your header into. Like I did in the illustration given above
Like this👇
<th colspan="2"> and of course you know what <h3> means, header 3 to make it bigger so as to fit the two column space
Is it clear?
