HTML:Tables

Introduction

There is again a mixture of opinions on the subject of tables. Most people agree that tables are a simple quick effective means of formatting content within a web page (they work the same way as a table in a spreadsheet or word document) however, some argue that CSS is the best way of arranging content on a page. For the purposes of this workbook we will continue to use tables as a formatting tool.

The Table Tag

The table tag is used to create the basic table structure. It defines and controls many aspects of the table’s appearance, some of which are discussed later in this chapter.

Tables are created by first creating an empty table, then creating rows within the table, then creating cells within the rows – Tables, Rows, then Cells. One or many cells can be on a row, one or many rows within a table.

The basic table tag is:

 <TABLE></TABLE>

There are a number of attributes that help in the presentation of tables – we'll look at some of them later in this workbook.

The Table Row Tag

The <TR> tag creates a row in the table.

<TR></TR>

The Table Cell Tag

The <TD> Tag is where the heart of table formatting is controlled. The <TD> tag creates a cell, or an individual box within your table. It has many attributes that you can set.

The easiest way to show you how tables work is to give you some examples.

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

TIME TO PRACTICE

Try the example above

Borders

What’s wrong? Where is my table? YOU’VE DONE NOTHING WRONG!!! The table exists; it is a single cell on a single row in a table. In order to put a box around the table, you need to set the BORDER attribute of the <TABLE> tag:

<TABLE border=1><TR><TD>Hello</TD></TR></TABLE>

The following is a more complex table example:

 <TABLE border=1>
 <TR>
 <TD><STRONG>Name</STRONG></TD>
 <TD><STRONG>Age</STRONG></TD>
 </TR>
 <TR>
  <TD>Sue</TD><TD>35</TD>
 </TR>
 <TR>
  <TD>Tim</TD><TD>43</TD>
 </TR>
 <TR>
  <TD>Alan</TD><TD>55</TD>
 </TR>
 </TABLE>

TIME TO PRACTICE

Try the example above.

Indenting your code

Indenting the code when writing tables is critical – you can see from the example above that it takes quite a few lines of code to generate a table with just a few cells in it. When creating large tables of many cells it can get quite difficult when needing to make changes, in trying to find where the line is that you want to change. Therefore it is critical that you indent your code to make it more understandable. All code within the table should be indented, and all code within each row should be indented again – this helps make the code more readable, and...

Matthew's Rule 11 – All HTML code must be correctly indented

Indentation in coding is critical to readability and reduces the time required to find sections that need to be changed. Failure to indent correctly in assessed work will significantly reduce your grade.

Colours in Tables

 <TABLE border=1>
 <TR>
  <TD bgcolor="green">THE GREEN SQUARE</TD>
  <TD bgcolor="red">THE RED SQUARE</TD>
 </TR>
 <TR>
  <TD bgcolor="yellow">THE YELLOW SQUARE</TD>
  <TD bgcolor="blue">THE BLUE SQUARE</TD>
 </TR>
 </TABLE>

TIME TO PRACTICE

Try the example above.

Perhaps you might like to change the colour of the PADDING between the cells. Try the example above, but replace the first line with:

<TABLE border=1 bgcolor="aqua">

Padding and Spacing the Cells

It is possible to control the distance between each cell, and also the space between the contents of the cell and the "wall." Each of these is controlled by an attribute of the table

CELLPADDING

CELLPADDING controls the gap between the text in the cell and the wall of the cell. Amending the example above with the following:

 <TABLE border=1 bgcolor="aqua" cellpadding=15>

Note the size of the cell contents area and the size of the gap between the cells.

CELLSPACING

CELLSPACING controls the gaps between the cells. Amend the example again like the following:

 <TABLE border=1 bgcolor="aqua" cellspacing=15>

TIME TO PRACTICE

At the end of each chapter, you should practice the lessons you have learned. Use your topic, as discussed in the first chapter, and try to add the new techniques you have found, into your pages.

Ready to move on?

Are you happy with your knowledge of tables? Ready to move on? Try 07 - Forms