Tables

Tables are a convenient way of aligning data.

1. <TABLE> Marks the beginning of the table.
2. <TR> Stands for Table Row
3. <TH> Stands for Table Header.
4. <TD> Stands for Table Data and defines the contents of a single cell.

<TABLE>, <TR>, <TD> Tags

Try out this table, and save it as ‘Table1.html’. It has 3 columns and 3 rows.

Exercise

Table Attributes

There are various attributes attached to <TABLE>:

1. Border - border of the table
2. Cellspacing - space between cells, in pixels
3. Cellpadding - space within cells, between text and edge of cell, in pixels

Exercise

Note that in XHTML the attribute contents must be surrounded by quotation marks

Table Headers - <TH>

Headers are used when the data table has named columns.

Exercise

Type in the following table code.

Exercise

Modify the example above to add in a column for Year. Multimedia Principles is in year 1, Professional Team Brief is in year 2.

Table Areas

There are 2 main table areas. The table header and the main body of table information. These are defined by <THEAD> and <TBODY> tags and simply surround the headers and data areas respectively. This is particularly useful for long tables, where the header information is displayed on every page.

Exercise

Add in <THEAD> and <TBODY> information.

Table Summaries

Table summaries are used to provide information about the structure of the table. This is particularly useful for screenreader users who cannot see the visual layout of the table. Summaries are attributtes of the Table tag.

Exercise

Add in a table summary.

Exercise

Modify the summary above to reflect the extra 'Year' column.

Table Captions

Captions should provide enough information to allow a screenreader to decide whether to read the table or not. Caption is a tag.

Exercise

Add in a Caption tag.

The next thing to learn is how to make your pages look pretty by adding colour.

created & designed by Vivienne Trulock for ilikecake.net

. . . .