HyperText Markup Language/Tables

To do:
Complete COLGROUP and COL.

Tables are used for presenting tabular data. They can be inserted anywhere on the page, even within other tables. We will be looking at creating a basic table and then adding lots of tags to it so we can see just what the outcome will be. Experimentation is the name of the game here. The tags most useful when creating tables are <table> - table, <tr> - table row, <td> - table data, and <th> - table heading.

Minimal tables

First let us have a look at quick example:

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

Every table begins with a <table> tag and ends with a </table> tag. In the table tag, you can define the attributes of the table, as you will see later.

The table contains rows, each begins with the <tr> table row tag and optionally ends with the </tr> tag. Rows must be inside tables.

The rows contain cells, each begins with the <td> table data tag and optionally ends with the </td> tag. Cells must be inside rows.

If you put a table cell outside a row, or if you forget to close a cell, or row, or table it will have unpredictable results. Text intended to be in the table may appear at an unexpected position, outside the table. At worst, the entire contents of the table will not be displayed.

For example, in IE and Firefox:

A cell outside a row is treated as in a separate row at the vertical position concerned
All content outside cells, whether in a row or not, is put before the whole table, in the order in which it occurs; IE puts each item on a new line; Firefox does not, but puts in some cases a blank space between items.

If the optional </td> and </tr> are not put, the above refers to content before the first row, and in rows before the first element only. Note that </table> is required; if it is forgotten all following content is considered part of the last cell of the last row, even further tables.

Task - Create a table

Open your default.htm and save it as table.htm in the appropriate folder
Create this HTML code in the body of the document

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

Save the file and view it in the browser.

The result is:

Food	Price
Bread	$2.99
Milk	$1.40

It doesn't look too much like a table yet, but we'll add more soon.

Note: This table is made up of two rows (check out the two <tr> tags) and within each row there are two data entries (the two <td> tags)

You might compare a table with a spreadsheet. This one has two rows and two columns making 4 cells containing data. ( 2 rows x 2 columns = 4 cells )

Caption and headings

Let us start with a quick example:

<table>
<caption>Formulas and Results</caption>
<tr><th>Formula</th><th>Result</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

Captions are useful for defining or describing the content of the table. They are optional.

To add a caption to a table, enter the caption element after the opening table tag, with the text of the caption inside the element, as shown in the following.

<table>
<caption>Formulas and Results</caption>
...
</table>

Captions are usually displayed outside the border of the table, at the top. The exact appearance and placement of captions is subject to CSS styling.

Table headings are a way of defining the contents of the table columns. They are usually only used in the first <tr>, table row.

Instead of using a <td> for the cell, we use a <th>.

By default the text in table headings is displayed bold and centered.

The Syntax is: <tr><th>text</th><th>text</th></tr>

Task - Table Caption and Headings

Open your table.html file
Add your own caption to the table
View the result
Add the table headings ITEMS and $ PRICE for the table
View the result

Borders

A border around a table is optional: sometimes they help to define the table, and sometimes the table looks better without them.

However having borders turned on while you are creating the table is a very good idea since it makes tables much easier to work with. You can get rid of the border once the table is completed.

The border of this table is 1 pixel wide.

The border on this table is 5 pixels wide.

The default value is 0 (i.e. borderless).

Border is an attribute of the table tag. The syntax is:

<table border=X> where X is the border size in pixels.

You can also specify a border colour, although this is an Internet Explorer tag only. The syntax is:

Note that it is not recommended to specify the border colour using HTML - it is much better to use CSS for this purpose.

Task - Create a border around a table

Open your table.htm file.
In the <table> tag, add border="2"
i.e. <table border="2">.
Save the file and view it.
Change the size of the border (i.e., try 0, 10, and try a crazy number).
View the results as you go.

Did you spot that only the outside border gets bigger?

Height and Width

A table, by default, will be as large as the data that is entered into it.

We can change the overall height and width of the table to get it the size we want.

It is possible to give the size in absolute pixels, or as a relative percentage of the screen size.

The syntax is: <table height=??? width=???> where ??? is the size in pixels or percentage.

It is also possible to control the dimensions of individual table cells or rows.

e.g. <tr height="80"> <td width="50%">

It is possible to mix absolute and relative heights and widths.

Note that you can do the same thing with CSS by changing the padding.

Task - Define the size of a table

Open your table.htm file.
In the <table border="2"> tag, we will add the height and width
e.g. <table border="2" height=200 width=300>
Save the file and then view it. Resize the browser window, and watch what happens - the table size stays the same.
Experiment changing the measurements and view the file again.
Now replace the pixels measurements with percentages
e.g. <table border="2" height="40%" width="50%">
Save the file and then view it. Resize the browser window, and watch what happens - this time the table changes size as the window size changes.

