www.netskills.ac.

uk

XHTML Tables
Web Pages: Structure

CSC1014

Topics
Tables in XHTML
Structure Attributes for tables and table cells Captions Tables for layout?

JISC Netskills

CSC1014

Tables
Introduced into HTML to describe tabular data Have been (and still can be) used for content layout (with care) Tags and attributes provide basic structure and presentation Enhancements can be made using CSS

JISC Netskills

CSC1014

Basic table structure

Start with <table>... </table> Content inside cells <td> or headers <th> Cells and/or headers enclosed in rows <tr>
<p>World Pepper Export Figures (2003)</p> <table> <tr> <th>Country</th><th>Tons</th> </tr> <tr> <td>Vietnam</td><td>82,000</td> </tr> <tr> <td>Indonesia</td><td>57,000</td> </tr> </table>
JISC Netskills

CSC1014

Table attributes
Attribute
border

Effect
Controls outside border visibility and thickness

Notes

width cellspacing cellpadding

0 = no gridlines 1 = gridlines >1 = outside border only Display width of table Numbers (pixels) for absolute width (default is "shrink-wrapped") % for relative width Controls distance between Specify as number (of pixels) cells (i.e. internal gridlines) Controls distance between Specify as number (of pixels) cell content and cell edges

Other attributes (colour, alignment etc.) are now deprecated

Use CSS instead
JISC Netskills

CSC1014

Table cell attributes

Attribute
colspan rowspan scope headers summary

Effect
Number of columns cell should span Number of rows cell should span Direction in which a cell provides header information The id values of the header(s) that apply to a cell Provides a text summary of table purpose/contents

Notes
Equiv of "merged cells" in a spreadsheet Values are row or col Once cell can have multiple headers Use for accessibility

Other attributes (colour, alignment etc.) are now deprecated

Use CSS instead
JISC Netskills

CSC1014

Table captions
Use <caption> to associate a title with a table
<table border="1" width="40%> <caption>World Pepper Export Figures (2003)</caption> <tr> <th scope="col">Country</th><th scope="col">Tons</th> </tr> <tr> <td>Vietnam</td><td>82,000</td> </tr> <tr> <td>Indonesia</td><td>57,000</td> </tr> </table>

Other markup to group columns, rows, header and footer rows for fixed scrolling etc.
JISC Netskills

http://www.w3.org/TR/html4/struct/tables.html

CSC1014

Tables for layout?

Only use if it can be kept simple!
No headers/semantics (this isn't structured data) Will require deprecated markup so no strict standards compliance

<table border="0" width="100%> <tr> <td width="200">COLUMN 1</td><td>COLUMN 2</td> </tr> </table> COLUMN 1 COLUMN 2

JISC Netskills