Learning to write a web page

 ______________ 
(__ ________ __)
  ( )      ( )  
  | |      | |  
  ( )      ( )  
   U        U   

 ______________ 
(__ ________ __)
  ( )      ( )  
  | |      | |  
  ( )      ( )  
   U        U   

Tables are a nice way of presenting lots of information. You have probably learnt about tables in numeracy lessons.

Tables have rows (horizontal, from left to right), and columns (vertical, from top to bottom) of data. In HTML, each row is described in turns, each enclosed by <tr> tags (table row).

The first row in a table usually contains the titles of the columns in the table. These pieces of information come in the <th> tags, the table headings inside the first row.

The following rows contain the actual table data, in <td> tags.

Time for example 1:

This table is produced with the following HTML:

<table>
<tr>
<th>heading 1: name</th>
<th>heading 2: class</th>
</tr>
<tr>
<td>data item 1 for 'name': Janet</td>
<td>data item 1 for 'class': Yr 6</td>
</tr>
<tr>
<td>data item 2 for 'name': Jeffrey</td>
<td>data item 2 for 'class': Yr 6</td>
</tr>
<tr>
<td>data item 3 for 'name': Jenny</td>
<td>data item 3 for 'class': Yr 5</td>
</tr>
<tr>
<td>data item 4 for 'name': John</td>
<td>data item 4 for 'class': Yr 5</td>
</tr>
</table>

In a 'real' table, you would obviously not include all the words describing the contents of the table (like 'heading 1', and 'data item etc.'). But it makes it easier for this course to have them here.

The table is neatly organised: all the data items neatly arranged vertically, even though the name 'Jeffrey' is longer than the others. That is something you could only do easily with a table. There are a few things you may not like about it, however. For example the space between the first and the second column: the word 'Jeffrey' is very close to the word 'data', which may be confusing. And the headings are central above the column, rather than aligned with the data items. But there are ways around everything!

Table borders, spacings and paddings

<table border>

The boxes in the table can get a visible line around them by adding the attribute border to the <table> tag, with a value:

<table border="1">

Example 2:

The border attribute, even when it is not present, is responsible for the little margin in example 1 above.

<cellspacing>

The boxes, also called cells, can be separated by more than the default spacing as in the previous tables. The attribute for this is the cellspacing, and a value of 5 gives:

Example 3:

This table has a border of 1, to show the spacings visibly. With a table border of 0 you would still have the words further apart, but it is harder to show for the course, so...

<cellpadding>

You may feel that the data items are crammed into their boxes a little bit, and would like more space inside the cells, i.e. you would like a bit of padding around your data items. This is done with the attribute cellpadding. A value of 5 (with a table border of 1 to show the effect) gives:

Example 4:

Table width

When left to the browser to sort out, the width of the table depends only on the amount of information present. If there is lots, the table will fill the width of the browser window (as in example 2). If there is not, it will only fill part of the window, as in the other examples. The width of the table can be influenced with the table width attribute, which can take values in percentages or numbers-of-pixels.

Exercise

1. Make a table with the data as above (just the names and the classes), but taking up the whole width of the window.

   Click

   here

   to see the result, in the box below.

2. Make a table with a lot of data (as in example 2), but squashed into only 300 pixels.

   Click

   here

   to see the result, in the box below.

Table alignment

Horizontal alignment

A table can be lined up (aligned) in the browser window by adding the align attribute (values left, center and right) in the <table> tag.

By default, a table heading sits in the centre of a table cell, with equal amounts of white space to the left and right of it. Table data items, on the other hand, are aligned on the left-hand-side of the cells. Sometimes, however, it may be more suitable to have the heading perfectly aligned with the data items, on the left of the cells. Or to have the second column of data items aligned on the right-hand-side of the cells, rather than on the left. The align attribute can have the values left, center (note the American spelling) or right.

Vertical alignment

In example 2 above, the last row of data items (with the explanation of the different borders and cellspacings) shows the default vertical alignment of the items: in the centre of the cells, with equal amounts of white space to the top and bottom of the text. This looks very odd if the amounts of text are not the same, but can be adapted with the valign attribute (which can have top, center and bottom as values). In the case of example 2, it would have looked better to vertically align the data items at the top of the cells.

Text across more than one table cell

Sometimes you may have a table heading or data item which should cover more than one cell at a time, either horizontally or vertically. This is done with the colspan and rowspan attributes, which as values can have a number up to the total number of columns or rows in the table. You can use this to create a table title which runs across the full width of the table, by using something like:

<th colspan="2">Pupils and their classes in Jalapeño School</th>

You can have as many rows of headings as you like.

Exercise

Make a table with the title 'Pupils and their classes in Jalapeño School' across the top of the whole table, as well as the table headings 'Name' and 'Class', and the names and classes above as data items.

Fonts

Table headings are bold by default. If you do not like this, you will have to use ordinary <td> cells for your headings, because there is no way to take away the bold from the heading. You can, however, add font styles (as in size of letters, or italics) to headings. This also works for the data cells, which can be made bold, italic, larger or smaller (and coloured!) whenever you wish. If you have a data item which is particularly important, you can make it more obvious by turning it bold. It is not a good idea to use a <th> in the middle of a table; it is confusing, although a browser may show exactly what you were hoping for if you did it anyway.

Tables for layout

Tables are particularly suited for getting pictures and text exactly where you want them, relative to each other. This is quite hard to do in the ordinary way, as described in the 'Pictures' step of this web course. But put a picture in one table data cell, and the text next to it in another, and you can play around with the alignment of the cells until you are happy. Officially, allegedly, you are not supposed to use tables for this, but I can not see why not, as it is very useful and does not seem to do any harm.

Back to contents

What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces