HTML: Tables

The Table element

Tables are a really important feature in HTML. The vast majority of web sites you look at make use of tables.

HTML tables were designed to function like tables in Word or anywhere else, i.e as a way of presenting data, e.g.

Number of people with green shoes in Dublin streets
over a 12 hour period

However, HTML tables have another, unintentional use, which is of huge importance to web designers and makers of web pages.

Here is another example of the use of tables:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec arcu. Mauris velit ligula, adipiscing rutrum, lacinia at, fermentum nec, quam. Mauris rutrum nisl ac enim. Aenean a dui id sem convallis mattis. Etiam mauris massa, viverra sed, dignissim nec, posuere vel, ipsum. Vestibulum molestie. Vivamus in mi nec elit sagittis pretium.

It is easier to see where the table is if the borders of the table are visible:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec arcu. Mauris velit ligula, adipiscing rutrum, lacinia at, fermentum nec, quam. Mauris rutrum nisl ac enim. Aenean a dui id sem convallis mattis. Etiam mauris massa, viverra sed, dignissim nec, posuere vel, ipsum. Vestibulum molestie. Vivamus in mi nec elit sagittis pretium.

HTML tables allow us to format pages in an aesthetically pleasing and easy-to-read form.

Using HTML tables we can:

• Create margins. Margins allow you to control the amount of "white space" on the page where the eye can rest. They are also used to control line length. Really long lines of text are much harder to read than shorter ones. The optimum line length is 10-12 words (check this).
• Run images and text side by side, as shown in the example above.

Creating a table in HTML

A HTML table comprises a series of nested HTML elements. The outermost element is the TABLE element:

The table element

<table>
</table>

As we have seen with other HTML elements, the <table></table> tags indicate to the web browser that everything between these tags is in the form of a table.

The table element has a number of different attributes. Here are the most common:

The table row <tr></tr>

This is the table row element. Like tables in Word, or anywhere else, tables in HTML are made up of rows and columns. The two tags of the table row element tell the browser that everything between them is on the same row of the table.

The table data cell <td></td>

The table data cell is the basic component of the table. For example, in the green table above with the picture of the tree, there is one table row containing two table data cells - one containing the text, and the other containing the picture. Each row of your table must contain the same number of data cells, or explicitly declare that data cells have been merged.

The t able data cell element has a number of attributes. Here are the most common:

<table width="400" border="1" cellpadding="20" cellspacing="0">

<tr><td><p>This is a table with three columns</p></td><td><p>This data is in the second data cell.</p></td><td><p>This data is in the third data cell.</p></td></tr>

<tr><td colspan="2" ><p>In this row, two data cells have been merged across the width of two columns.</p></td><td rowspan="2" ><p>And here, two data cells have been merged across the depth of two rows. </p></td></tr>

<tr><td><p>Confusing, isn't it? </p></td><td><p>And that's the end of our introduction to tables. </p></td></tr>

</table>

Putting it all together

You have learned enough HTML now to make a simple promotional web site for your practice, similar to the one we made in Blogger. Here is one I made earlier.