Kaye and Geoff's web page documentation 

Web page layout

The <br> and <p> tags only allow a very simple level of formatting in web pages - text can be broken up into blocks, but not much more. The most basic structure that HTML provides to specify a more sophisticated layout is tables. Tables allow all or a part of the page to be envisaged as a grid, so that the contents of the table are held within its cells.

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

Tables are reasonably complex structures requiring several tags in their definition. The entire table is bounded by <table>...</table> tags, within which each row is specified by <tr>...</tr> (table row) tags. Within the rows, cells are defined by <td>...</td> tags. All the contents of the table exist within the <td> tags.

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 &nbsp; entity):

<table border="0"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>
Here is how the browser displays it:
   
   
We promise that it is there, but after all it is an empty table with no border. In our examples it would obviously help to see the outlines of the tables, which we can do by giving the "border" attribute in the <table> tag a value of "1". At the same time the cells can be given some visible content, padded around the edges (cellpadding="5"), and the whole thing placed in the centre of the page (align="center"):
<table align="center" cellpadding="8" border="1"> <tr> <td>The quick</td> <td>brown fox</td> </tr> <tr> <td>jumped over</td> <td>the lazy dog</td> </tr> </table>

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
<tr> tags are not normally given attributes, although the standard (4.01 at least) allows it some. Attributes used with <td> tags are:
  • 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:

<table width="400" cellspacing="0" cellpadding="5" align="center" border="0"> <tr> <td>&nbsp;</td> <td bgcolor="#ff3333" align="center"><img src="images/farm.gif"><br>Our farm</td> <td>&nbsp;</td> </tr> <tr> <td bgcolor="#00ff00">We live on a farm in the coutryside</td> <td>&nbsp;</td> <td bgcolor="#7777ff">We have sheep, cows, horses, two dogs and a cat</td> </tr> </table>
and this is how the browser displays it:

 
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:

<table width="400" cellspacing="0" cellpadding="0" align="center" border="1"> <tr> <td width="25%">&nbsp;row 1</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td colspan="3" bgcolor="#77ff77">row 2</td> <td rowspan="2" bgcolor="#77ff77">&nbsp;</td> </tr> <tr> <td rowspan="3" colspan="2" bgcolor="#ff7777">row 3</td> <td bgcolor="#ff7777">&nbsp;</td> </tr> <tr> <td bgcolor="#7777ff">row 4</td> <td rowspan="2" bgcolor="#7777ff">&nbsp;</td> </tr> <tr> <td bgcolor="#ff77ff">row 5</td> </tr> </table>
which displays as follows:

 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 another element. This approach must be used with great care since it is easy to make mistakes and have one element appear over the top of another under some circumstances, even though you do not see this happening on your screen with your settings. 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 html.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.

Top
Previous
Next
Index
Home