|
Table Tag
Tables are commonly used in web pages. Take a look at the
top frames of this page. 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>
|
