Information Services Web development centre

Tables

The examples on this page demonstrate the styling of html elements as defined in the university style sheets.

Table with the "grey" style

A table with the "grey" style applied appears with a midgrey border and light grey header. Cell layout defaults to left and top alignment. The following examples demonstrate how a table appears with the "grey" style applied using single and multiple table headers.

Note: The 'grey' style in this implementation of the template no longer hides table captions.

Example:

table sample to demonstrate the grey style
Name Title Phone Email
Smith Professor 8344 0755 sample@unimelb.edu.au
Ngyen Mr 8344 0575
8344 0566
8344 6575
sample2@unimelb.edu.au
Curr Ms 8344 0557 sample3@unimelb.edu.au

The code for this table looks like this (truncated):

<table class="grey" summary="table sample to demonstrate the grey style">
<caption>table sample to demonstrate the grey style</caption>
   <tr>
   <th id="name">Name</th>
    <th id="title">Title</th>
    <th id="phone">Phone</th>
    <th id="email">Email</th>
  </tr>
  <tr>
    <td>Smith</td>
    <td>Professor</td>
    <td>8344 0755</td>
    <td><a href="#">sample@unimelb.edu.au</a></td>
  </tr>
</table>
top of page