When I make a whole screen lay-out table, I usually use width="101%". When you put a new table inside your main lay-out table the width is in % of the column = always in % of the available space. Because the borders for your columns are there, even if they are not displayed, the maximum total width of the columns in your nested table must be slightly less than 100% when counted in pixels.

When you make a nested table, you put it in one of your layout table columns, usually the middle column; i.e.:

The summary="...." is required by the validators. When the table contains some content you can use title="...." instead. Inside the quotation marks you put the table heading.

To estimate the space you need, calculate with 1 pixel width for each border. In one column you have two borders, one at each side, which gives 2 pixels. Then you have two more borders, one at each side of your nested table, which is again 2 more pixels. So you have to leave space a total of 4 pixels (2 + 2). If your column width is 60% of the screen and the screen width is 800 pixels, then the column width is 480 pix. (60% of 800). You must then leave close to 1% space for these borders (1% of 480 = 4.8 pix.).

When working with nested tables, you can estimate about 15 - 17 characters, including commas, empty space etc., equals 100 pixels when using medium size font (size 12 pt). Capital letters (A, B, etc.) equals two characters each.

Same reasoning applies for the width of columns inside the nested table. Total width of these is 100% of the nested table minus space for column borders inside the nested table.

The computer reads table row by table row and always column by column from left to right inside each table row. Therefore you can make each table row different, if you want. It all depends on what you want to show. Usually it's better to use a new table instead of a new table row.  With many table rows some (older ?) browsers can get confused.

Nested Tables Code Displayed

What below is written inside <!--Comments--> are my comments for you and must not be included in your code. The code shown is a table from Don Pedro's Website Design Handbook. Even if the content inside the <!--blabla--> tag isn't displayed, the search engines still read it.

Instead of putting your contents description in a "no display" tag you can add it in the <table> tag;  title="...".  Inside the quotations marks you write either the table heading or a description of your nested table's content.

There's always a risk with using the "no display" tag as you can be accused of "cloaking". Cloaking is defined as what a website author does to return different content to search engines compared with what human visitors get. It's sometimes done with the express purpose of cheating search engines into giving the page a better ranking. The punishment can be the site/author gets permanently banned from one or several search engines. Be careful!

The title="..." will give your visitor a yellow "pop-up" rectangle when the mouse arrow is put on the table. Inside the rectangle comes the text you have written between the quotation marks. Try to put your mouse arrow somewhere on the table below. The reason for using this is that the search engines read the "title" tag, while they cannot figure out the content of your nested table. See Don Pedro's "Alt" and "title" Tags.

When you keep a clear lay-out while writing your table code, it's not only "elegant" but it's also easier for yourself to read and later may be to correct/change.  Keep track of how many levels you have opened so you remember to close them all.  It's very easy to get confused.

The code above is in fact for several nested tables inside each other. All are showing up as one table only. If you want to experiment with nested tables, there are (again) two ways to do.

A. FRONTPAGE - use "Insert table". If you want to add a nested table you first "click" where you want the table. Then you click on the table icon and indicate how many rows and columns you want. Now just one click should give you your nested table where you want it. If this doesn't work you have to "drag" your table to the place where you want it (you use the "Normal" page).

B. First you upload any kind of "index" page on a server (= activating your site). Then you can upload any kind of experimental page. Try to use a server with a direct editor, because then you can do your code changes directly in the server editor. You can then view your latest version on your own browser with the connections you happen to have. This is then no simulation. Personally I prefer to manipulate columns in tables by directly working on the code.

Remember to use no-index tag on your experimental pages.

Best way to learn and understand the manipulation of tables is to start working inside nested tables.  When working with a “server-editor” and you want to check how a change looks in your browser, save your code first.  If you have to close the editor and reopen your page in your browser, then you have to keep the “Shift” key down when you click on the “Refresh” button.  Otherwise you get your old version from the “cache” (browser memory).

"Double" Nested Table

A double nested table is something you put into one column in a nested table. Some people call these "cells". Because of space restrictions your column in the nested table is hardly wide enough for many sub-columns. You have to keep good track of column width in pixels.

With FP you can add a "cell", but some browsers can get confused with very many different table rows.  Therefore it's better to use new tables inside tables instead of table rows.  It sure looks more complicated for you and me, but the browser reads the code as written.  When you use a new table instead of a table row the display time will be less. Always remember, the computer is an electronic machine.

There is one example of a double-nested ("triple-nested"?) table in Don Pedro's Handling Pictures and another one in the Handbook. When I made those, I used FP for the general layout, then I went into the code and adjusted columns plus added content. The code displayed above is the code for that second one.

When the code you have written doesn't give what you want - print out your code and check the print-out for errors.

Do not use nested tables unnecessarily, the search engines cannot read the content. When you really need it, use either summary="...." or with the table contents title="...." for the search engines.

"Advanced" Layout Tables

A regular webpage usually have the Menu in the leftmost column, which the search engine spiders (robots) read first. If the Menu is complicated (for instance JavaScript) or otherwise very long the text will come very far down in the code. Additionally eventual JavaScript in the beginning of the code is meaningless for the spiders but is "understood" to be very important for you because it comes first. Then your real text, which is the important part would be taken by the spiders as being not so important! Because it's found at the end of the code page.

You can use different "nested tables" to arrange so that your Menu comes last in the code, after the all important text. Still the Menu appears on the left hand side of the display (like on this page). See Don Pedro's "Advanced" Layout Tables.