Home
  Graphics
  Tables
  CSS
  JavaScript
  Links

Tables


The T-A-B-L-E, yes thats what my web page needs I...ahem. Sorry, couldn't help myself. Tables can be simple, or extremely advanced. They are really great. Look around at the source of my page and you will find that everything between the Horizontal Rules at the top and bottom, is in a giant table. Even this text is in a table. Like the cool tiny outline? That is a table in itself. The white part is another table inside it. Even my navigation is in a table.

Well, If you want to know how to make awesome tables, you need to know the terms.

  • <Table> - starts and ends the table
  • <tr> - Makes a row
  • <td> - Makes a cell in the row

Besides them, there are many properties. Since this is Advance web, I will not be covering basic tables only advanced ones.

Look at this:

How do ya like those apples?

This is easy to do (just make sure the colors don't clash)

This is the code used there:

<table BORDER="0" CELLSPACING="0" CELLPADDING="5" bgcolor ="#803e08">
<tr><td>
<table BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="100%">
<td BGCOLOR="#f73921">
How do ya like those apples?
</td>
</table>
</td></tr>
</table>

This is a nested table. First, you need a colored table without a border and with a cell padding of how big you want the outline of the second cell. In this example I used a dark red color.

Next, you declare a row and a definition.

Inside of this definition comes the second table. Do it just like the one above. I left the color out for a reason though. As you can see, the color is on the next definition. This lets you have many normal, differently colored cells all within the small border. This is sort of how my navigation is done (with the help of java and CSS of course).

Well, all your text goes inside of that definition and you close all the tags. Thats all there is to it!

Well, I hope you enjoyed this explanation, maybe you can use it on your interface to make it less graphics, which also will speed it up. Go ahead and try. I dare ya.


Back to main