Cell Spacing and Cell Padding

the difference between cellpadding and cellspacing

Cell Spacing is the number of pixels between the table cells.

Cell Padding is the pixel space inside the cells. i.e. the distance between the information and the sides of the table cells.

Both these options are attributes of the <table> tag

e.g. <table border="1" cellspacing="0" cellpadding="0">

Note: The default for both is 2

Task - Cell Spacing and Padding

Open your table.htm file. Make sure that your table has a large height and width set (e.g. 300x200) - if not then you won't be able to see the effect of cellpadding and cellspacing.
Experiment with changing the size of the table border, cellspacing and cellpadding. Try different combinations of 0, 1, 5, 10,etc.
View the result each time

Alignment of table cells

The default alignment of the contents of table cells is left and vertically centered.

If you want to change the alignment of cells, it has to be done individually for each cell. The align command is included in the <td> tag. You can also change the alignment of an entire row by specifying the alignment in the <tr> tag

Horizontal alignment
Syntax:
<td align="position"> where position is left, center, or right
or
<tr align="position"> where position is left, center, or right

Vertical alignment
Syntax:
<td valign="position"> where position is top, middle or bottom
or
<tr valign="position"> where position is top, middle or bottom

You can also include align and valign commands in the table row tag and in the table tag.

Note: Including align="left" or align="right" in the table tag does NOT align the contents of the table. Instead it aligns the whole table on the page. i.e., it makes the text outside the table wrap around the table.

Task - Alignment of table cells

Open your table.htm file
Change the alignment of the table cells so that they look like:

bread	$2.99
Milk	$1.40

or

bread	$2.99
Milk	$1.40

Experiment with other vertical and horizontal alignments.
View the result each time

Row span and column span

Every row must have the same number of table datas, occasionally table datas have to span more than one column or row. In this case the tags colspan and/or rowspan are used - where they are set to a number.

			<-- This row has three table datas
			<-- This row has two. The first uses `colspan="2"`
			<-- This row has three table datas, but one spans two rows because it uses `rowspan="2"`
			<-- This row has only two table datas, because its first is being taken up.

Syntax:

<td colspan=X> where X is the number of columns that the cell spans across.
<td rowspan=X> where X is the number of rows that the cell spans across.

Task - Row span and column span

Open your table.htm file.
Experiment with making one table cell span across multiple rows.
Experiment with making one table cell span across multiple columns.
View the result each time.

Background colour and images

It is possible to give each table cell, (or row, or table) a different background colour.

Syntax:

<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">

where colour is a colour name or hexadecimal code.

Note: table background colours only display in version 3 browsers and above, and they may not print correctly.

Note: it is not recommended to specify background colours using HTML - it is much better to use Cascading Style Sheets for this purpose.

A background image is another modification of the appearance of a cell, row, or a complete table. Again these only display in version 3 browsers and above, and they may not print correctly.

Syntax:

<td background="filename">
<tr background="filename">
<table background="filename">

where filename is the path and filename of the background image.

Note: it is not recommended to specify background images using HTML - it is much better to use CSS for this purpose.

Task - Background colour and images

Open your table.htm file.
Experiment with changing the background colour of a table cell, a table row, and the table itself.
Add a background image to a table cell, a table row, and the table itself.
View the result each time.

Column groups

To specify a given format for a table column, you can use the <col> and <colgroup> tags. These tags are located at the top of the table, and specify the default format for the given column.

With the <col> tag, the first instance indicates the formatting for the first column, the second for the second column, and so on. <colgroup> works similarly, but also includes the span tag to cover multiple columns.

<table>
 <caption>Project Completion</caption>
 <colgroup>
  <col span="3" style="background-color:red">
  <col style="background-color:yellow">
  <col span="2" style="background-color:green">
 </colgroup>
 <tr><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th></tr>
 <tr><td>3%</td><td>17%</td><td>40%</td><td>55%</td><td>86%</td><td>100%</td></tr>
</table>

Note:
Chrome, Firefox, and Safari only supports the span and width elements of these tags.

Abusing Tables

Before CSS took off, tables were commonly misused to make page layouts. While you may see old sites designed this way, it is now considered bad practice to use tables in place of CSS.

Consider when and when not to use a table. For example, a single column table is almost always better off implemented as a list.

Summary

In this module you learn how to:

Create and customize HTML tables,
Control their dimensions and appearance,
Add a caption to a table,
Control the alignment of the table contents,
Various attributes of the table tags.