|
Back to Basics: Tables
Tables are commonly used in web pages. Take a look at the top frames of this
page (Ed - if you are wondering where this is its because this article is taken
from a sister site - see bottom of article). Here the table to hold all the
elements in. We added a black border so you can see it but in the real thing
the table has no border.
We removed some of the elements such as javascripts and images but it shows
you how we do it. Just compare it to the header frame above this page (if your
in the Worfolk Developers Library). Generally, most tables are used to structure
web pages like this. Now lets look at how to create a table. Take a look at
this simple one.
Heres the code for it:
<table width="100%" border="1" bordercolor="#0000FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Only 3 tags are used in the whole table. You should already know
is for blank space. The table tag is easily. There is also a width
tag to tell it to expand across the page. This is just to create the table.
The next tag is <tr>, table row. For each of these you
put in, there will be another row. The final tag is <td>.
This is for each column. These go inside the row tags so you could have 3 columns
in the first row and 4 in the second. This would produce the following
<table width="100%" border="1" bordercolor="#0000FF">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Now lets look at all the attributaries. I've already used the width, border,
and border color tag so you can see what the table looks like. Heres another
example of what you can put in our simple table that we started with.
<table width="70%" height="70" border="1"
align="center" cellpadding="1" cellspacing="1"
bordercolor="#0000FF">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
And hese's the outcome:
You should reconise most of the attrbutaries as they are easy to understand.
The only one you might not quite get is cellspacing and cellpadding. Cellpadding
is how much room there is between the table borders and anything (such as text
or images) inside the table. Cellspacing is the room between each of the cells.
You can also add class tags from CSS Stylesheets, howevewr I'm not going to
go into that now. See the CSS section for more information on it. You can also
add 'brcolor' and 'bgcolor' to rows and columns. Here I have added a gray background
to the top row and a yellow border to the bottom right cell.
And to end this article. I leave you with the code:
<table width="70%" height="66" border="1"
align="center" cellpadding="1" cellspacing="1"
bordercolor="#0000FF" bgcolor="#E8ECFF">
<tr bgcolor="#CCCCCC">
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td height="29"> </td>
<td bordercolor="#FFFF00"> </td>
</tr>
</table>
Source: Worfolk Developers Library
|
