Page Anchor
Page anchors allow visitors to jump to a specific place in the current page or to jump to a specific place on another page. You usually use page anchors if you want a graphic or text to link half way down another page. That way your visitor doesn't have read all through the page to get to the bit their interested in.
To create a link that points to another place on the same page, you need to create two anchors:
- An anchor in the spot that you are going to jump from this anchor will
have the syntax:
<a href="#anyword">Jump to anyword</a> - A named anchor in the spot that
you are going to jump to this anchor will have the syntax:
<a name="anyword">TEXT</a>
The script below creates a link that points to another place on a different page, you need to create two anchors:
- Create anchor on Page A pointing to "here" on page B
<a href="home.html#here">Go to Here on Home Page</a> - Place a named anchor on home.html
<a name="here">Here</a>
Tables
Tables are used for information as well as for layout. You can stretch tables to fill the margins, specify a fixed width or leave it to the browser to automatically size the table to match the contents.
Tables consist of one or more rows of table cells. Here is a simple example:
<table border="1"> |
|
The table element acts as the container for the table. The border attribute specifies the border width in pixels. The tr element acts as a container for each table row. The th and td elements act as containers for heading and data cells respectively.
Cell Padding
You can increase the amount of padding for all cells using the cellpadding attribute on the table element. For instance, to set the padding to 10 pixels.
<table border="1" cellpadding="10"> |
|
Cell Spacing
By contrast the cellspacing attribute sets the space between the cells. Setting the cell spacing to 10.
<table border="1" cellpadding="10" cellspacing="10"> |
|
Table Width
You can set the width of the table using the width attribute. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins. For instance to set the width to 80% of the margins:
<table border="1" cellpadding="10" width="80%"> |
|
Text Alignment within Cells
By default browsers center heading cells (th), and left align data cells (td). You can change alignment using the align attribute, which can be added to each cell or to the row (tr element). It is used with the values "left", "center" or "right":
<table border="1" cellpadding="10" width="80%"> |
|
The valign attribute plays a similar role for the vertical alignment of cell content. It is used with the values "top", "middle" or "bottom", and can be added to each cell or row. By default, heading cells (th) position their content in the middle of the cells while data cells align their content at the top of each cell.
Empty Cells
One quirk is the way browsers deal with empty cells, compare:
|
|
The former occurs when a cell is empty: <td></td>
To prevent this, include a non-breaking space: <td> </td>
Cells that span more than one row or column
Let's extend the above example to break out sales by north and south sales regions:
<table border="1" cellpadding="10" width="250px"> |
|
|||||||||||||||
You can simplify this by taking advantage of the fact that browsers don't need the end tags for table cells and rows:
<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Year<th
colspan="3">Sales
<tr align="center"><th>North<th>South<th>Total
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>
Notice that as the heading "Year" spans two rows, the first th element on the second row appears on the second rather than the first column.
Borderless tables
These are commonly used for laying out pages in a gridded fashion. All you need to do is to add border="0" and cellspacing="0" to the table element:
<table border="0" cellspacing="0" cellpadding="10"> |
|
If you leave out the cellspacing attribute you will get a thin gap between the cells, as shown below:
|
Coloring your tables
To set the background color use the bgcolor attribute. The first step is to determine the hexadecimal values for the red, green and blue components of the color you wish to use.
<table border="0" cellspacing="0" cellpadding="10"> |
|
Making your tables accessible
If you are unable to see the table it can be quite hard to understand what the table is about. The first step is to add information describing the purpose and structure of the table. The caption element allows you to provide a caption, and to position this above or below the table. The caption element should appear before the tr element for the first row.
<table border="1" cellpadding="10" width="80%"> |
|
Here is the same table with align="bottom" added to the caption element:
|
The table element's summary attribute should be used to describe the structure
of the table for people who can't see the table. For instance: "the first
column gives the year and the second, the revenue for that year".
<table summary="the first column gives the year
and the second, the revenue for that year">
Specifying the relation between header and data cells
When a table is rendered to audio or to Braille, it is useful to be able to identify which headers describe each cell. For instance, an aural browser could allow you to move up and down or left and right from cell to cell, with the appropriate headers spoken before each cell. To support this you need to annotate the header and/or data cells. The simplest approach is to add the scope attribute to header cells. It may be used with the following values:
row: The current cell provides header information for the rest of the row
that contains it.
col: The current cell provides header information for the rest of the column
that contains it.
Applying this to the example table gives:
<table border="1" cellpadding="10" width="250px"> |
|
For more complex tables, you can use the headers attribute on individual data cells to provide a space separated list of identifiers for header cells. Each such header cell must have an id attribute with a matching identifier. A final point is that you should consider using the abbr attribute to specify an abbreviation for long headers. This makes it tolerable to listen to lists of headers for each cell, for instance: <th abbr="W3C">World Wide Web Consortium</th>