Do You Know HTML Tables?

If you haven’t looked at our Introduction to HTML Tables then head over there and then come back!

Using tables, as with using HTML Frames, to create a page layout is an old-school method of creating page layouts. That being said, if you know your target visitors are on tablets or larger screens then you could still use this method.

Another restriction of tables is that they are not innately responsive (not mobile-friendly). Using CSS you can re-defined tables in such a way as to make them mobile-friendly but it is a pain in the back side!

With those two caveats in mind let’s look at how you can create a page layout with HTML Tables.

Plan Your Layout

The most important task you can do before starting any coding is plan! This applies even when we later add mobile-friendly (responsive) tutorials later. Planning your site, the website structure and the layout can save you headaches and heartaches later.

For the purposes of this tutorial, I want to keep the layout simple as a demonstration. You can then use your imagination and build whatever you want.

So here’s a ‘standard’ layout including header, sidebar, content and footer. I have used background colours here to make the different segments stand out.

Construct Your HTML Table

When creating a layout using <table> tags, you don’t need to panic. The reason is that it is just a simple table. However you will need to bear in mind the following:

• You need to use valign: in this layout you must use the valign="top" on both your sidebar and your content area. The reason is that your content area will vary across pages. If you don’t valign the navigation on long pages, your links will appear in the middle. If your navigation has a lot of links, but the content area is short (say, a Contact page) then your page content will end up in the middle (between the top and bottom, that is). So you pretty much always need to valign="top" on your content and navigation area
• Check your colspans and rowspans: As your site gets more complicated you need to verify your colspans and rowspans. If you need to put another table inside your content area this is fine, but you will need to be careful. Always close your TABLE, TD and TR tags before you populate them.
• Create a ‘Template File’: Unlike HTML Frames, you don’t need to use the target attribute on links. However each page has its own table layout, its own header/footer/navigation etc. So create yourself a template file containing all the links you intend to have. If you spot differences in layout across pages, it will be because you have something different in your HTML. And this is one of the downfalls of using HTML Tables for page layout!

The Code

Here’s the code to create the above layout (without the background colours).

<table width="100%" border="1" cellpadding="5"> <tr>     <th colspan="2"><h2>Example HTML Table Page Layout</h2></th> </tr> <tr>     <td valign="top" width="20%"><center><a href="index.html">Home</a><br><a href="about.html">About Us</a><br><a href="contact.html">Contact Us</a></center></td>     <td valign="top"><p>Here we will have the page content.</p><p>The home page should be an introduction to the purpose of your site.</p><p>It should also encourage people to go deeper and learn more about you.</p></td> </tr> <tr>     <td colspan="2">&copy; Tutorial Resource Centre</td> </tr></table>

Centering Your Table

You have two options when deciding how much space your website will take up: percentage of screensize, or absolute size. If you want your site to work on most screens, then use percentages. If however you want to specify the width, then you can do that – e.g. width="800" rather than width="100%".

But your table will sit on the left hand side of the browser by default. This can give acres of whitespace to the right of your website – not a good luck. Thankfully this can be easily changed.

<table border="1" width="100%" align="center" cellpadding="5">

The align attribute here ensures your table sits in the middle of the screen. This is important for wider screens especially.

Tables and Responsive Design

Earlier I said you shouldn’t use this layout method when making a mobile-friendly website. I still stand by that. However you can get around this. The problem with mobile-friendly designs is that, unlike desktops/laptops, phones are in portrait orientation.

As phones are usually interacted with in portrait mode, this makes the use of sidebars pointless. So you can get round this and make a roughly mobile-friendly design using tables if you use percentages and row-based TRs rather than column-based. e.g.

The main downside to this is that you need to use width="100%" on your table which will make your site hard to read on wide screens. So in theory this is possible, but it isn’t ideal. I’ll cover responsive design later on in our CSS3 Tutorials.

Tables and Images

The last issue I want to deal with is a difficulty in using images in a table layout. When you create an image, say in Photoshop or GIMP, it has a set width. This means you need to make sure your table is sized appropriately.

For images you are using as part of your layout – say a header banner or graphic – you have to think this through. If your site is of a fixed width – then you want your graphics to be no bigger than your fixed width. If you’re using percentages however, you may need to create a graphic much bigger – so that it always fills the space.

To ensure your header graphic does not warp or distort, you can set the width="100%" but not set a height attribute. This is done like this:

<img src="images/header-graphic.jpg" alt="Welcome to my website" title="Welcome to my website" width="100%">

By not setting the height you keep the aspect ratio the same regardless of the size of your table cell.

If you find your images are making your tables wider, then you can reduce the width attribute until your layout returns to normal.

TL;DR HTML Tables for Page Layout

• Using Tables is an old way of creating page layouts, but is possible.
• You have to choose fixed width or percentage base when determining the size of your website.
• Bear in mind that common elements (header, footer, navigation) will need to be copied across all pages of your website.

If you have any questions, feel free to hit the button:

Spread the Word