ON LINE JONES

TABLES

Tables are a key element of Web Design. They are a brilliant way of pinning down content on web pages and you see them on most sites. Once you get used to the basic principles then you should be able to write and edit highly complex tables, although you might want to build them using Dreamweaver, Photoshop slices or other web authoring software. You'll still need the skills to edit them, though.

“Tables are a brilliant way of pinning down content on web pages...
...I've put a border on this one so you can see how the cell structure works.”

This table is made up of five rows and five columns with cells merged to make larger ones. The row along the bottom is filled with transparent giffs (invisible images 1 pixel high and the same width as the cell). They help pin the table down.

“This is fairly complex with tables inside tables...
...but for now we start simple and work up...
...to get you used to the basic principles.”

This is a fairly complex table, and there are more tables inside table cells to help lay out the text. I've put a border on it so you can see how it works.

In this tutorial we start simple with a single cell table, work up to multiple rows and columns and then finish up merging cells (learning one or two other tricks along the way).

SIMPLEST TABLE

The simplest table is a single cell structure like this one. In the simplest terms it is a table of one row and one column, and these have to be defined.

The code for a table is <table>, the code for a row is <tr> and the code for a cell is <td> (table division - columns are made by cells from different rows stacking up on top of each other). Each tag has an end tag, and cells go inside rows which in turn go inside tables. This means that the code for a basic one cell table is:

**Oh no, it's that frog again**

<table><tr><td>
</td> </tr></table>

with the content going in the middle. In other words if we put our frog in the table the code will be:

<table><tr><td>
<img src="frog3.gif">
</td> </tr></table>

So you can see the table we'll give it a border of one pixel, and we're also gonna give it a caption at the bottom. This one's new on me, but very useful with pictures. The full code will be:

<table border ="1" ><caption align="bottom">Oh no, it's that frog again</caption>
<tr><td>
<img src="frog3.gif">
</td> </tr></table>

You can also apply font instructions to the caption; and here I've aligned the table to the right to let the text run round it. Try viewing my source code to see how I've done it. Do all this to the page tables1.html you prepared earlier, typing the table code in in front of the h1 text, save and view.

Then click on my double view and compare.

ROWS AND COLUMNS

When you build a table in rows and columns you start by building rows with as many cells (otherwise known as table divisions <td>) as you want columns. The cells in the different rows automatically line up with each other to make columns.

First we're going to build a table with one row and three columns.

On a new HTML page that you've called TABLES 2 and saved as tables2.html key the following code into the body section:

<div align ="center"><h1>Tables 2</h>
<table border="1 width ="80%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

Save and view (the code   means non-breaking space - if you don't put this into an empty cell Netscape browsers won't recognise any background images or colours in that cell so you do it just in case).

Then click on my double view and compare.

Notice that I've already given the page properties such as background, text and link colours. I just use the <div> tag to align things in the centre.

MULTIPLE ROWS

To build another two rows all you have to is take the highlighted text, copy it, and then paste it twice inside the table (either at the start or the end)

<div align ="center"><h1>Tables 2</h>
<table border="1 width ="80%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

Then click on my double view to see if you've got it right.

ON LINE JONES

home back TABLES(contd)

Hosted by www.Geocities.ws