Practical Task 4 – Tables

HTML tables were originally created to display rows and columns of tabular data. However, they are increasingly used to control the layout of information on a page.

The table tag defines the beginning and end of a table.  Rows within the table are defines with a table row <tr> tag.  Cells within a table row are defined with a table data <td> tag.  A table cell can contain any content, including another table. Table header cells <th> may be used in place of table data cells.  They serve the same function, but are rendered differently (usually in bold, centred text).  A simple table, therefore, might be coded as follows:

<table border>
<!-- A border attribute makes the border visible -->
<tr>
            <td>Cell one of row one</td>
            <td>Cell two of row one</td>
</tr>
<tr>
            <td>Cell one of row two</td>
            <td>Cell two of row two</td>
</tr>
</table>

…and rendered like this:

Link 1	Link2
Link 3	Link 4
Link 5	Link 6

Activity: Create a valid html or xhtml file and reproduce the above table. Imagine it is a list of menu items to go on your home page.

Formatting Tables

Table:        There are several attributes for the table tag that enhance table formatting – we have already seen the border tag at work.  The border tag can take values (in pixels) from 0 upwards (the default is 0). E.g. <table border=”5”>. Other attributes for table include:

Attribute	Description
bgcolor	Specifies a background colour for the whole table (can be specified in RGB or colour name format, e.g. bgcolor=”#ffff00”.
cellpadding	Sets the amount of space (in pixels) between the cell’s contents and the border of the cell (default = 1).
cellspacing	Sets the amount of space between cells (default = 2).
hspace and vspace	The same as for the img tag.
width	Specifies the table width. May be expressed either in pixels or as a percentage of the page width, e.g. width=”100” or width=”33%”.

Table row:         Table row <tr> can also take attributes:

Attribute	Description
align	left, right or center. Aligns the contents of cells within the current row.
bgcolor	Specifies a colour to be used in the row. This overrides any colour specified in the table tag.
valign	top, middle, bottom or baseline. Specifies the vertical alignment of the contents of cells within the row.

Table data cell: These attributes apply to both the <td> and <th> tags.

Attribute	Description
align	left, right or center. Aligns the contents of the current cell. Overrides any alignment specified at table row level.
bgcolor	Specifies a colour to be used in the cell. This overrides any colour specified at table row level or in the table tag.
height	Specifies the height of the cell in pixels or as a percentage of the table height. The height specified for cell one will be applied to all cells in the row.

valign

top, middle, bottom or baseline. Specifies the vertical alignment of the contents of cells within the row.

width

Specifies the width of the cell in pixels or as a percentage of the table width.

Activity: formatting a table 1

Activity: formatting a table 2

 

Images in Tables

Table cells may contain images as well as text. This can be a useful way of controlling how text flows around an image:

Text to the left of the image (right, bottom aligned)

My  Picture   Text below the image (centre aligned)

Text to the right of the image (left [default], top aligned)

This is produced using the following HTML code:

<table cellpadding=”5”>
<tr>
      <td valign="bottom" align="right">Text to the left of the image (right, bottom aligned)</td>
      <td align="center" width="200"><img src="mypicture.gif" alt="My Picture" width="150" height="50"></td>
      <td valign="top">Text to the right of the image (left [default], top aligned)</td>
</tr>
<tr>
      <td>&nbsp;</td>
      <td align="center">Text below the image (centre aligned)</td>
      <td>&nbsp;</td>
</tr>
</table>

It is not immediately obvious to the page viewer that a table is being used to achieve this control because the table’s border attribute is not set.  Note how alignment and width attributes are used to gain precise control over the relationship between image and text.

Row and Column Spanning

Table cells can occupy the space of more than one cell in a row or column:

Module	2006/7		2007/8
	Semester 1	Semester 2	Semester 1	Semester 2
COMP1114	Wed am	Mon pm	Wed eve	Fri am
COMP1121	Mon am	Fri pm	Tue am	Fri pm
COMP1111	Fri am	Wed pm	Not taught

This table uses the colspan and rowspan attribute of <td> and <th> to create cells that span rows (e.g. ‘Module’) and columns (e.g. ‘2006/7’). By looking carefully at the table we can see that it is 5 columns wide by 5 rows deep. The HTML code for the above table is as follows:

<table border="3" cellpadding="5">
<tr bgcolor="#cccccc">
      <th rowspan="2">Module</th>
      <th colspan="2">2006/7</th>
      <th colspan="2">2007/8</th>
<!—only 3 cells specified in row 1 because cells 2 and 3 span 2 columns each -->
</tr>
<tr bgcolor="#ffff00">
      <th>Semester 1</th>
      <th>Semester 2</th>
      <th>Semester 1</th>
      <th>Semester 2</th>
<!—only 4 cells specified in row 2 because cell 1 of row 1 spans 2 rows -->
</tr>
<tr>
      <th bgcolor="#ffff00">COMP1141</th>
      <td>Wed am</td>
      <td>Mon pm</td>
      <td>Wed eve</td>
      <td>Fri am</td>
</tr>
<tr>
      <th bgcolor="#ffff00">COMP1121</th>
      <td>Mon am</td>
      <td>Fri pm</td>
      <td>Tue am</td>
      <td>Fri pm</td>
</tr>
<tr>
      <th bgcolor="#ffff00">COMP1111</th>
      <td>Fri am</td>
      <td>Wed pm</td>
      <td align="center" colspan="2">Not taught</td>
</tr>
</table>

See how the very first <th> tag has an attribute of rowspan=”2”.  This tells the browser software to span it over two rows. The next cell has an attribute of colspan=”2”.  This makes it span over two columns.   Although these concepts are relatively simple, it can be quite difficult to work out exactly what is required when coding up complex table structure.  

It is suggested that you draw out any complex tables on paper before coding to help work out what you need to do.

Tables Used to Format Pages

Tables can be used to give a basic structure to your web pages. For instance: a lot of sites use a 2 area structure with a narrow ‘navigation’ band on the left and a wide area to the right containing the page’s main contents. Other pages will also include a ‘header’ band spanning the full width of the page. For example:

 

The above page layout table was created with the following HTML:

<table width="100%" border="0" cellspacing="0"cellpadding="5">
<tr>
<td colspan="2" bgcolor="#ff9999"><b>Header band</b><br>Header
information</td>
</tr>
<tr>
      <td width="20%" bgcolor="#666666"><font color="#ffffff"><b>Left
column</b> <br>Navigation options
            <p>option 1<br>option 2<br>option 3<br>
option 4<br>option 5</font></td>
      <td bgcolor="#ccffcc"><b>Right column</b><br>
Main contents</td>
</tr>
</table>

Notice the use of zero cellspacing and border. The header cell spans two columns as it covers the whole page width. The background colours help to visually subdivide the page for the user.

The width of the first column is controlled by using the width attribute of the td element.  In this case we have chosen to make it 20% of the table width (the table is set to 100% of the page width).  We could have chosen to give the column an absolute width in pixels if we wanted more control over it (e.g. width=”150”). The width of the second column is not specified and therefore defaults to 80%.

It would be possible to further divide the page into columns or to insert sub-tables into the above table cells to increase control over how information is presented.

Activity:

1. Draw a diagram of how you would like your index page to look.
2. Have a go at using a table to contain the structure of your page.
3. Add a navigation bar
4. Add an image
5. Add a main heading

Well done – tables are not easy to master but they are still a good tool to use for drawing out a page layout.

 

 

Last updated on October 18, 2009   by Rowland Gallop     [ Close Window  ]