|
Tables allow you
to position text and graphics. (The red and cream boxes above
are examples).
Have a look at this, these two tables should expose most aspects
of table construction:
1. A simple empty box.
This is what you would write on your web page:
<table width="200" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
</td>
</tr>
</table> |
NB: Writing your code as above is not essential,
it is just easier when you are learning.
The actual format is not important as long as all tags and content
follow on.
This will also work:
<table width="200" border="1" cellspacing="0" cellpadding="0" align="center"><tr><td> </td></tr></table>
This is what it means:
<table
width="200" border="1" cellspacing="0" cellpadding="0" align="center"> |
|
Defines
table |
<tr> |
|
Opens
row |
<td> |
|
Opens
cell |
|
|
*
Cell contents |
</td> |
|
Closes
cell |
</tr> |
|
Closes
row |
</table> |
|
Closes
table |
|
* Browser Compatibility: Always put something
in table cells if only a space, ( ).
2. A more attractive table. Note
colour, no border, more cells, joined cells.
Hello |
World |
Have
a nice day |
The code....
<table width="40%" border="0" cellspacing="0" cellpadding="10" align="center" bgcolor="#FFFF00">
<tr>
<td bgcolor="#CCCC00" align="right" width="45%">
<font size="3" face="Arial, Helvetica, sans-serif" color="#000000">Hello</font>
</td>
<td bgcolor="#990000" width="55%">
<font face="Arial, Helvetica, sans-serif" size="3" color="#FFFFFF">World</font>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="Times New Roman, Times, serif" color="#FF0000" size="5"><b>Have
a nice day</b></font>
</td>
</tr>
</table> |
Notes:
width can
be in pixels or percentages.
cellspacing is
the distance between cells.
cellpadding is
the space, within the cell and around the text.
align can
be 'left', 'center' or 'right', (table and td tags).
valign can
be, 'top', 'middle', or 'bottom', (td tags).
bgcolor,
(background colour), can be used in the table, tr or td tag.
NB: None of these are absolutely essential for tables, if you do
not use them, default values will be used.
There are other rules with tables but, for
now, the best thing you can do is to write a few tables yourself
and see what happens.
Most errors may come from forgetting to close row or cell tags.
Images as Backgrounds to tables.
You can put 'background="images/something.jpg" '
into the table, tr, or td tags.
For Browser Compatibility, it is best to put it in both the table
and td tags.
NB: It is not good good practice to mix fonts in a real web page.
|