The thing to remember here is that a <td> is always enclosed in a <tr>, which is always enclosed in a <table>.
Enough already. Let's do it!
OK. Let's make the basic table we outlined above. Here it is:
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
And here's the code:
<table border>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the <td> and </td> tags.
In order to see the table, I added border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in <table border=5>. But be warned, this can be taken too far.
"Colspan" and "rowspan"
You can also make a cell in one row stretch across two cells in another. Like this:
To accomplish this, you have to use the colspan modifyer. Just add colspan=2 to the <td>, and voilà!
<table border>
<tr>
<td colspan=2>Cell 1</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
You can also do this:
Just add rowspan=2 to the <td>, like so:
<table border>
<tr>
<td rowspan=2>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
</table>
Just remember: Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.
