Using Tables as Tables
<table><tr><td>Table content goes here...</td></tr></table>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 Fundamentals
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:
Example 1
<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
border attribute in the <table> 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
| 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:
Example 3 - SOURCE CODE
<table border="5">
<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>
</table>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
<table> tag to control the background and border color of your table. These are covered next...
| INTRO | TOP | NEXT~> |
