If your website uses tables for its layout, such as to create a two column or three column effect, and your leftmost column is a navigation side bar like thesitewizard.com's, the HTML code for your navigation side bar will come first on your web page. This is because tables are coded so that the first column is presented first, followed by the second column, and so on. Some webmasters don't like this arrangement, preferring that their real content come first on their web page. This article discusses how you can achieve this while still using a table layout.
Note: if you are using Cascading Style Sheets (CSS) for your site's layout, this article does not apply to you. You can easily code your layout so that your content appears first using CSS and still position it anywhere on the page, without using any coding tricks.
This article makes the assumption that you already know how to create a website, either directly in HTML and CSS, or using a web editor like Dreamweaver, Nvu or KompoZer. If this is not true, please see How to Start / Create a Website instead.
Here are a couple of reasons why some web designers prefer to present their content first on a web page:
The most important reason for presenting content first on a web page is that it makes your website more accessible to blind visitors who rely on screen readers to "view" your site's contents.
It's easy for sighted users to skip the left column of your website and zoom straight into your content. One glance at your page tells them where the real information can be found, and they immediately focus there. Unfortunately, those who rely on screen readers cannot do this. The software reads aloud everything it finds on the page in the order in which it appears. If your navigation menu appears first on the page, your visitor will have to listen to the program read every single line on that menu before he/she arrives at the content. This is a very torturous and time-consuming process, as I'm sure you can imagine.
As a result, webmasters who are accessibility-aware try to create sites that are more friendly to such users by putting their content first on the page.
In days of old, search engines were not as advanced as they are today. The snippet of text displayed in a search engines' results for your site in those ancient days was sometimes taken from the first few lines of your website. As a result, some webmasters wanted to make sure that the first few lines contained real content instead of their menu bar. Nowadays, search engines are much smarter, and try to grab the relevant terms from your page and display the content around that term instead. You can also control the snippet to some extent by setting your site's meta description tags.
In the past, some search engines also reportedly gave the text occurring at the top of your page higher significance than that being displayed lower in your page. I doubt that this is the case today, although, not being an employee at any of the search engines, I cannot be sure about this.
If you are using a table layout for your site, and wish to put the content first, you do not have to redesign your site to put your navigation side column on the right. Instead, you can use a simple HTML trick to accomplish this.
Since this tutorial caters to both the people adept at HTML coding as well as those using WYSIWYG web editors like Dreamweaver, Nvu, KompoZer, I shall provide information for each of these situations in separate sections below. You do not have to read all three sections. Just skip to the section relevant to you.
Note that for the purpose of this article, I will assume that your site has a layout something like thesitewizard.com's, where the leftmost column has a navigation menu and the main content is located in the second column. If your site already has your main content in the leftmost column, you don't have to read this article, since, under normal circumstances, in a table layout, your content will already come first.
A 2 column website using tables for layout typically has an HTML skeleton like the following:
If you have 3 columns then you will have an additional <td></td> block. In all cases, you only have one row, or one <tr></tr> pair of tags.
To make your content come first, change your layout so that it looks like this:
Notice that in the top row, the first <td></td> pair is empty, but your content goes into the second cell as usual.
The second cell also has the rowspan attribute so that it occupies the entire vertical column. The side panel
is placed in the cell in the second row. I have also set a the spacing between cells and the padding within each cell to 0.
The effect of this is that visually speaking, your page will appear almost identical to your original, except that your content now appears first in the source.
There are side effects however. The first side effect is that unless you take special measures, there is no white space
between your text and the edge of the cell, nor any space between the two columns. This is because, as noted earlier,
the cellspacing and cellpadding have been set to zero. Since this is rarely desirable, you
have two solutions, all of which have their own side effects:
Give a non-zero value to either cellspacing or cellpadding or both. This will give some sort of
margin between your two columns.
However, depending on how large a value you set, if you scrutinize your web page carefully, you will find that the top edge of the words in your first column will now be lower than that of your second column, since the empty cell in the first row will now occupy more space. This may or may not be a problem depending on the sensitivity of your site's design to alignment issues. If it's a problem, you can compensate by inserting white space into the top of your second column so that the top edges of the text in both columns align. This can be done by using CSS, inserting <br> tags, or inserting a transparent image with the height you need.
Use CSS to style everything that appears in both columns to leave margins of white space.
If you don't really know CSS, and are reading this section purely for curiosity, use the first method, and insert either <br> tags or a transparent image to align the columns.
Incidentally, if you already know how to use CSS to style your web pages, and have no specific reason why you need to use a table to lay out your site, consider using styles to create the multiple columns instead of tables. Using CSS, you can position any block of text anywhere on your page with impunity, and you can change the appearance of your entire site on a whim by simply modifying your CSS file.
For this trick to work, you will need to use Dreamweaver to create a table with 2 rows. I will assume that you are creating a 2 column site in my example here, but the method can also be used to create 3 columns as well.
Select "Insert | Table" from the menu. That is, click the "Insert" menu followed by the "Table" item.
Enter "2" (without the quotes) into both the "Rows" and "Columns" fields.
Since you are using the table for layout (rather than normal data), change the table width from its default of 200 pixels to 100 percent, so that it occupies the entire width of the screen.
Change the "Border thickness" to "0" (that is, zero, without the quotes).
Enter "0" (that is, zero, without the quotes) into the "Cell spacing" field. Enter "8" or some other number into the "Cell padding" field. You can also enter zero ("0") here as well, if you wish, but if you do, there will be no margin or white space between the text in your first and the second columns.
In the "Summary" field, enter the word "layout". This will not be displayed, but is there for accessibility reasons.
Click the "OK" button when you're done.
A table will appear on the screen. The table will have dotted lines for its borders, signalling that the borders are actually invisible. Move your mouse over the top cell in the second column and drag it downwards to select both the cells in that column. That is, select both the top and bottom cells in the second column. We are going to merge them so that they become one vertically-long cell.
If you have correctly selected the two cells, you will see that the second column, which houses your content, now have solid borders, signalling that they have been selected. Select "Modify | Table | Merge Cells" from the menu. The second column will now be a single cell spanning two rows.
Click somewhere in the lower cell in the first column. At the bottom of the Dreamweaver window, in the Properties panel, you should be able to spot the word "Vert" followed by a drop-down box with the word "Default" in it. Click the down arrow in the drop down box and select "Top".
While still in the same cell, look for "W" with the blank field beside it. This sets the width of the column. You will normally want to fix the size of the side column so that it doesn't get too wide. Enter "20%" (without the quotes), or some other percentage value into the blank field to set the width of that column. If you want the column to be fixed to a width of (say) 200 pixels, just enter "200" (again, no quotes) into that space.
Click somewhere in the second column. Again, in the Properties panel, select "Top" for the "Vert" alignment.
To use the table for your site, enter your content into the second column, but create your side column in the second row cell of the first column. Re-read the previous sentence again — this is important. Do not put anything in the top row of the first column.
As you populate both columns, you will notice that the top cell appears to shrink in size. It will not completely disappear, since you gave it a cell padding of "8" earlier, which means that it will occupy at least a few pixels of vertical space; the exact amount seems to depend on the browser.
To make the top lines of your two columns align, you will probably need to add some blank space to the top of the second column. Note that it is not possible to accurately judge how your site will really appear from within Dreamweaver — what you see here is not necessarily what you get in a web browser. In fact, different web browsers all render this empty space with different heights. I suggest that as you work, regularly check how the page is rendered in the major browsers. If you have set up Dreamweaver correctly, you can use "File | Preview in Browser" from the menu to access the browsers currently installed on your system.
Footnote: Dreamweaver makes it easy for you to create websites using CSS. Unless you have special reasons, you might want to consider using CSS to lay out your site instead of tables.
To make your content come before your side panel in either KompoZer or Nvu, create a table with 2 rows and 2 columns instead of the usual 1 row and 2 columns. I'm assuming, for the purpose of this tutorial, that you are creating a 2 column layout for your site, with the content in the second column.
Select "Table | Insert | Table" from the menu. That is, click the "Table" menu, followed by the "Insert" item on the menu that appears, and then click the "Table" item on the new menu that pops up.
Click the "Precisely" tab in the dialog box that appears.
If it's not already there, enter "2" (without the quotes) for both "Rows" and "Columns".
Enter "100" (again, no quotes) for the Width field and select "% of window" from the drop down box (unless those fields already contain the correct values).
Enter "0" (zero, without the quotes) into the Border field.
Click the "Cell" tab. Select "Top" for the "Vert. alignment" drop down box.
Enter "0" (zero, no quotes) into the field for "Cellspacing".
Enter "8" (no quotes) into the field for "Cellpadding". You can also enter any other number here as well. Note that if you put zero ("0") here, there will be no margin or white space between the text in your first and the second columns.
Click "OK".
Put your mouse cursor over the top cell in the second column, and drag down to the bottom cell in the same column. This should select both cells in that column. Click "Table | Join Selected Cells".
Click the lower cell in the first column. Click "Table | Table Properties". In the dialog box that appears, click the "Cells" tab.
Click the checkbox beside the word "Width" and enter 20 into the field beside it. Select "% of table" from the drop down box beside that. This sets the width of the side panel to 20% of the table width. If you want your side panel to have some other width, even a fixed width like 200 pixels, you can enter your own values here. Click OK.
As you probably already know, your content is to be entered into the second column. For the side panel however, you should create it in the cell in the second row of the first column. Re-read the previous sentence again — this is the whole point of the exercise. Do not put anything in the top row of the first column.
Although the top left column cell is empty, it will still occupy some space, particularly since you gave it a cell padding of "8" earlier (the exact amount of space appears to vary according to the web browser). To align the top lines of both columns, you will need to add some blank space to the top of the second column. Note that you cannot depend on Nvu or KompoZer to tell you how much space to add, not even in the "Preview" mode. Instead, you should save your page and open it in a web browser to see whether you have added too little or too much space. Try it out in more than one browser, since different browsers display things differently.
The HTML trick in this guide will allow you to present your content first on your multi-column web page, while still using a table layout, so as to improve the accessibility of your web page.
Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Present Content First in a Multi-Column Table Layout
