How To Make A Website Template Using HTML Tables

This page shows how to lay out your website template using html tables. It's part of complete tutorial showing showing how to make a website template.

How To Put Things Where You Want Them

Example of a 2 column page layout

Tables let you position all the elements of the web page. These are like tables in a word processor, just a rectangular arrangement of rows and columns. You put all the elements of the page (header graphic, navbar, content, ads etc) into different cells or into more tables nested inside cells.

The picture to the right shows the tables in a web page I've built as an example. Table borders are shown in red, and aren't seen in a web browser.

This template has a simple but effective arrangement with two columns in the main table. 

The text is in a separate table that is nested inside the main table's second row and second column. The header graphic spans both columns in the top row.

Making Your Own Website Template

It's quite easy to make a website template using tables. I'll explain how to make a two column website template using KompoZer, a free web design software program, but most other wysiwyg web design software will work in a similar way. (KompoZer is an update of Nvu.) Even if you're using a different web page design program you still should be able to follow the example.

Things start getting a bit more complicated when you use CSS and virtual includes to make it easy to update styles, navbars, headers and footers, but it's well worth the extra effort.

Inserting a table in KompoZer

Creating The Table

At the top of the page in KompoZer you'll see a menu-bar with File, Edit etc, and Table. Click on the Table tab and you'll get an option to insert a table. Select three rows and two columns, click OK, and it will appear on the page.

Other Layouts

You can have 4 rows, and use the bottom row for your footer.

For a 3 column layout, just add another column.

Setting The Table Properties

Now you need to set the table properties. You can double click on the table, or click on Table in the menu-bar then Table Properties. When the table properties dialog box appears you get a few options. Click on the Table tab first.

You can reset the number of rows or columns in the Table Properties box if you need to.

There is an option to set the height of the table, but I leave that blank. Then the table changes to whatever height is needed.

KompoZer table properties dialogue box

Variable Vs Fixed Width

You can set the width of the table (and cells) as a percentage. Then when people view the table with different size monitors and different settings the table will change width.

There are problems with that though.

If you use a variable width table to make a website template the text rows can become too wide for comfortable reading, and that will annoy your visitors.  I prefer to fix the width in pixels to avoid that problem, and to control the layout better when I make a website template.

What Width Is Best?

I used to design for the 800 pixel display because there were a lot of people using it. However my website stats show that for this website only 1% of my visitors use an 800 pixel resolution now, and for my website, 4% use an 800 pixel monitor.

About 30% of my visitors use a 1024 resolution, and over 65% use higher resolutions.

Based on that I am now designing my pages to fit a 1024 resolution monitor. To leave plenty of room for scrollbars I'm making the table width 960 pixels wide.  You'll need to make your own decision on the best width to use. 960 pixels wide is quite common these days.

Border Width, Spacing and Padding

If the border is set to zero pixels it won't be seen when visitors see the page online, so do that.

Spacing is the gap between cells measured in pixels. It can be set to zero pixels for this table.

The padding is the distance the text or image is in from the border of the cell, measured in pixels again. For this table it can be zero.

Experiment with border widths, spacing,  padding and other table or cell properties to see what happens.

Leave the table alignment at left, and we'll center it later with CSS.

When you've set the table properties as you want them click Apply or Okay.

Setting The Column Widths

After the table properties are set, it's onto the column widths which you set with the cell properties. Open up the table properties dialogue box again if you closed it, then click on the Cells tab.

Because you'll be combining the two top cells into one to take the header graphic, you'll need to set the column widths in the second row.
Click the Next or Previous buttons until the first cell in the second row is highlighted. This will be the column for the navbar.

Setting the cell widths

I'm going to make the navbar column 200 pixels wide and put the navbar there in a virtual include

The right hand column takes up the rest of the table width. With a 200 pixel left column and a 960 pixel table that's 760 pixels.

Set the vertical alignment to top, middle, or bottom, whatever you need, and the horizontal alignment to left, center, right, or justify. I usually put another table in this cell to hold the content. For that reason I set the vertical alignment to top,  and the horizontal alignment to center.

You can set background colors of individual cells as well, which is good news if you want to have the left hand column a different color.

Set Up The Header Graphics Row

If you want your header graphic to span the whole table it's quite simple. Highlight both cells, right click in them and click Join Selected Cells. Alternatively click in the top left cell, go to Table in the menu-bar, and click on “Join With Cell To The Right”.

Combining cells for the header image

The whole top row becomes one cell and the header graphic can go from side to side of the table. 

You can change the header graphic on every page at once by changing the image in the header graphic file.

