Table Spanning and Spacing

This lesson wraps up just about everything you need to know about tables. To start out with, I'll just give an example of each type of spanning, rowspan and colspan (rows and columns).

As you can see, one cell in each table spans 2 columns or rows. The "rowspan" and "colspan" attributes are responsible for this. These attributes are added to the td tag we want to stretch out.

<table width="300px" height="300px" border="1">
<tr>
<td width="150px" height="150px">Cell 1</td>
<td width="150px" height="150px">Cell 2</td>
</tr>
<tr>
<td align="center" width="300px" height="150px" colspan="2"<Cell 3</td>
</tr>
</table>

The above is the code for the first table. Notice how the cell in the second row has the colspan attribute. This means that the cell is spanning the width of two columns. This is probably the easier than rowspan since you are working with the same row.

The rowspan attribute is a little harder since it has to span multiple rows. Just think it out in advance and you should be fine. Sometimes drawing a table will give you more of an idea of what you need.

<table width="300px" height="300px" border="1">
<tr>
<td width="150px" height="150px">Cell 1</td>
<td width="150px" height="300px" rowspan="2" valign="center" >Cell 2</td>
</tr>
<tr>
<td width="150px" height="150px">Cell 3</td>
</tr>
</table>

This one has the rowspan attribute in one of the cells on the top row. There is only one cell in the bottom row, and it doesn't have a spanning attribute. This is because the cell with rowspan comes down and takes the place of the second cell.

The spacing shouldn't be that difficult. The first attribute I will show you is the cellpadding attribute. It creates a little bit of space between the contents of the table and the border of the table. It is added to the table tag. I'll take a table we used earlier in this lession and add cellpadding.

<table width="300px" height="300px" cellpadding="10" border="1">
<tr>
<td width="150px" height="150px">Cell 1</td>
<td width="150px" height="150px">Cell 2</td>
</tr>
<tr>
<td align="center" width="300px" height="150px" colspan="2"<Cell 3</td>
</tr>
</table>

That might be a bit more padding than you need, but you get the point. You know how to change the spacing within the cell, now I will show you how to change the spacing between cells. This pretty much makes the border wider.

<table width="300px" height="300px" cellpadding="10" cellspacing="10" border="1">
<tr>
<td width="150px" height="150px">Cell 1</td>
<td width="150px" height="150px">Cell 2</td>
</tr>
<tr>
<td align="center" width="300px" height="150px" colspan="2"<Cell 3</td>
</tr>
</table>

This spreads the cells themselves apart. Finally, if you add color to the cells and set the border, cellpadding, and cell spacing attributes equal to zero, you will have a colored table that has no space between the cells at all.

<table width="300px" height="300px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150px" height="150px" bgcolor="red">Cell 1</td>
<td width="150px" height="150px" bgcolor="yellow">Cell 2</td>
</tr>
<tr>
<td align="center" width="300px" height="150px" colspan="2" bgcolor="blue"<Cell 3</td>
</tr>
</table>

That pretty much wraps up tables. There are ways to make your whole page layout with tables, but you can't get everything to work properly with them and they load slower, so I won't even spend time discussing it. If you want to try it, play around with setting your table at 70-100% widths. Next we will discuss meta tags. These tags are fairly simple, but can be important in getting visitors to your website.