Arranging Information & Images
Note. These pages have not been upgraded from HTML to XHTML
Note. Using tables for layout purposes can make life difficult for people using text readers.
View source to see the code
Please scroll down
Tables can be an easy way to arrange information and images, and control layout.
Magazine style web pages
| To achieve the look of a basic two-column magazine, use a table comprising one row with 3 cells, keeping the middle one empty for blank space between the 2 'columns'. To create space between table cells and their contents, use cellpadding, which controls the amount of space between the edge of a cell and its contents. | Try giving a cellpadding value of at least 5 to the table tag, including for the blank cell. Arrange the text so it is roughly equal, but don't worry too much as it will change if the user resizes their browser. | |
| You can use the width attribute (percentage or fixed) in the table tag of a 2-column table to make one column wider than the other, for example, so that one is for the main text, and the other is for comments, etc. | This obviates the need for frames. |
Create a single pixel (dot) image. Use the height and width attributes of the image tag to stretch it in either direction. You can then use it as a vertical rule between columns - just set specifying the height attribute of the <IMG> tag equal to the pixel height of the particular column. Use 85 pixels per inch as a first approximation.
Restrict your tables to 3 columns if you want all your users to be able to view it without scrolling. Add a (e.g. <TD colspan=3>) attribute to any cell containing an image that you want to span over more than one column. Add a (e.g. <TD ROWSPAN=2>) attribute to a column to make it span more than one row.
Using Tables for magazine style | ||||
|---|---|---|---|---|
| start...
A "callout" - information you want to stand out. more info... | 
| yet more info... | 
| and there's more... |
Magazine style web page using a table.
| ||||