Overview


Tables are a more difficult, but not incredibly hard thing that will make the layout of your page look much nicer. In fact, for this page, I used many tables. I'll take you step by step on how to create tables, change their look, size, and what you can do with tables.

Basics


To begin with, you are going to need the <table> tag. Every thing in your table goes between the <table> and the </table> tags. Everything in a single table row (across) goes in between the <tr> and </tr> tags. Everything in a specific table cell (one box) goes in between the <d> and </td> tags.
  • By adding 'border' into your table tag, you can define how thick your border is. Like this: < table border="3">. By using that, you will create a table with a border of 3.
  • You can add the bg color tag to any on the <table>, <tr> or <td> tags to change the background color of the whole table, row, or cell. Like this: <table border="3" bgcolor="green">
  • Cell spacing defines the space between the cells of your table. For exapmple: < table cellspacing="8"> The cells will each be 8 pixels away from each other.
  • Cell padding defines the margin inside the cell. <table cellspacing="8" cell padding="4"> creates a table that has a margin of 4 pixels in each cell.
  • 'Bordercolor' sets the color for the border of your table. It goes inside the <table> tag.
  • Width is the number of pixels your table is wide. You also set a width for each cell.

Starting

To begin with, let's just make a simple table. We'll set the border to 4, cell spacing to 5, the border color as green, and the bacground color as purple. We'll make the table 600 pixels wide, and each cell 200 pixels wide.
CellCellCell
CellCellCell
CellCellCell

You can also include font tags either inside the <table>, <tr> or <td> tags, depending if you want that particular font in the whole table, row, or just that cell. Any tags you put inside the <table> tag will be set for the whole table, while any tags in the <tr> will be only for that row, while <td> tags will be set only for that cell. The code I used for the above table is as follows: (each color is the code for a new row)
<center>
<table border="4" cellspacing="5" bordercolor="green" bgcolor="purple" width="600">
<tr><td width="200">Cell</td>
<td width="200">Cell</td>
<td width="200">Cell</td></tr>
<tr><td width="200">Cell</td>
<td width="200">Cell</td>
<td width="200">Cell</td></tr>
<tr><td width="200">Cell</td>
<td width="200">Cell</td>
<td width="200">Cell</td></tr>
</table>
</center>

Different Sized Cells


Now, if you want to make some of the cells wider, all you have to do is add the 'colspan' tag.
CellCellCell
CellCellCell
Big Cell

This part is a little tricky. The width of the cells I set as 200. So, If I wanted a cell to have a width of 600, I would have it span over 3 colums. Below is the code I used for the above table:
<center>
<table border="4" cellspacing="5" bordercolor="green" bgcolor="purple" width="600">
<tr><td width="200">Cell</td>
<td width="200">Cell</td>
<td width="200">Cell</td></tr>
<tr><td width="200">Cell</td>
<td width="200">Cell</td>
<td width="200">Cell</td></tr>
<tr><td colspan="3"><centerBig Cell</center></td>
</table>
</center>

Now all you have to do is change the 'colspan' tag to 'rowspan' Remember: for each cell you insert a <td> tag, also, you only insert one <td> per cell. Meaning, if I made a cell start from row 1 and span through rows 2 and 3, I would still only put one <td> tag in.
Rows 1-2 Row 1 Rows 1-3
Rows 2-3
Row 3
<center>
<table border="4" cellspacing="10" bordercolor="green" bgcolor="purple" width="600">
<tr><td rowspan="2">Rows 1-2</td>
<td>Row 1</td>
<td rowspan="3">Rows 1-3</td></tr>
<tr><td rowspan="2">Rows 2-3</td></tr>
<tr><td>Row 3</td></tr>
</table>
</center>