How To Create HTML Documents
(Hypertext Markup Language)
Continued
Page 3
Tables
<table> ... </table> This is the main wrapper for all the other table elements, and other table elements will be ignored if they aren't wrapped inside the <table> ... </table> element.
The <table> element have the following attributes :
Border
This attribute appears in the <table> element. If present, borders are drawn around all table cells. If absent, there are no borders, but by default space is left for borders, so the same table with and without the BORDER attribute will have the same width. By default, tables are rendered without borders. The value should be a pixel value.
eg; <table border=0></table>
or <table border=1></table>
or <table border=2></table>
or <table border=3></table>
etc...etc...
Cellspacing
This attribute allows control over the space used between cells in a table. The value should be a pixel value.
eg; <table border=2 cellspacing="0"></table>
or <table border=1 cellspacing="1"></table>
or <table border=2 cellspacing="2"></table>
or <table border=2 cellspacing="3"></table>
etc...etc...
Cellpadding
This attribute allows control over the space inserted between the cell data and cell wall in a table. The value should be a pixel value.
eg; <table border=2 cellspacing="0" cellspacing="0"></table>
or <table border=1 cellspacing="1" cellpadding="1"></table>
or <table border=2 cellspacing="2" cellpadding="2"></table>
or <table border=2 cellspacing="3" cellpadding="3"></table>
etc...etc...
Note
<table border=0 cellspading="0" cellspading="0"></table>
gives the most compact table possible.
Width (value or percent)
This attribute is used to describe the desired width of this table, either as an absolute width in pixels, or a percentage of document width.
eg; <table border=2 cellspacing="3" cellpadding="3" width="50%"></table>
or
<table border=2 cellspacing="3" cellpadding="3" width="300"></table>
Align
Like that used for images, it allows a table to be aligned to the left, right or center of the page.
eg; <table border=2 cellspacing="3" cellpadding="3" width="50%" align="left"></table>
or <table border=2 cellspacing="3" cellpadding="3" width="50%" align="right"></table>
or <table border=2 cellspacing="3" cellpadding="3" width="50%" align="center"></table>
Bgcolor
BGCOLOR attribute in the TABLE element allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet (eg; - "#FF0000" -).
eg; <table border=2 cellspacing="3" cellpadding="3" width="50%" align="center" bgcolor="#FF0000"></table>
Bordercolor
This attribute sets the border colour of the table (If desired). Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet (eg; - "#FF0000" -) . It is necessary for the BORDER attribute to be present in the main <table> element for border colouring to work.
eg; <table border=3 cellspacing="2" cellpadding="2" width="50%" align="center" bordercolor="#FF0000"></table>
<td>...</td> This stands for table data, and specifies a standard table data cell. Data cells must only appear within table rows.
The <TD> element can have the following attributes.
ALIGN
BGCOLOR
BORDERCOLOR
<tr>...</tr> his specifies a table row. The number of rows in a table is exactly specified by how many <TR> elements are contained within it, regardless of cells that may attempt to use the ROWSPAN attribute to span into non-specified rows.
Here is an example:
<table border>
<tr>
<td>Data cell 1</td><td>Data cell 2</td>
</tr>
<tr>
<td>Data cell 3</td><td>Data cell 4</td>
</tr>
</table>
It will appear like this:
| Data cell 1 | Data cell 2 |
| Data cell 3 | Data cell 4 |
Here is an example:
<table border=3 cellspacing="2" cellspading="2" width="50%" align="center" bgcolor="#FF0000" bordercolor="#0000FF">
<tr>
<td>Data cell 1</td>
<td>Data cell 2</td>
</tr>
<tr>
<td>Data cell 3</td>
<td>Data cell 4</td>
</tr>
</table>
It will appear like this:
| Data cell 1 |
Data cell 2 |
| Data cell 3 |
Data cell 4 |
Example 3
<table border=3 cellspacing="4" cellspading="4" width="50%" align="center" bgcolor="#FF0000" bordercolor="#0000FF">
<tr>
<td align="center">Data cell 1</td>
<td align="center">Data cell 2</td>
</tr>
<tr>
<td align="center">Data cell 3</td>
<td align="center">Data cell 4</td>
</tr>
</table>
It will appear like this:
| Data cell 1 |
Data cell 2 |
| Data cell 3 |
Data cell 4 |
Next Return to Main page