� at32,Wyn32 2002
| |
[ Home ]
| |
Web Design: at32 Webcraft
| | | |
at32 Webcraft
|
[ Learn HTML with WebCraft ]
Tables
It may surprise you to know that of the tags you have learnt so far, this website doesn't use much more than that. Other than a bit of knowledge about color - the only thing you are lacking is the ability to harness the power of tables.
To get started with tables, right click within your text in WebCraft and select Quick HTML > Start a Table. This will provide you with:
<TABLE border=0><TR>
<TD>
</TD>
</TR></TABLE>
|
We now need to take a good look at the structure of the above HTML to explain the roles of each tag, before moving onto some examples.
The first thing you will notice is that each tag is countered by a duplicate closing tag. With this in mind, it's easier to understand the meanings of each bit:
TABLE - indicates that the text between the opening and closing tags is part of a table
TR - table row, always encapsulates table cells
TD - table column, or more accuratly - a table cell
By combining these tags in various ways and orders, you can construct any table. For example:
<TABLE border=0><TR>
<TD>Cell One</TD><TD>Cell Two</TD>
</TR></TABLE>
|
...is a table of two cells on a single row:
Note that this example inclues a little extra html to shade the cells for clarity - but more on that later. The next example is two cells again, this time on separate rows:
<TABLE border=0><TR>
<TD>Cell One</TD>
<TR></TR>
<TD>Cell Two</TD>
</TR></TABLE>
|
The logical next step of course is four cells, split across two columns and two rows each:
<TABLE border=0><TR>
<TD>Cell One</TD><TD>Cell Two</TD>
<TR></TR>
<TD>Cell Three</TD><TD>Cell Four</TD>
</TR></TABLE>
|
| Cell One | Cell Two |
| Cell Three | Cell Four |
|
For more complex tables, you continue to assemble the TR and TD tags until the desired arrangment is achieved.
Don't forget that you can include tables within table cells - such as is used on this website to separate the left hand side of the page (the menu) from the body text. This isn't just one large table, but a primary master table splitting left from right - then a separate table to create the menu. Within the body text, another table is created within the cell of the right hand area to break up the page and introduce space for the image down the left.
Color
There are quite a number of additional functions that you can apply to a table. The most obvious one is color, without it - the table cells are transparent (this may be what you want though!). But with it, you can color individual cells, rows - or the entire table. Actual use of color is not discussed within this article, so instead we will focus on the use of color with tables and make the assumption you are familiar with HTML and color.
Best way to educate, is by example - hence:
<TABLE bgcolor=FFDDDD>
<TR bgcolor=FFDDDD>
<TD bgcolor=FFDDDD>
Testing
<TD><TR><TABLE>
|
...shows simply 3 different ways to apply color (in this instance pale red) into a table. The first applies it to the whole table, the second to a row - and the last one to an individual cell. Note the above collection of tags is quite inefficient - if for example you want a red table you only need to tell the table tag you want it red - not the others. Likewise, if you want a red row it's best not to tell the table otherwise the whole table will be red.
The next example is more varied showing a variety of table coloring techniques:
<TABLE border=0>
<TR bgcolor=DDDDFF>
<TD>Cell One</TD>
<TD>Cell Two</TD>
</TR><TR>
<TD bgcolor=DDFFDD>Cell One </TD>
<TD bgcolor=FFDDDD>Cell Two</TD>
</TR>
</TABLE>
|
| Cell One | Cell Two |
| Cell One | Cell Two |
|
The first row has a blue color applied to it (no need to assign the blue to both top cells), whilst the bottom row has no color assigned to it - instead making two assignments for each cell.
Table Width
Another useful extra bit of control you might like is over table width. By default, a table will stretch out wide enough to include all it's contents. However, this is quite unpredictable - so it's useful to have manual control over this.
This is relativly simple - you need only include the width=xxx bit in a table, or cell. The following example shows a table that stretchs to fill the space available to it, and also has a left hand cell that is 30% the width of the total available space - the other cell taking up 70%:
<TABLE border=0 width=100%><TR>
<TD width=30% bgcolor=FFDDAA>Cell One</TD>
<TD width=70% bgcolor=AADDFF>Cell Two</TD>
</TR></TABLE>
|
Note the three uses of the width instruction. The first (width=100%), is to instruct the table to fill the full width of the available space. The next two determine the space allocation for the individual cells.
Once you have assigned width for the first row, you need not assign it again.
Special Tables
Our final look at tables focuses on irregular tables. Often a regular table will be just fine (where the table is full of the same number of cells per row, or the same number of rows per column), but there will be a few occasions where you want to escape this limitation.
The following HTML shows first how to have a cell that fills two columns, the next will demonstrate a cell filling two rows. In both examples you use the cellspan and rowspan instructions.
<TABLE border=0><TR>
<TD colspan=2 bgcolor=8888DD>Cell One</TD>
</TR><TR>
<TD bgcolor=DDDD88>Cell Two</TD>
<TD bgcolor=DD55DD>Cell Three</TD>
</TR></TABLE>
|
| Cell One |
| Cell Two |
Cell Three |
|
<TABLE border=0><TR>
<TD rowspan=2 bgcolor=8888DD>Cell One</TD>
<TD bgcolor=DDDD88>Cell Two</TD>
</TR><TR>
<TD bgcolor=DD55DD>Cell Three</TD>
</TR></TABLE>
|
| Cell One |
Cell Two |
| Cell Three |
|
You now have the core knowledge to enable you to start building some decent websites. As already mentioned earlier, this website (and the sample files included with WebCraft) are built with pretty much this set of tags and nothing more.
The final section will look at some of the other functions that WebCraft has that enables you to get the most out of your web design without making you work for it.
[ Prev | Next ]
|
| | | |
|
