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.
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.
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.
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.
You can have 4 rows, and use the bottom row for your footer.
For a 3 column layout, just add another column.
you need to set the table properties.
You can double click on the table, or click on Table in the
then Table Properties.
When the table properties dialog box appears you get a
few options. Click on the Table
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.
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.
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 www.about-alzheimers.com, 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 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.
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
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.
I'm going to make the navbar column 200 pixels wide and put the navbar
there in a
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.
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”.
The whole top row becomes one cell and
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.
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.
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.
To put a table in
the lower right hand cell for your content, click in that cell and then
the menu-bar, Insert,
just as you did before. Then
set the number of rows and columns to one. Click Okay and the table
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.
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.
tables are set up the way you want them you can add in all the extras
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.
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.
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.
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.
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