Table Skeleton Page

Back to FireDrake Tutorials

The HTML code showing in the pop-up windows is non-working, it's an illustration of what to copy and paste. Quite to my surprise, it does make working code when it is cut and pasted! The link at the top of each cell will show how that code is displayed by the browser.

Making this Table Skeleton Index page has taught me a lot about how to integrate Cascading Style Sheets correctly for cross-browser support. Showing the Non-working HTML code in the pop-ups as an HTML editor would, with the different colors for each element of the code, should actually be an extension of this tool/tutorial.

This is an ongoing project, and I plan on adding to it regularly. I've just started on the 'vertical' column tools, and I haven't even gotten to the use of table groups, spanning columns, or spanning rows. These are all very useful tools for laying out a page.

I've decided to give this Table Skeleton as Freeware for you to use if you wish to make your own pages. Download this TableSkeletonV1_0.zip (45KB Zip) and extract it into it's own folder. Please read the readme file in it too.

As I add to this tool/tutorial, I'll post upgraded versions here too.

Take a look at the source code for pop-up windows for: 5 Cell Table Template Skeleton and 6 Cell Table Template Skeleton. The 5 Cell uses HTML font tags to style the text, while the 6 Cell uses CSS to style the text. This is the external Cascading Style Sheet.

I've only used 5 browsers to check this page on the single OS of Win98SE. They are: Netscape 4.79, MSIE 5.0, Opera 7.0, Open-source Mozilla 4.78(build 2002101612), and Phoenix Beta 0.5 (an open source offshoot of the Mozilla code-base). They all display this page correctly (within their limitations). The Javascript pop-up windows in tabbed browsing enabled browsers do load consecutive pop-ups, though you have to click the tab to see them, because the pop-up window disappears.

This is the very basic single-celled table that is the base building block for a web page. It's used a lot as a spacing device (when left empty) to precisely locate other elements inside a table cell.

This is a multi-celled single table, all set up to add more cells if needed.

A single table with 3 cells. Basic building block. Used as a piece in a multi-table stack, for instance in a photo gallery with 11 pictures. Stack a 4 cell table, this 3 cell table, and another 4 cell table inside your 'body' table for a total of 11 cells laid out in a 4-3-4 pattern.

A single table with 4 cells. Basic building block. Used a lot to stack, as in the example in the 3 cell table template skeleton comments.

This is just two 2-celled tables stacked on top of each other. A very basic building block for a webpage.

A 3 cell table stacked on top of a 2 cell table. If you need a single row of 5 cells, just use the Site Navigation Table Template and grow it to 5 cells wide.

Two 3 cell tables stacked. Easily made, it is just here for convenience. Stackable building block of skeleton code.

Three tables stacked. One 3 cell, and two 2 cell tables. I actually made this with the 3 cell and then stacked the 4 as 2 by 2 underneath.

This one has all the major template parts inserted "bare bones" to show how they fit together.

It is just too big to show in the pop-up window. View the source code, and cut and paste from there.

A 3 cell table with the align tags set to group everything to the center of the page.

All of the above tools and tutorials address the Horizontal nature of Tables. Here I start making my Vertical or Column tools and Tutorials. I'll Start by turning the Header table code into a 2 Vertical main cell table.

See the code for Tutorial Comments

Pure Code View

This is where we start using this Vertical Column as a Building block. I copied and pasted 1 more 'Table row' block of statements to make a column 3 cells tall, and start playing with some of the "height" attributes of the "TABLE" and the "TD" (table data) cell Tags.

See the Code for Tutorial Comments

Pure Code View

This is where I start to use Vertical or column stacking. The tutorial is in the 'comments' of the code itself. This will teach you to read code to figure out how to change tables generated by gallery makers, image slicers, etc. The pure code view is for use as a tool, and to get a condensed look at the code of the tutorial.

See the code for Tutorial Comments

Pure Code View

The next lesson will go here.