Tables

Simple Tables

<table>
<tr>
<td>Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td>Section 3</td>
<td>Section 4</td>
</tr>
</table>

The HTML above will make a very basic table

You don't have to indent the &lt;td&gt; tag like I did, I only did it for organization.

A table begins with a <table> tag, and ends with a </table> tag. Within the table, you will have rows and columns. A new row is specified by a new set of <tr> / </tr> tags. For each column that you have, you will need a set of <td> / </td> tags. Unless you use the colspan attribute in a <td> tag, you need to have the same amount of <td> tags in each <tr> set.

You can put pretty much any HTML element into a table cell, even another table. But, tags used in one cell will not carry over to the next cells, and tags used outside of the table will not carry over to the inside of the table. For example, if you had an unclosed <b> (bold) tag outside of the table, the contents of your table will not be formatted bold, and if you had an unclosed <i> (italic) tag inside table cell 1, that italic tag will only format the contents of table cell 1 italic.

The Table Header

<table>
<tr>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
</tr>
<tr>
<td>The content of Section 1</td>
<td>The content of Section 2</td>
</tr>
<tr>
<td>The content of Section 3</td>
<td>The content of Section 4</td>
</tr>
</table>

The <th> tag works just like a <td> tag, and accepts all the same attributes, but the <th> tag usually makes it's content centered and bold.

This is what the above table looks like:

Cellspacing, Cellpadding, and Borders

<table cellspacing="10" cellpadding="20" border="3">
<tr>
<td>Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td>Section 3</td>
<td>Section 4</td>
</tr>
</table>

cellspacing: This is the space, measured in pixels, in between each cell.
cellpadding: This is the space, measured in pixels, between the edge of the cell, and the content of the cell.
border: This is the size of the border, measured in pixels, around the table.

This is the above table:

Table Size
When you specify the size of a table, you can use exact pixel measurements, or you can specify it to be a percentage of the browser window. You can specify the width and height of a table using the "width" and "height" attributes.

<table width="50%" height="300" cellspacing="10" cellpadding="20" border="3">
<tr>
<td>Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td>Section 3</td>
<td>Section 4</td>
</tr>
</table>

The above HTML will make a table like this:

But, you can also specify the width and height of the table rows and columns.

<table width="50%" height="300" border="3">
<tr height="20%">
<td width="30%">Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td>Section 3</td>
<td>Section 4</td>
</tr>
</table>

Which make this:

When you specify the width / height of each individual cell, there may come a time when you have three columns or rows, and you want one to be 20% width, one to be 30% width, and the last to be whatever left. Well, instead of saying width="20%", width="30%", and width="50%" in the individuals cells, you can say width="*" as the last specification. A "*" tells the table to make that cell fill up whatever space is left over.

Alignments, colspan, and rowspan

<table width="50%" height="300" border="3">
<tr valign="top" align="right">
<td>Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td valign="bottom">Section 3</td>
<td align="center">Section 4</td>
</tr>
</table>

The above HTML:

By default, the contents of each table cell will be aligned to the left, and vertically aligned to the middle.

<tr>.....</tr> You can set the align attribute to left, right, or center, and you can set the valign attribute to top, middle, and bottom. Setting align and valign in the <tr> will format each cell.
<td>.....</td> The align and valign attributes work the same way in the <td> tag, but this way you can set just the alignments of that cell.

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

</table>

The above HTML makes this:

Setting the rowspan in a <td> tag will tell the cell how many rows down it should span, and setting the colspan will tell it how many columns across.

Backgrounds
You can set the background of a table specifying either a color, or an image.

<table bgcolor="#9090B1">
<tr>
<td>Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td>Section 3</td>
<td>Section 4</td>
</tr>
</table>

Makes this:

And you can specify the color on an individual cell:

<table bgcolor="#9090B1">
<tr>
<td bgcolor="#6E6E85">Section 1</td>
<td>Section 2</td>
</tr>
<tr>
<td>Section 3</td>
<td bgcolor="#6E6E85">Section 4</td>
</tr>
</table>

