Introduction to Web Page Design
| Introduction | Essential concepts | Basic Skeleton | Headings | Controlling Formatting | Creating Links | Further Development |
Tables
Tables are a powerful means of controlling the placement of text and images on the screen. They are, however, difficult to visualise using only a text editor.
| By Raouf Allim |
Writing tables using only a text editor is for the brave (foolhardy?). If you do attempt it, make full use of the whitespace rule of HTML (whitespace is not displayed in the output) and indent your code to make the nesting of cells more obvious. e.g.
<
div align="center"><center><table border="1" cellpadding="3" cellspacing="1" width="90%"><tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
</table></center></div>
produces the table below.
The <TABLE> </TABLE> tag set contains the table with rows designated by
<TR> </TR> and individual cells by <TD> </TD>. Attributes allow
you to position the table, define the border, and specify overall spacing.
Attributes for the TABLE element:
| Border | Width for external and internal borders |
| Width | Width of the table (pixels or %) |
| Cellpadding | Distance in pixels between the cell text and border |
| Cellspacing | Distance between cells |
| Align | ="left|right" aligns the table with the left/right margin (NB text can flow around) |
| Valign | ="top|bottom" vertical alignment of text in cells (if not entered default is centre) |
| Bgcolor | ="#FFFFFF" Background colour for the table |
| Bordercolor | ="#FFFFFF" Colour for the table border |
Rows
<TR></TR>.
You can set the following row attributes:
| Align | ="left|right|center" Horizontal text alignment |
| Valign | ="left|right|center" Vertical text alignment |
| Bgcolor | ="#FFFFFF" Background colour of the cell |
| Bordercolor | ="#FFFFFF" Colour of the cell border |
Cells
Header cells <TH></TH>
Data cells <TD></TD>
Header cells are by default bold and centred. Attributes are similar to the row attributes, namely:
| Align | ="left|right|center" Horizontal text alignment |
| Valign | ="left|right|center" Vertical text alignment |
| Bgcolor | ="#FFFFFF" Background colour of the cell |
| Bordercolor | ="#FFFFFF" Colour of the cell border |
In addition, table cells have the following attributes:
| Rowspan | ="number" number of rows cell extends across |
| Colspan | ="number" number of columns cell extends across |
| Nowrap | Forces the contents of the cell to be displayed without wrapping. Use with caution as it can force a cell beyond right margin of screen |
|
