HTML Table Fundamentals
Table content goes here...
Next to the hyperlink
, one of the most widely used HTML elements
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
element which uses both a start and an end tag. The
tags are required to contain at least one set of
tags which themselves are required to contain at least one set of
tags. Each set of
tags creates one table row
while each set of
tags creates one table data
The following represents an HTML table in its most fundamental state defining one row which itself contains one data cell:
<table><tr><td>Cell content goes here... </td></tr></table>
This will merely create a 'box' around the cell content and will perform like a block element
. Using the
attribute in the
tag we can establish a decorative frame around the table whose thickness is defined in pixels:
Example 2 - SOURCE CODE
<table border="5"><tr><td>Cell content... </td></tr></table>
Example 2 will produce the following result on your web page, i.e. a basic table with a 5 pixel border drawn around it:
Example 2 - RESULT
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:
Example 3 - SOURCE CODE
<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>
<tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr>
<tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td></tr>
And this will produce the following effect on your web page:
Example 3 - RESULT
|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
tag to control the background and border color of your table
. These are covered next...