Advanced Tables
HTML Tutorial - Advanced Tables
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!
Ask in the forum
if you have any suggestions or comments.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
