Here are a few examples of
simple tables, the code can be cut and pasted.
Table Tags: <table></table>
<tr> Table Row </tr>
<td> table division </td>
Set table attributes:
<table border="1"> sets
the table border width as below
<table border="1" cellpadding="2" sets
space around the items in the table cells
<table border="1" cellpadding="2"
cellspaing="0" sets space around
the cells in the table
1 cell, border 1, width 100%
code:
| <table
border="1"
cellpadding="2"
cellspacing="0"
width="100%">
<tr>
<td
width="100%">Text
here</td>
</tr>
</table> |
| cell 1 content in here |
cell 1 content in here |
2 cells, border 1, width 80%, cell padding 0, cell spacing 10
code:
| <table
border="0"
cellpadding="0"
cellspacing="10"
width="80%">
<tr>
<td
width="50%">cell
1 content in here</td>
<td
width="50%">cell
2 content in here</td>
</tr>
</table> |
Table Header <th></th>
Using the header tags , centres and sets the header text to
bold.
|
Header Title
|
| Cell content |
code:
| <div
align="left">
<table
border="1"
cellpadding="4"
cellspacing="0"
width="60%">
<tr>
<th
width="100%">Header
Title</th>
<tr>
<td
width="100%">Cell
content</td>
</tr>
</table>
</div> |
| cell 1 content here |
cell 2 content here |
| cell 3 content here |
cell 4 content here |
2 cells, border 0, width 80%, cell padding 0, cell spacing
10,
table background colour Aqua,
Table centred <div
align="center"></div>
code:
| <div
align="center">
<table
border="1"
cellpadding="10"
cellspacing="0"
width="100%"
bgcolor="#00FFFF">
<tr>
<td
width="50%">cell
1 content here</td>
<td
width="50%">cell
2 content here</td>
</tr>
<tr>
<td
width="50%">cell
3 content here</td>
<td
width="50%">cell
4 content here</td>
</tr>
</table>
</div> |
Centering contents in a table:
<td align="center">
code:
<div align="center">
{centers the whole table}
<table
border="1"
cellpadding="10"
cellspacing="0"
width="90%"
bgcolor="#00FFFF">
<tr>
<td
align="center">centred
text here</td> {centers
the text within the cell}
</tr>
</table>
</div>
|
The examples above are simple but many tables can be
complicated to construct, consider this one, a table header, a
nested table within a table:
| Header
Text here |
| cell contents |
cell contents |
cell contents |
cell contents |
| cell contents |
cell
contents
cell contents
cell contents
cell contents
|
cell contents |
| cell contents |
cell contents |
| cell contents |
cell contents |
cell contents |
cell contents |
|
Consider the code for this table and they get much more
complicated than this!
code:
| <div
align="center">
<table
border="0"
cellpadding="20"
cellspacing="0"
width="90%"
bgcolor="#C0C0C0">
<tr>
<td
width="100%">
<div
align="center">
<table
border="0"
cellpadding="6"
cellspacing="6"
width="90%"
bgcolor="#808080">
<tr>
<th
width="100%"
colspan="4"
bgcolor="#E9EFF3">Header
Text here</th>
</tr>
<tr>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
</tr>
<tr>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="50%"
bgcolor="#C0C0C0"
colspan="2"
rowspan="2">cell
contents
<p>cell
contents</p>
cell contents
<p>cell
contents</p>
</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
</tr>
<tr>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
</tr>
<tr>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
<td
width="25%"
bgcolor="#C0C0C0">cell
contents</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div> |
*Be warned!!!!
Tables when used within the OLÉ system can effect the main
structure of the site, so if this happens remove the offending
table code and correct. A few points to watch out for:
- Never set the table width or cell width to more than 100%
- Never set the table width to more than the pixel width of
the OLÉ edit area
- If you are inserting a table into a page that already
contains text, then MAKE A COPY of the page code (into a
text file and save) PRIOR to inserting table code, so if
things go wrong you have a back up.
|