The Basics of Tables

There are three basic elements which make up a table : the table itself, table rows - which run horizontally; and table data cells, which split the rows into individual units. The tags for these are:

Table:	<table></table>
Table Row:	<tr></tr>
Table Data:	<td></td>

There also two other useful tags that are part of the 5 most common table elements. There is the Table Header element, which makes the text bold within a data cell and the Caption tag, which add a caption to your table - either above or below.

Table Header:	<th></th>
Caption:	<caption></caption>

Let's start with a simple table with two Table Rows that each have two Table Data Cells in it.

<table border="1">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>


This is what it looks like:

Data 1	Data 2
Data 3	Data 4

As you can see the first Table Row holds Table Data cells 1 and 2. The 2nd Table Row holds Table Data cells 3 and 4. Table rows always run horizontally. Columns, which run vertically, are created by stacking Table Rows.

Notice the border attribute in the table tag. A value of "1" turns the border on. A value of "0" or eliminating this attribute turns the border off. The width of the border is specified in pixels.

Lets add some table headers and a caption to our table:

Here's the code:

<table border="1">
<caption>This is a Caption</caption>
<tr>
<th>Table Head 1</th>
<th>Table Head 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>


This is a Caption

Table Head 1	Table Head 2
Data 1	Data 2
Data 3	Data 4