A More Detailed Example Using HTML Tables

After seeing the basics, now it is time to show you how it works with more detail. You have seen how it looks with a <th> and <td> tag used in the first example. The last example on the previous page has more to do <td> and creating rows. Now, what you are going to get will be is the example of how to pull it off properly. Watch below on how it looks.

Look below at this table

Cleveland Browns
NFL Years
1950
1954
1955
1964
<table border="1">
<tr>
<th colspan="2">Cleveland Browns</th>
</tr>
<tr>
<td rowspan="2" width="70%">NFL</td>
<td>Years</td>
</tr>
<tr>
<td align="left" valign="middle">1950<br>1954<br>1955<br>1964
</td>
</tr>
</table>

Here is the source code with a step by step guide.

The breakdown of the joined table
<table border="1"> Begins a table with a border depth of 1.
<tr> Begins the first row
<th colspan="2"> It joins two cells together.
Cleveland Browns Content in the cell
</th> Closing the header cell tag
</tr> Ending the first row
<tr> Beginning the second row
<td rowspan="2" width="70%"> It begins the second header cell tag. It takes up 70% of the table in this example.
NFL Text within the cell
</td> Ending the second header
<td> Beginning the second header cell
Years Text inside the cell
</td> Ending the second header cell
</tr> Has the second cell come to a close.
<tr> Beginning the third row. The only difference is that there is only going to be one cell but that's it.
<td> Beginning the table cell
1950<br>1954<br>1955<br>1964 Text inside the cell. Please note that there is a line break.
</td> It puts an end to the cell
</tr> It closes the third row
</table> The table comes to an end

If you look at it even further, here is what it is actually. To go even further, I will be demonstrating another table with the same concept as before but will be slightly different.

<table border="0" cellpadding="2" cellspacing="2">
<tr>
<th bgcolor="darkblue" colspan="2">Cleveland Browns</th>
</tr>
<tr>
<td rowspan="2" width="70%" bgcolor="silver">NFL</td>
<td bgcolor="silver">Years</td>
</tr>
<tr>
<td align="left" valign="middle" bgcolor="silver">1950<br>1954<br>1955<br>1964
</td>
</tr>
</table>
Cleveland Browns
NFL Years
1950
1954
1955
1964

The table above is same as the table in the first example, but looks completely different. It is reached by cellpadding and cellspacing attributes, and also by setting background color of cells.

That should settle and should solve all your problems on tables. What you got is an understanding on how they work and operate. If you need to re-read again to catch something you missed, then by all means do so.