Tables

Tables are an important part of HTML. They may seem pretty useless at first, but the layout for this site was made using tables. Here is a basic one:

1	2
3	4

and here is the code that produced it:<table border="1" cellspacing="2" cellpadding="5">
<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>4</td>
</tr>
</table>So what does it mean? Well, table begins and ends the table, obviously. tr begins and ends every new Table Row. Look again at the table above; there are two rows in the table, thus there are two sets of tr tags. td begins every cell, and stands for Table Data. There are four cells, and four sets of <td> tags.

You must close all of these tags, or the table will not display correctly in some browsers. But what of the attributes of the <table> tag?

border sets the width of the borders of the table, the gray lines. Here it is set to 1 pixel, but you can put any width you'd like. border="0" would make the border invisible. cellspacing sets the amount of space between the cells.cellpadding sets the amount of space between the border and the data inside the cell.

Play around with the numbers, you can do a lot with them. You can also align things how you want in a cell, as shown below:align="center"
align="left"
align="right"
valign="top"
valign="middle"
valign="bottom"align sets the horizontal alignment, while valign sets the vertical. These are always set in the <td> tag, like this:

<td align="center" valign="middle">content</td>

Two more commands you can use with a table:

colspan	rowspan
1 2 3	1 2 3
<table> <tr> <td colspan="2">1</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table>	<table> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> </table>

As you can see, colspan makes a row stretch across however many columns you specify, and rowspan makes a column stretch across the specified rows. It takes a while to get the hang of, but is not hard at all!