Web page layout

Since cells can be combined and can contain other tables, and the table size and position on the page can be controlled, this is a surprisingly flexible and powerful way to set out regions of a web page. For example the section of a page to the right betrays very little presence of its underlying table structure.

Tables

So here is the HTML for a very basic table with two rows and two columns (each of the four cells just contains a blank character, specified using the   entity):

The quick	brown fox
jumped over	the lazy dog

Tables are not inline HTML elements, ie. they always start on a new line. By default the table is positioned at the left hand margin of the browser window, and is drawn at the smallest size possible to hold its contents. By default cell contents are aligned to the top and left of the cell. But these and other characteristics of tables can be changed by including the appropriate tag attributes. These are attributes which can be used with the <table> tag:

• border="x" - x can be "0" (no border) or an integer which defines the width of the border (in pixels) used to outline the cells
• width="x" - x is a number which "suggests" to the browser how many pixels wide the table should be. Depending on the contents of the table, it may not be possible for the browser to make the table the specified width; if this is the case it will do its best.
• width="x%" - x is a number which "suggests" to the browser how wide the table should be as a percentage of the window (or bounding container) width. With this attribute, if possible the table adjusts in size if the window is resized. The note above applies here also.
• cellpadding="x" - x is the number of pixels of padding within the bounds of each cell
• cellspacing="x" - x is the number of pixels of padding between cells

• align="x" - x can be "left", "center" or "right"; this controls the horizontal alignment of the cell contents
• valign="x" - x can be "top", "middle" or "bottom"; this controls the vertical alignment of the cell contents
• bgcolor="#hhhhhh" - hhhhhh is a triplet of three hexadecimal (base 16) numbers which together define a background colour for the cell. Hexadecimal numbers and their use in defining colours within HTML is discused in detail in another page.
• colspan="x" - the number of columns which this cell is to span
• rowspan="x" - the number of rows which this cell is to span

The number of attributes available for use with tags used in tables has changed with each version of the HTML standard, but those listed above are commonly used. Here is the HTML for a two by three cell table which illustrates the use of some of these attributes:

	Our farm
We live on a farm in the coutryside		We have sheep, cows, horses, two dogs and a cat

In the above example the cell structure is fairly obvious even without the border turned on, but when using colspan and rowspan it can be quite difficult to get it right first time (it helps to draw your design on a bit of paper first). In this case, in fact generally when creating tables, it can be very helpful to have the border turned on during the development process even if you do not want borders in the final result - just set the border attribute to "0" when you have the table built to your satisfaction. In the following (five rows of three columns) example the rows have been colour coded and borders turned on to illustrate how colspan and rowspan work. The HTML is:

row 1
row 2
row 3
		row 4
		row 5

Once you have mastered the use of tables you will be able to set out your pages with considerable precision. Modern versions of HTML introduce theoretically better ways of laying out the contents of your page, by using style sheets. However style sheets have been implemented differently and without much attention to standards by different browsers, so you should consider (and then test!) carefully if you want to use this approach.

CSS also allows the use of absolute positioning, where pictures, text or other HTML elements can be placed on the screen starting at a particular pixel relative to the top left hand corner. The problem is that you cannot be sure how much room all the other text on the page will need, leading to (maybe not on yours but on most other screens) overlapping elements or blank areas where you do not want them. Turning the entire page into graphical elements to fix this problem is not likely to be a good idea.

The web has a good selection of tutorials for beginners. For tables you can try www.htmlcodetutorial.com/tables/. For examples of pages layed out largely with tables where the cell structure is not so obvious, have a look at our cooking conversions or new house pages.