HTML

Tables

Using tables to arrange information and images

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.

Table Basics

Adding headers, cellpadding and cellspacing, and nesting tables

Alignment, width, height

Organising Forms

HTML

Tables

Using tables to arrange information and images

Magazine style web pages

Using Tables for magazine style