Adding HTML Tables to your Web Pages

With HTML, positioning things like images and text where you want them to appear is next to impossible. Trying to position an image in the centre of the page, with images diagonally to the right of it is something you just can't do in straight HTML - unless you use Tables.

Tables were introduced to HTML as a way to make textual data look more presentable on the screen. Things like statistics could be presented in neat rows and columns, making them easier to read. Tables are still used for that purpose. But the fact that cells in tables can be coloured, height and width changed, images placed in cells, makes them far more handy than just a data presentation tool.

In this section, you'll learn how to do both: present data using a table, and using tables to get more creative. As Tables can be quite complex to set up, your HTML Editor can be used to do most of the hard work. So let's make a start.

Data Presentation

We're going to use the HTML Editor to design the table you see below:

That's the basic table we'll start with. Then we'll see ways to tidy it up a bit. First, the basic table tags are these:

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

The table tags come in pairs. To set up the table, the TABLE tag is used. There is a start tag and end tag. In between these two tags are the table Row tags <TR> </TR>. For every Row in your table, you need at least one Table Data tag <TD> </TD>. The Table Data tags represents the cells in each row. In each row of the table above, we had a home team, a score, an away team, and the away team's score. So each Row in our table had four cells in it. For one individual Row, the code would look like this:

<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

That code means set up a table with one Row, and put four cells into the Row. That, in our example, would get us the Arsenal versus Leeds score (well, it would if we typed the data in).

The data itself, the text you want people to see, goes between the two TD tags. Like this:

<TABLE>
<TR>
<TD>Arsenal</TD>
<TD>2</TD>
<TD>Leeds</TD>
<TD>1</TD>
</TR>
</TABLE>

If we wanted another Row to our table, we would just add another set of TR tags, and four more TD tags. Like this:

<TABLE>
<TR>
<TD>Arsenal</TD>
<TD>2</TD>
<TD>Leeds</TD>
<TD>1</TD>
</TR>

<TR>
<TD>Derby</TD>
<TD>1</TD>
<TD>Everton</TD>
<TD>1</TD>
</TR>

</TABLE>

And that's a basic two Row table, with four cells in each row. There is no extra formatting added to the tags. The browser would not put a border around that simple table, nor would it add a caption.

In the next part, we'll use the editor to set up a table.

Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Course