WEB DESIGN SKILLS Module Study Guide 2008/09 Copyright © Thames Valley University 2008

---

Session 6

Tables

---

On this page:

• Tables
  • Tables in HTML
  • Tables in Dreamweaver
• Exercises

---

Tables

Tables are a specific feature of web pages used in two different ways:

1. To show tabular data. Any information which would normally be shown on paper as a table can be similarly represented on a web page.

   For example:

   Villa prices 2008

   Dates	1bed	2 beds	3 beds
   Jan 1 - March 18	£250	£350	£420
   March 19 - June 5	£400	£470	£520
   June 6 - July 20	£460	£540	£590
   July 21 - Aug 30	£530	£600	£660
   Aug 31 - Oct 7	£400	£470	£520
   Oct 8 - Dec 15	£250	£350	£420
   Dec 16 - Dec 31	£460	£540	£590

2. Tables can also be used to position areas of text, images and other items on a page. When used in this way, the border between the cells is often deleted, so the effect can be something like this:

   

   [Note: The use of tables for layout purposes is not considered to be 'good' design. The approved way to achieve the same effect is by the use of style sheets. The use of tables for layout, however, is still widespread, mainly because the implementation of table layout in style sheets is still patchy in various browsers.]

Tables in HTML

The main tags involved in the use of tables are:

<table> ... </table> - the start and end of the table
<tr> ... </tr> - the start and end of a row of the table (Table Row)
<th> ... </th> - the start and end of a cell containing header information (Table Header)
<td> ... </td> - the start and end of a cell containing data (Table Data)

Each row (<tr>) must be inside a table, and each cell (<th> or <td>) must be within a row.

The 'Villa prices' table above looks like this in HTML:

<table width="60%" border="1">
<caption align="top">Villa prices 2004</caption>
<tr><th>Dates</th><th>1bed</th><th>2 beds</th><th>3 beds</th></tr>
<tr><td>Jan 1 - March 18</td><td>£250</td><td>£350</td><td>£420</td></tr>
<tr><td>March 19 - June 5</td><td>£400</td><td>£470</td><td>£520</td></tr>
<tr><td>June 6 - July 20</td><td>£460</td><td>£540</td><td>£590</td></tr>
<tr><td>July 21 - Aug 30</td><td>£530</td><td>£600</td><td>£660</td></tr>
<tr><td>Aug 31 - Oct 7</td><td>£400</td><td>£470</td><td>£520</td></tr>
<tr><td>Oct 8 - Dec 15</td><td>£250</td><td>£350</td><td>£420</td></tr>
<tr><td>Dec 16 - Dec 31</td><td>£460</td><td>£540</td><td>£590</td></tr>
</table>

The width of the border can be defined as an attribute of the <table> tag.

e.g. <table border="1">

(Values are in pixels unless otherwise stated. A value of 0 (zero) indicates an invisible border.)

The <table> tag may also have a 'width' attribute which defines how much of the page will be taken up by the table. This may be an absolute value (pixels) or a percentage value.

e.g. <table width="260">
or <table width="60%">


Notice also the <caption> tag.

The width of columns may be set by using the width attribute in any table cell:

e.g.

<table .....>
<tr>
<td width="26">
etc.

Take care not to confuse matters by specifying different widths for two cells in the same column. It is probably best to specify widths only in the top row.

Percentage values are recommended for width, as this allows the browser to scale the table according to the size of the screen window.

Cells can be made to span more than one row or column by using the 'rowspan' or 'colspan' attributes.

e.g. <td colspan="3"> or <td rowspan="2">

In these cases it is very important to ensure that the table has the right number of cells in each row and in each column.

A table using these features might look like this:

Tables in Dreamweaver

Creating tables in Dreamweaver is much simpler, of course, but it is easy to become confused as to what is actually happening, and sometimes it is necessary to look at the HTML code to sort out the mess you have created!

Remember that although Dreamweaver is supposed to be a WYSIWYG (What You See Is What You Get) editor, you will not get a true idea of what your web page will look like until you view it on a browser.

Dreamweaver has three ways of viewing tables: 'standard view', 'expanded view' and 'layout view'. The 'standard' and 'expanded' views are available in the 'Insert' toolbar at the top. (Select 'Layout' and then choose 'Standard' or 'Expanded').

'Layout' view is only available by selecting 'View > Table mode > Layout mode'.

Under 'standard view', a table can be created by using the 'Insert/Table' menu option. This will prompt you for the number of rows and columns you require, the width, the border and a couple of other parameters - 'cell padding' and 'cell spacing'. (These relate to the separation between one cell and the next.) You can also specify which cells are to appear as 'headers' and add an optional caption and summary.

In 'layout view', tables can be created by drawing them on the screen, using the 'layout cell' and 'layout table' buttons. These can be found in the 'Layout' tag of the 'Insert' toolbar. This allows much more complex tables to be created, where the cells can be virtually anywhere on the screen. The downside is that a complex table may be created where a simple one might have sufficed. 'Layout view' can also be used to modify tables which have been created in 'standard view' (or in some other way).

---

Exercises

1. Create a web page which uses a table to display data. e.g:
   • Your own timetable
   • A train timetable
   • A price list
   • A table of exam results
2. Create a web page which uses an invisible table to layout images and areas of text.
3. Use Dreamweaver's 'layout' mode to create a table such as the one shown immediately above. Put some text into each of the 'active' cells. Switch to Code view and see how Dreamweaver has implemented this table.

 

---

Maintained by Alan Rolfe

Last updated February 23, 2009