|
Tables are the building blocks in HTML, without them it would be
very difficult to arrange different elements on a web page. As a
matter of fact, this paragraph is sitting in a table that is inside
another table. Below is the skeleton code for a table that has 2
columns and 2 rows.
(view the source of
this page for more indepth source code commentary on HTML table
tags)
<table width="300" height="100" border="1" cellspacing="0"
cellpadding="0">
<tr>
<td align="left" valign="top" width="150" height="50">
text or image can go here
</td>
<td align="left" valign="top" width="150" height="50">
text or image can go here
</td>
</tr>
<tr>
<td align="left" valign="top" width="150" height="50">
text or image can go here
</td>
<td align="left" valign="top" width="150" height="50">
text or image can go here
</td>
</tr>
</table>
The above code would
produce a table that looks like this:
| text or
image can go here |
text or
image can go here |
| text or
image can go here |
text or
image can go here |
One of the best things
about creating your site with tables is that they easily let you
align text, and images in all directions (left, right, center,
middle, top, and bottom).
View a photo
gallery that shows all the possible alignment that
you can make a table cells have. See how
easy it is to make your own photo
gallery
Another nice feature
with tables is that the actual <table>
tag itself as well as each of the <td>
tags (which are the cell tags themselves) can have a bgcolor
and a background attirbute to
them. Being able to do that makes it possible to have what looks
like images on top of one another and then to have text on top of
that. A good example of this is the table at the top of this page
that has the title of the page in big bold type saying HTML Tables.
That green image is the background of the table and the text is
centered in the table. View the source of this page for a more detailed
explanation of how that was accomplished.
|
