 |
LOGO
WORLD |
could be used to present a logo image and company title. If the border
width is set to zero the layout is retained but without the distracting
border. The result is:
|
LOGO
WORLD |
In HTML a table is defined as cells within rows. The table is first
defined, then each row within the table, then the cells within each
row. There are three main tags with associated parameters:
HTML Table Tag
The start and finish of the table is marked by the table tag
<table><!-- HTML elements --></table>
The table tag can have a range of parameters which determine the
appearance of the table as a whole:
Align
align="left" {or right, center}
For example:
<table align="center"><!--
HTML elements --></table>
This determines the alignment of the table as a whole on the page,
and not the content within the table.
Width
width="200" or width="50%"
The width of the table can be expressed in pixels or as a percentage
of the container - eg window or other table cell.
Height
height="200" or height="50%"
The height of the table can be expressed in pixels or as a percentage
of the container - eg window or other table cell.
Background Color
bgcolor="red" or bgcolor="#ff0000"
The background color of the table can be expressed as text or as a
hexadecimal number.
Background Image
background="images/bullet.gif"
A background image can be provided for the table. Where the table
is bigger than the image, the image will tile vertically and horizontally
across the table. Where the table is smaller than the image, the image
will be truncated.
Border
border="2"
The thickness of the table border can be expressed in pixels.
Border Color
bordercolor="red" or bordercolor="#ff0000"
The border color can be expressed as text or as a hexadecimal number.
Cell Padding
cellpadding="2"
Determines the shortest distance (in pixels) between the content of
a cell and the cell border.
Cell Spacing
cellspacing="2"
Determines the shortest distance between the cells in a table.
HTML Table Row Tag
The start and finish of a table is marked by the table row tag
<tr><!-- HTML elements --></tr>
The table row tag can normally be used without parameters, the table
appearance being determined by the table and cell tags. The table
row tag simply defines a row of cells within a table.
HTML Table Cell or DataTag
The start and finish of a table cell is marked by the table data
tag
<td><!-- HTML elements --></td>
The table data tag can have a range of parameters which determine
the appearance of the cell:
Align
align="left" {or right, center}
For example:
<td align="center"><!--
HTML elements --></td>
This determines the horizontal alignment of the cell content within
the cell.
Vertical Align
valign="top" {or middle, bottom}
For example:
<td valign="top"><!--
HTML elements --></td>
This determines the vertical alignment of the cell content within
the cell.
Width
width="200" or width="50%"
The width of the cell can be expressed in pixels or as a percentage
of the table.Note that the width of a cell cannot normally conflict
with the width of a cell below it in a column. The results will be
unpredictable across different browsers.
Height
height="200" or height="50%"
The height of the table cell can be expressed in pixels or as a percentage
of the table.
Background Color
bgcolor="red" or bgcolor="#ff0000"
The background color of the table cell can be expressed as text or
as a hexadecimal number.
Background Image
background="images/logosample.gif"
A background image can be provided for the table cell. This will overwrite
a general table background image.
Border Color
bordercolor="red" or bordercolor="#ff0000"
The border color of a cell can be expressed as text or as a hexadecimal
number.
HTML Sample Table
The following sample shows a range of code elements used to create
a table.
<table align="center" width="400" height="100"
bgcolor="green" background="htmlimages/bullet.gif"
border="2" bordercolor="red" cellpadding="3"
cellspacing="2">
<tr>
<td align="left" width="50" height="60">Cell
1</td>
<td align="center" width="150" height="60">Cell
2 </td>
<td align="right" width="100" height="60">Cell
3 </td>
<tr>
<tr>
<td align="left" width="50" height="40"
background="htmlImages/logosample.gif" >Cell 4</td>
<td align="center" width="150" height="40"
bgcolor="#999900" >Cell 5</td>
<td align="right" width="100" height="40"
bordercolor="0000cc">Cell 6</td>
<tr>
</table>
creates the following table...
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell
4 |
Cell
5 |
Cell
6 |
HTML Table Points to Note
