Tables

This is what you should have so far in our lesson:

	Watering Can
	Butterfly
	Flower

Do you see how the fonts are really small?  Let's make our font bigger.  Add <font size="+2"> after the <td> tags that contain the text.  Don't forget to close out the <font> tag.  Your code for these cells should look like this:

<td>
<font size="+2">
Butterfly
</font>
</td>

	Watering Can
	Butterfly
	Flower

You notice that before you changed the font size, the cells were bigger on one side that the other.  If you would like to make the cells in your table the same size, and control how big your table is, you can add a width attribute to the <td> tag.  You can either add the width in pixels to make it a fixed width or as a percentage of the browser width.  For this exercise, lets enter width="50%" in the <td> tag.

	Watering Can
	Butterfly
	Flower

Now we will center our table.  Just put a <center> tag before the <table> tag, and a closing </center> tag after the </table> tag.  Would you like to align the text?  You can align any of the contents of your cells by adding an align="center" or align="left" or align="right" to the <td> tag.  Let's see what it will look like if the text is aligned to the center of the cell.

	Watering Can
	Butterfly
	Flower

Do you want to get rid of the border?  As I said earlier, you can just enter border="0" in the <table> tag.  However, while you are creating a table, it is easier to see where you need to make adjustments if you leave the border attribute at "1" until you are finished.

On the next page you can see some ways that background tables can be used to create some unique background sets, and download the source code for your own use.