PDA

View Full Version : HTML Tables



H2SO4
26th April 2005, 07:25 AM
Ok so now u can create a basic web page using html tags, add images and links and format it using different colours, fonts, etc. Great except for one thing, it's pretty linear, flat and boring right?

What happens when u want to change the layout and say put an image beside a block of text in the same row? Well with what you know so far u can't... what u need are tables. Tables allow u to alter the layout of ur page by dividing it into rows and columns, with or without borders, into which you can put any type of html content. If you care to look at the source code on many commercial websites you will see that many of them use tables extensively to create a very professional and clean look.

Ok, so how do u create a table? Well, u need 3 different tags -

1) the table tags <table> </table>
2) the table row tags <tr> </tr>
3) the table data cell tag <td> </td>

A 4th optional tag is the caption tag <caption> </caption> which will give a title to ur table and goes between the opening 'table' and 'tr' tags.

So how do these form a table? Well in this example we will create a table with 1 row and 2 columns. To show you more clearly where the cells are I'll add the 'border' attribute to the table tag, but if ur using tables to position different html elements on a page it isn't necessary to use it.


<table border="1">
<caption>table title</caption>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>

Example 1 (http://www.geocities.com/lawli56/basictable.html)

In this next example I have added the table heading tags <th> </th> to the columns and another row of cells:


<table border="1">
<caption>Vital Statistics</caption>
<tr>
<th>Name</th>
<th>Height</th>
<th>Weight</th>
<th>Eye Colour</th>
</tr>
<tr>
<td>Alison</td>
<td>5'4"</td>
<td>140</td>
<td>Blue</td>
</tr>
<tr>
<td>Tom</td>
<td>6'0"</td>
<td>165</td>
<td>Hazel</td>
</tr>
</table>

Example 2 (http://www.geocities.com/lawli56/basictable2a.html)

Ok, so that's the basic structure and it enables u to position different html elements where u want them on a page or create a table of results, etc, but as you can see there are some limitations with the basic structure. By default all content will be aligned to the left of the data cells and the cells will adjust to the size of the content. So what do we do to place the content exactly where we want it on the page or make the cells keep to a uniform size? Well we use tag 'attributes' to tell the browser how big we want the table or the cell to be, where we want it aligned on the page and how to align the contents both horizontally and vertically in the cell.

Lets start with the size and positioning of the table:

You can size the width of a table by using either 'pixels' as with an image or by percentage of the width of the page.


<table width="100%" > or <table width="600">

You can use the 'align' attribute to align the table left/center/right within the flow of the text on the page, but if you want to centre the table on the page on the page itself then it is better to use the <center> or <div> tags outside of the table.

Now for the datacells:

As with the table tag, you can use the width attribute to determine the width of each cell in either pixels or percent:


<td width="50%"> or <td width="300">

and the 'align' attribute to align the contents of the cell


<td width="50%" align="center">

You can also use the 'valign' tag to vertically align ur contents at top/middle/bottom/baseline:


<td width="50%" align="center" valign="middle">

Example 3 (http://www.geocities.com/lawli56//basictable1a.html)

You can then use the 'cellspacing' attribute to create space between the cells and the 'cellpadding' attribute to create space around the elements in the cells:


<table width="600" cellspacing="10" cellpadding="10">

Example 4 (http://www.geocities.com/lawli56/basictable1b.html)

I think that's prolly as far as you need to go for now. Look at the source code on the pages through the view menu of ur browser.

Next time we'll look at a more complicated table and add more useful elements and attributes to it. Oh and one last thing for now - border="0" will make all the nasty lines disappear when you've got your layout right.