TABLES

Tables in HTML were orginally developed & are still used to display data e.g.-

But in terms of web design they've become so much more.
Tables allow you to control the overall layout of a web page as seen on any size screen as well as position and control the display of blocks of text or images.

As we've mentioned before basic text and images on webpages will simply warp to fit the size of browser window. This means that if you try to create a good layout on your machine like this

Then the layout effect could be dramatically altered & even ruined on another size window e.g.

Click here to see an example of this in practice

Tables allow you to stop this warping and also give extra control to the layout

Here is an example from the links page (we've kept a border so you can see the compartments or cells - but you can make this invisible

We also use tables to control the layout of our page. We currently use a 600 pixel width table to hold all data in our pages. This means data will be diplayed exactly the same way on different sized monitors using the same browsers.The page is always 600 pixels wide even when viewed in a window smaller than 600 in width (you'll need to scroll over to see everything)

We used to use to divide the page up into cells for the menu(2) and one for the bulk of the page(1) with a small gutter cell between.

The whole table was limited to 580 pixels across (see page design tutorial as to why that was chosen)

Click here to see our page layout explained further

Table Basics

Each box in a table is called a cell. Cells that run across in a table (i.e. the yellow and blue ones in the table above are called rows. The vertical sequence of cells (e.g. the red and yellow) are called columns.

The primary tag for defining a table is <table>

Once you have indicated the start of a table you then define it in terms of rows using the table row tags (<tr>)

Each cell in the row is separated by <td> (table data) tags

here is a 3 x 2 table (we've added the border attribute so you can see it- we'll discuss this later)

<table border>
<tr>
<td>top cell 1</td>
<td>top cell 2</td>
<td>top cell 3</td>
</tr>
<tr>
<td>bottom cell 1</td>
<td>bottom cell 2</td>
<td>bottom cell 3</td>
</tr>
</table>

What you should see is this

You can put text, images, links and almost any item in a cell by placing it between <td> tags

Altering the Whole Table

You can alter the appearance of the whole table by addingattributes to the <table> tag. You've already seen theborder attribute here are some more

align

Just as with images. Select from left,center or right

border

Sets the thickness in pixels of a border around all the cells. The default is zero. Add border on its own and it becomes one. You can set the value e.g. border = 7 gives a 7 pixel wide border

cellpadding

Defines the space between the edge of a cell and its contents

cellspacing

Space between each cell in pixels. Default value is 2

width

specifies width for table either in pixels or percentages (e.g.. If select 100% will fill whole width of screen)

bgcolor

Defines the colour of the table. Works exactly as creating a background colour for a page
e.g. <table bgcolor = "#00FF00"> for a lime table

background

Creates a background image. Works exactly as creating a background image for a page
e.g. <table background = "yourbackground.gif">

Altering Rows & Cells

Just as you can add attributes in the <table> tags you can put them in the <tr> & <td> tags too !!

 

width

specifies minimum width for cell either in pixels or percentages relative to width of table

align

sets the horizontal alignment of the cells (left, center or right)

valign

sets the vertical alignment as shown below

bgcolor

Defines the colour of the table.
Works exactly as creating a background colour for the whole table
e.g. <td bgcolor = "#FFFFFF"> for a white cell

background

Creates a background image.
Works exactly as creating a background image for the whole table

BACK TO INTERMEDIATE HTML MENU