Kaye and Geoff's web page documentation
Web page layoutThe <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.
TablesTables 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 entity):
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:
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:
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:
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.