To make my blog page, I used embedded tables to achieve a menu bar across the top. I began with a pre-fabricated template provided by Blogger and began modifying it. Here is a quick overview. If you are unfamiliar with creating tables in HTML, go visit Annabella's HTML Help. It is a very good source for learning basic HTML. It has good instructions for constructing basic tables.


1
The template began with the following setup.
Which gave a table like this:
Text Box 1
-List One-
Text Box 2


-Links-
Text Box 3
Text Box 4
Text Box 5
Text Box 6


Text Box 7
Please note: the green cells are actually a table within a table. From this, I learned that a table can be embedded into a cell within another table. This was the idea I needed to make a better layout.



2
First I created an extra row at top.
Which gave a table like this:
Text Box 1
Text Box 2
-List One-
Text Box 3


-Links-
Text Box 4
Text Box 5
Text Box 6
Text Box 7


Text Box 8



3
Then I added an embedded table in the second row and divided the embedded table into 5 columns.
Which gave a table like this:
Text Box 1
Text Box 2 Text Box 3 Text Box 4 Text Box 5 Text Box 6
-List One-
Text Box 7


-Links-
Text Box 8
Text Box 9
Text Box 10
Text Box 11


Text Box 12




4
By adding more and more tables, I achieved the following:
Which gave me a final table like this.
Text Box 1 Text Box 2 Text Box 3
Text Box 4 Text Box 5 Text Box 6 Text Box 7 Text Box 8
-List One-
Text Box 9


-Links-
Text Box 9
Text Box 10
Text Box 11
Text Box 12



Text Box 13
Text Box 14 Text Box 15




Keeping track of so many opening and closing tags seems daunting, but it is not impossible. I find it best to work from the outside to the inside. When you write an opening tag, go ahead and write the closing tag for it. This helps prevent lost or forgotten tags. Begin with the outermost layer:

<table>
</table>
Then add the next layer of tags within:
<table>
<tr><td>
</td></tr>
</table>
and keep going...
<table>
<tr><td>
text, links, graphics, etc...
</td></tr>
</table>



I would also recommend using percentages when defining width values. This will allow the table to best fit the screen depending on what screen resolution your viewers are using. It is not perfect, but it will be an improvement in trying to let your page be seen by different computers.

You can learn more about coloring and styling for your tables at Annabella's HTML Help.




Created by
-The Bogus Dot-