|
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.
|
HTML
Tables