Website Building → Tutorials → HTML: Tables! (Part 7)

Tables can be complicated in their own right and can justify a whole tutorial on there own, therefore we have decided to use this section to provide a basic foundation for tables and then give you links to other more complete ones.

Tables are formed as follows:

<table>
<tr>
<td>
Oranges
</td>
</tr>
</table>

Opens table
Starts Table Row
Starts Table Cell
Content of cell 1
Ends Table Cell
Ends Table Row
Ends Table

The above looks like this:

Oranges

Now for some alterations, for a more table-like appearance:

<table border="1">
<tr>
<td>Oranges</td>
<td>Apples</td>
<td>Pears</td>
</tr>
<tr>
<td>$0.80</td>
<td>$1.20</td>
<td>$1.50</td>
</tr>
</table>

The above looks like this:

Oranges	Apples	Pears
$0.80	$1.20	$1.50

The page you are looking at now is structured on a complicated set of embedded tables! Check out the page source (View>Source in your browser) to take a look!

For more help with tables, we recommend: Html Goodies Table Tutorial

→ Some more HTML Tags →