To make it more versatile though, you can put the header graphic in a virtual include. Then you can change it anyway you want, e.g. you can add text as well, not just change the graphic.

A Little Trick For Better Search Engine Descriptions

Have you ever looked in a search engine's results page and seen a description that just repeats the navbar. Here's one I just found in Google:  "Home · Landscaping · Utility · Septic · Specialty · Gallery · Company · Find A Dealer · Legal · Privacy · Contact · Site Map. Designed by:"

It's pretty ugly, and it will cut down on the number of visitors your site gets. It is because search engines can use the first text they find on a page as the description, and the navbar was in text rather than graphic buttons.

It shouldn't happen if you use a meta description tag, but to be doubly sure there is a little trick to use when you make your website template.

You can put a small cell above the navbar, so the first text the search engines read on the page is the content. 

To get that extra cell, make the table two columns and three rows as we have already done. The top row is for the header graphic. Highlight the right hand column, second and third rows by clicking and dragging. Right-click in the highlighted area. In the dialog box that appears, click on Join Selected Cells.  Check that the vertical and horizontal alignment of the combined cell are still okay.

Then select the little cell that will be above the navbar (middle cell, left hand column) and set its height to something small like 8 pixels.

Setting the cell height in KompoZer

You can see that little cell in the Web Hangar template above. It's right below the "Han" in "Hangar".  It's not essential to have this little cell, but it takes no time to set up, and it may help.

Make A Content Table

To put a table in the lower right hand cell for your content, click in that cell and then Table in the menu-bar, Insert, and Table just as you did before. Then set the number of rows and columns to one. Click Okay and the table appears.

Now go into the table properties and set the table width to what you want. I'm using 650 pixels. Then set the table alignment to Center, the border width to zero, and the padding and spacing the way you want them.

Having a table like this for the content can make the page look better, keeping your text away from the navbar and the table borders. You can manage without it, but you'll need to set the cell padding to 5 or 10 pixels or even more. That can affect how other parts of your layout look.

Experiment and see what suits you. I like to use the content table for better control of the web page layout when I make a website template.

Set Up The Navbar Cell 

About the only thing you'll need to do in the navbar cell (left hand column, bottom row) is to set the vertical alignment to Top.

I put the navbar in a virtual include to make updating easy.

Add Navbar, Virtual Includes, And Link To The Stylesheet

When the tables are set up the way you want them you can add in all the extras you need.  I put in a virtual include for a footer and also another one at the top of the page in case I might want to put an ad or a notice on every page.

If I don't want the ad on some pages I just delete the virtual include on those pages.

If you're using an external style sheet (CSS) to make site-wide changes to styles easy, then you'll be linking to it in your template as well.

We'll get to virtual includes and linking to stylesheets later in the tutorial.

Save Your Template

There are a few different extensions you can use when you save your template, such as htm, html, shtml.

If you're using virtual includes you'll need to save the page with the shtml extension, e.g. my-template.shtml

If you're not using virtual includes, then use html or htm. There's no real difference between them.

When you use the template to build a new page, save it using Save As, and save the page with the file name you want, which should include the keyword you are targeting on that page.

Three Column Template

The two column template works well with a small business website where you're giving valuable information to your prospective customers, and where you want to appear as a friendly, helpful expert.

If you prefer a three column template you go through all the same steps, just select three rows and three columns when you set the table up. For a 960 pixel wide table try 180 pixels for the left and right columns, 600 for the middle column, and maybe 550 for the content table. See what it looks like and adjust the sizes to fit your needs.

If you work your way through this page you should be able to set up tables for any style you want. Lay out your design on a sheet of paper then use tables to build it.

Using Other Software

KompoZer is free and it does a good job, but there are quite a few other programs you could use. If you use another program you'll have to search around for the Table options, but there should be similar options to KompoZer.

You Can Save Time And Effort By Buying A Template

Making your own template can take a bit of time, particularly if you run into problems and have to troubleshoot it.

Also, if you want to make a website template that's a bit more attractive and upmarket with nice buttons in the navbar, particularly if you want them to change when the mouse goes over them, it's harder and more time consuming. It needs more programming skills and you have to make the buttons in a graphics program, or buy them.

It can definitely save time and effort to just buy a professionally designed template so you can get on with the most important part of building a website – writing the content.

Web templates are part of the deal with Site Build It and Hostgator, or you can buy templates from sites such as Template Monster, or subscribe to a template service such as Dream Template.

Next Page: Setting Font Styles With Style Sheets

Pages In The Template Tutorial

Return from How To Create A Website Template to Building A Website home page