Creating Tables.

Introduction

Why would you want to use tables? There are a variety of different reasons for this, and on this page, I'll attempt to give you some pointers towards their use.

Setting out information

Tables are a great way to set out certain types of information. Think of them as a spreadsheet, and you'll quickly get the idea. So, if you are running a series of events and want to ensure that people can get a good overview, you might want to produce a table which looks something like this:

Of course, you could always present this information in a different format, but its a good way to neatly put it onto the screen, using a limited amount of space. Lets have a look at the code for that particular table:

<TABLE BORDER="1">
<TR>
<TD>Event</TD>
<TD>Time and Place</TD>
<TR>
<TD>A musical evening at the British Council office</TD>
<TD>24th December. 20.00 British Council Offices</TD></TR>
<TR>
<TD>British Authors speak their minds!</TD>
<TD>4th January. 19.00 Arts Centre</TD></TR>
<TR>
<TD>Football match between British Council XI and the American Embassy XI </TD>
<TD>12th March 14.00 National Football Stadium</TD></TR></TABLE>

Now, what are all those different elements?

• <TABLE></TABLE> opens and closes the table

• BORDER="1" places a border around the table so that you can see it

• <TR></TR> This stands for Table Row

• <TD></TD> Table Data, or the information which goes in each cell.

Making the table a little more interesting.

The first example is fine; there's nothing wrong with it. However, you might want to fiddle with your table a little bit, perhaps by centreing text, or aligning it to the left or the right. Lets start by having a look at the same table, but fiddled with a bit.

As you can see, I've now emboldened the two titles and centred them in their cells, and aligned right the text in the right hand window. I've also made the BORDER="10" instead of one, to make it really stand out from the page. Of course, in order to do this, I've added in some more elements. Lets take a look at the HTML for this table again.

<TABLE BORDER="10">
<TR>
<TD COLSTART="1" ALIGN="CENTER"><B>Event</B></TD>
<TD COLSTART="2" ALIGN="CENTER"><B>Time and Place</B></TD>
<TR>
<TD COLSTART="1">A musical evening at the British Council office</TD>
<TD COLSTART="2" ALIGN="RIGHT">24th December. 20.00 British Council Offices</TD></TR>
<TR>
<TD COLSTART="1">British Authors speak their minds!</TD>
<TD COLSTART="2" ALIGN="RIGHT">4th January. 19.00 Arts Centre</TD></TR>
<TR>
<TD COLSTART="1">Football match between British Council XI and the American Embassy XI </TD>
<TD COLSTART="2" ALIGN="RIGHT">12th March 14.00 National Football Stadium</TD></TR></TABLE>

Now, what are all those different elements?

• <B></B> Emboldens the text

• ALIGN="RIGHT" Aligns the text to the right, or left, or centre

Some more sophistication

I've now added in a new row to the table, centred it and emboldened. (I also justified left the right hand cells because I don't like the way it looked on the screen). The main change that I've made to the table now is to ensure that the very first row spans across the table. The appropriate bit of code looks like this:
<TABLE BOARDER="10">
<TR>
<TD ALIGN="CENTER" COLSTART="1" COLSPAN="2">
<B><British Council Events</B>
<TD>
</TR>

• COLSPAN="2" tells the browser to span two columns. This can be increased as needed

Tidying up

I've now centred the table using the normal <CENTER> and </CENTER> tags which go around the table. If I'd wished, I could have left or right justified it, but if you're going to have a table, you might as well make a feature of it. I've also matched up the width of the table cells so that they match in size. Normally a browser will do its best to fill the screen with the table, and will readjust automatically, but you can of course put in the <BR> to force a line break within a cell. The line of code which does this is:
<TD ALIGN="CENTER" COLSTART="1" WIDTH="200">Event</TD>

• WIDTH="200" specifies the size of the particular cells.

Finally, I put in a different colour background to further enhance the table and bring it to the viewers attention. The code for this is:
<TABLE BORDER="10" BGCOLOR="#80FFFF">

• BGCOLOUR="#80FFFF" Tells the browser to display the background of the table in a specific colour.

Summary

OK, those are some of the background elements that you'll need to know when creating tabular information. There are a few final pointers to remember:

• A table will only display when the browser has obtained all the data to go in it

• Not all browsers (especially old ones) support the use of tables.
  • Consider providing the information in a table in some other format

• Your authoring tool should do most of the work for you.

• You can use all the normal text effects, such as italics, bold etc in a table.

Finally...

If you thought we'd finished with tables, you're wrong. Click here to go onto the second page!