In this tutorial you will learn how to 'nest' tables and format cells using html for use in your web design.
Nesting Tables
Nesting? what's that? Basically its putting tables inside other tables,
you remember in the basic tables tutorial i said you can put other
tables inside table cells - well here's how.
<table>
<tr><td>
<table>
<tr><td>
Hi, I'm in a nested table... but its a but boring!
</td></tr>
</table>
</td></tr>
</table>
|
As you can see, the T able D ata is, in this case, a whole new table, albeit with only one cell in each.
Why Bother??
What's the point in nesting tables - making your job easier, for example consider the following:
| HEADER IMAGE |
NAV IMAGE
| Home |
| Links |
| About |
| Portfolio |
| Contact |
|
| Subheadings/links |
| PAGE CONTENT |
| Copyright Information |
|
The page is very neatly laid out, and more
importantly, you can safely edit the links table and the content table
without damaging the overall layout, you might also choose to put the
header in a table, for example if you wanted to put more links
horizontally under the header. The code for the above table is:
<table width="300" height="203" border="1" cellpadding="0" cellspacing="0" bordercolor="#990000">
<tr align="center">
<td height="30" colspan="2">HEADER IMAGE</td>
</tr><tr>
<td width="114" height="159" align="center" valign="middle">NAV IMAGE<br>
<table width="100" border="1" cellpadding="0" cellspacing="0" bordercolor="#006600">
<tr>
<td align="center">Home</td>
</tr><tr>
<td align="center">Links</td>
</tr><tr>
<td align="center">About</td>
</tr><tr>
<td align="center">Portfolio</td>
</tr><tr>
<td align="center">Contact</td>
</tr>
</table>
</td>
<td width="180" align="center">
<table width="95%" height="159" border="1" cellpadding="0" cellspacing="0" bordercolor="#000066">
<tr>
<td height="10">Subheadings/links</td>
</tr><tr>
<td align="center">PAGE CONTENT</td>
</tr><tr>
<td height="10">Copyright Information</td>
</tr>
</table>
</td>
</tr>
</table> |
This may look a bit confusing, but its all quite simple - the same
three tags repeated in the correct order. I have colored the code
according to which table it represents, as shown in the diagram, you
can ignore the extra attributes for now (bordercolor="#blah",
align="blah", border="1" etc.) - they were simply used to show which
tables were nested.
Basically you just have to make sure that you don't overlap tags, i.e.
<font size="6"><b>Hello World!</b></font> -- is correct
<b><font size="6">Hello World!</b></font> -- is incorrect
Checking up
The same rules apply for tables, and most errors occur when you don't
close tags, to prevent this (it WILL happen, believe me!) you can
either use a WYSIWYG (what you see is what you get) editor, such as
Macromedia Dreamweaver,
my personal favorite - these will generate the code for you, all in the
right order. If you can't afford the hefty price tag of these programs,
then you can get your code validated
here, simply enter the URL of your page and it checks to see it complies with the
W3C standards.
Formatting Cells
Those tables were all well and good... but they were a bit boring yes?
To make them more exciting there are a few tags you should be aware of.
To make your tables have no borders, simply add the border="0"
attribute to your table tag, i.e. <table border="0"> obviously
you can also make your table borders bigger - experiment! its the best
way to learn!
Changing the background color of a cell
Another major formatting attribute is the bgcolor attribute, this can
be defined using simple, word-based colors, or hexadecimal values, for
the purpose of this tutorial i will use both.
To dictate the background color of a cell you insert the bgcolor attribute into your <td> tag, for example:
<td bgcolor="red"> -- simple word-based colors
<td bgcolor="#ff0000"> -- hexadecimal color values
both of the above will generate this:
if we then add the border="1" attribute,
we get this:
now, for my last trick in this tutorial, the bordercolor attribute
As you can see there are many possibilities (especially with millions of possible color values)
the code to generate the above table (complete with bordercolor , border and bgcolor attributes) is shown below:
<table width="100" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td bgcolor="#FF0000"> </td>
</tr>
</table> |
I hope this came in useful!
