HTML Table Fundamentals

Next to the hyperlink, one of the most widely used HTML elements is the table element. Take a peek at the source code of any big corporate website and you are bound to see a plethora of tables, table rows and table data cells, and then nested inside many of the cells you will find even more tables with their respective rows and cells.

Effectively then, one would imagine to find most of these web pages stuffed from margin-to-margin with tabular data but such is not the case, or rather, to the untrained eye, the use of tables is not readily apparent. This is because tables are used on web pages primarily for layout and design as opposed to being used for their original purpose, i.e. presenting a collection of related data in neatly organized rows and columns.

Thus, by way of introduction, we will focus on exploring the use of HTML tables as they were originally intended, or in other words, using tables as tables since this will serve better to illustrate exactly how they work.

HTML Table Codes

Tables are created using the table element which uses both a start and an end tag. The <table>...</table> tags are required to contain at least one set of <tr>...</tr> tags which themselves are required to contain at least one set of <td>...</td> tags. Each set of <tr>...</tr> tags creates one table row while each set of <td>...</td> tags creates one table data cell.

The following represents an HTML table in its most fundamental state defining one row which itself contains one data cell:




This will merely create a 'box' around the cell content and will perform like a block element. Using the border attribute in the <table> tag we can establish a decorative frame around the table whose thickness is defined in pixels:


Example 2 will produce the following result on your web page, i.e. a basic table with a 5 pixel border drawn around it:

Cell content...

The basic HTML table model is said to be 'row primary' in that the table rows are specified explicitly while columns are implied by the number of table data cells appearing in the rows. The source code in Example 3 will create a table having three rows and two columns:




And this will produce the following effect on your web page:

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2
Row 3, Cell 1	Row 3, Cell 2

There are a number of attributes which you can apply to the <table> tag to control the background and border color of your table. These are covered next...