Makes this:

You can also specify an image to tile in the background:

<table background="parts/fish.gif" width="200" height="200" cellspacing="4" cellpadding="10" border="5">
<tr>
<td><font color="#FFFFFF">Section 1</font></td>
<td><font color="#FFFFFF">Section 2</font></td>
</tr>
<tr>
<td><font color="#FFFFFF">Section 3</font></td>
<td><font color="#FFFFFF">Section 4</font></td>
</tr>
</table>

Makes:

<table background="parts/fish.gif" width="200" height="200" cellspacing="4" cellpadding="10" border="5">
<tr>
<td><font color="#FFFFFF">Section 1</font></td>
<td bgcolor="#6E6E85"><font color="#FFFFFF">Section 2</font></td>
</tr>
<tr>
<td bgcolor="#6E6E85"><font color="#FFFFFF">Section 3</font></td>
<td><font color="#FFFFFF">Section 4</font></td>
</tr>
</table>

Makes:

Adjusting The Border Color
You can use the bordercolor="......", bordercolorlight="......", and bordercolordark="......" attributes in the <table> tag.

Example:

HTML:

<table width="300" border="5" bordercolor="#0BFFE0" bordercolorlight="#85FFE0" bordercolordark="#4290FF">
<tr>
<td>001</td>
<td>002</td>
</tr>
<tr>
<td>003</td>
<td>004</td>
</tr>
</table>

The <caption> Tag
A recently intoduced tag, the <caption> tag, represents the caption of the table. The tag needs to be inside the <table> tag, but not inside the <tr> or <td> tags.
Captions by default are horizontally centered with the table, and they may have their lines broken to fit within the width of the table.

Example:

HTML:

<table width="300" border="1">
<caption>Table Caption</caption>
<tr>
<td>001</td>
<td>002</td>
</tr>
<tr>
<td>003</td>
<td>004</td>
</tr>
</table>

The Frame Attribute
This attribute effects the external border of the table, requires the border attribute to be set, and only works in Internet Explorer.

The frame attribute can be set to void, above, below, hsides, lhs, rhs, vsides, and box.

void removes all the external borders
above external borders at top of table only
below external borders at bottom of table only
hsides external borders at horizontal sides of table only.
lhs external borders at left hand edges of table only.
rhs external borders at right hand edges of table only.
vsides external borders at both left and right hand edges of table.
box displays a box around the table.

Example:
Table before frame attribute is set:

The same table with the hsides frame set:

The frame attribute is placed in the <table> tag like this: <table width="300" border="5" frame="hsides">

The <thead>, <tbody>, and <tfoot> Tags
The <thead>, <tbody>, and <tfoot> tags are typically used in conjunction with the rules attribute, which is set in the <table> tag.

These tags are completly optional, and rarely used since they are still somewhat new, Internet Explorer specific.

The <thead> tag identifies the head of the table, the <tbody> tag identifies the body section of the table, and the <tfoot> specifys the footer section.

After you specify the different sections of the table with these tags, you need to set the rules. The rule attribute can be set to none, basic, rows, cols, and all.

none removes all the internal rules
basic displays borders between the <thead>, <tbody> and <tfoot> sections
rows displays borders between rows
cols displays borders between columns
all displays all internal rules

Example

HTML:

<table border="5" width="400" frame="above" rules="cols">
<thead>
<caption>A Table</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</thead>

<tbody>
<tr>
<td>the content of section number 1</td>
<td>the content of section number 2</td>
</tr>
<tr>
<td>the content of section number 3</td>
<td>the content of section number 4</td>
</tr>
<tr>
<td>the content of section number 5</td>
<td>the content of section number 6</td>
</tr>
</tbody>

<tfoot></tfoot>
</table>

Table Examples
Notice this is a bunch of tables within a table? You can do anything with tables.

Main?