Coding Tables

In order to code tables, there are a few terms you need to know, first:

Cell:  one block or section of a table.  If you've ever used a spreadsheet, you'll recall that it is made up of rows and columns.  The section where a row and column meet is a cell.  We identify cells in HTML with the term "table data".
Row:  one row of a table;  a row contains one or more cells.  We identify a row in HTML with the term "table row".

Here is an example of a table with 3 rows and 3 columns, with the cells' contents containing the identity of each row, column, and cell:
 

We will use the above example to show how to code a table in HTML.

We start our table with the <TABLE> tag.  We must remember to also close our table with the </TABLE> tag.  If you forget the closing tag, your table won't show.  The <TABLE> tag also contains some attributes that set up your table's alignment, border width and spacing.  An example of this tag would be the one used in the above table:

<TABLE BORDER=3 COLS=3 ROWS=3 WIDTH=50%>

Lets look at each attribute:

BORDER
This attribute determines the width of the table border (the lines that define the outside of the table) in pixels.  In our example, the width of the outside border is 3 pixels.  If you want no border at all, leave the border attribute out or set it to 0.

COLS, ROWS
These two attributes define the number of columns and rows in the table.  You do not always have to specify  the number of rows and columns.  As a matter of fact, most of the time you won't indicate the number of columns and rows at all.  However, later when using the COLSPAN and ROWSPAN attributes, you might find that you get the results you want if you define the number of columns and rows in the table in the <TABLE> tag.

WIDTH
This sets the width of the table on the screen.  You can specify the width in terms of pixels or as a percentage.  For example, if you wanted your table to be exactly 600 pixels wide, you could specify that with the WIDTH=650 attribute.  Other times you may want to specify how much of the screen the table takes.  In this case you would use a percentage.  For example, above we used WIDTH=50%, meaning that the table should take up 50% of the screen width.

Creating the Cells

Now you need to create the cells in your table.  This is done in 2 steps.  First you set up the rows for your table, then you divide each row into cells (or "table data").  For example, lets add our 3 rows to the table.  We do this using the <TR></TR> tags:

<TABLE ROWS=3 COLS=3 WIDTH=50%>
<TR></TR>
<TR></TR>
<TR></TR>
</TABLE>

Now we need to define each cell in each row.  We do this using the <TD></TD> tags.  For each cell in the first row, we'll add those:

<TABLE ROWS=3 COLS=3 WIDTH=50%>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR></TR>
<TR></TR>
</TABLE>

Notice how we've added 3 sets of <TD></TD> between the <TR></TR> tags in the first row.  That defines the 3 cells of row 1.  Now lets see what it looks like when we add the cells to the other 2 rows:

<TABLE ROWS=3 COLS=3 WIDTH=50%>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
</TABLE>

Now we've finally finished the structure of our table.  You can now enter the text and formatting that you want each cell to contain.  The contents of a cell always go inside the <TD></TD> tags.  Also, when you have many cells, it's a good idea to use good spacing and indentation to make your table code easier to read.  Here's what the entire table code looks like with the formatted text shown in the example above (note the use of spacing and indentation):

<TABLE ROWS=3 COLS=3 WIDTH=50%>
   <TR>
      <TD><CENTER><B>Row 1, Col 1<BR>Cell 1</TD>
      <TD><CENTER><B>Row 1, Col 2<BR>Cell 2</TD>
      <TD><CENTER><B>Row 1, Col 3<BR>Cell 3</TD>
   </TR>
   <TR>
      <TD><CENTER><B>Row 2, Col 1<BR>Cell 4</TD>
      <TD><CENTER><B>Row 2, Col 2<BR>Cell 5</TD>
      <TD><CENTER><B>Row 2, Col 3<BR>Cell 6</TD>
   </TR>
   <TR>
      <TD><CENTER><B>Row 3, Col 1<BR>Cell 7</TD>
      <TD><CENTER><B>Row 3, Col 2<BR>Cell 8</TD>
      <TD><CENTER><B>Row 3, Col 3<BR>Cell 9</TD>
   </TR>
</TABLE>

That code will produce the example table shown above.  You should be able to see the relationship between the code for each cell and the actual cells seen in the table.

Spacing Contents of Cells

Now lets see what other things we can configure in our table.  There are two other attributes that can help you change the way your table looks:  CELLSPACING and CELLPADDING.

CELLSPACING indicates the number of pixels of space that should appear between each cell.  You can specify this amount in pixels, for example <TABLE CELLSPACING=2> will insert 2 pixels of space between cells (beside, above and below).  Here is an illustration of how different amounts of cell spacing affect your table:
 

1 2 3 4 <TABLE CELLSPACING=0>

1 2 3 4 <TABLE CELLSPACING=2>

1 2 3 4 <TABLE CELLSPACING=5>

1 2 3 4 <TABLE CELLSPACING=10>

CELLPADDING indicates the number of pixes that should act as a 'buffer' around the data in your cell.  For example, <TABLE CELLPADDING=2> will add 2 pixels of space around your text, on all 4 sides of the cell.  Here is an illustration of how the different amounts of cell padding will affect your table:
 

1 2 3 4 <TABLE CELLPADDING=0>

1 2 3 4 <TABLE CELLPADDING=2>

1 2 3 4 <TABLE CELLPADDING=5>

1 2 3 4 <TABLE CELLPADDING=10>

You can now combine different values for BORDER, CELLSPACING, and CELLPADDING to make your tables unique! Here are some examples:
 

1 2 3 4 <TABLE BORDER=5 CELLSPACING=4 CELLPADDING=0>

1 2 3 4 <TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2>

1 2 3 4 <TABLE BORDER=10 CELLSPACING=2 CELLPADDING=1>

1 2 3 4 <TABLE CELLSPACING=5 CELLPADDING=10>

Aligning Contents of Cells

Another way you can confiure your tables is by setting the alignment of your table cells.  You can change the horizontal alignment of text within a cell by using the ALIGN attribute and the vertical alignment of text within a cell by using the VALIGN attribute.  For example, <TD ALIGN=left VALIGN=top> would align the text in this cell to the left and top of the cell.  Here are all the possible values you can have for the ALIGN and VALIGN attributes:
 

Setting the Width of Cells

You can further configure your cells by using the WIDTH property in the same way you would use it for your TABLE tag.  If you specify WIDTH with a percentage, you are setting the cell's width compared to the width of the table.  For example:

<TABLE WIDTH=75%>
<TR>
<TD WIDTH=25%></TD>
<TD WIDTH=50%></TD>
<TD WIDTH=25%></TD>
</TR>
</TABLE>

In this example, there is one row in the table with 3 columns or cells.  The table is 75% the width of the display area.  The first column is 25% of the table width, the second column is 50% of the table width and the third column is 25% of the table width.  This table would look like this:
 

This cell is 25%

This cell is 50%

This cell is 25%

Setting Background Colours of Cells

You can further make your table interesting and unique by altering the background colour of the cells.  You can use the BGCOLOR attribute (the same one you use in the BODY tag) to change the colour of the background of the whole table, an individual row, or an individual cell.

To change the background colour of the whole table you would insert the BGCOLOR attribute in the <TABLE> tag like so:
<TABLE BORDER=2 BGCOLOR="#FF00FF">
Note that the BGCOLOR attribute works the same way as the BGCOLOR attribute in the BODY tag.

To change the background colour of a row, you would insert the BGCOLOR attribute in the <TR> tag:
<TR BGCOLOR="indigo">

To change the background colour of a cell, you would insert the BGCOLOR attribute in the <TD> tag:
<TD BGCOLOR="yellow">

This way, you can easily change the colours of rows and columns in your cell to make your tables more interesting and professional.

Cells Spanning More Than One Row or Column

Another set of useful attributes are the COLSPAN and ROWSPAN attributes.  You can use these attributes to make a cell take up more than one row or column.  For example, if you wanted a cell to take up two rows you would type ROWSPAN=2.  Here is an example of a table that does this:
 

This cell takes up 3 columns
a cell	this cell takes up 2 rows	a second cell
a third cell		a fourth cell

See how the first row takes up 3 whole columns and the large cell in the middle takes up one column but 2 rows.  The code for this table appears like this:

<TABLE BORDER=3 CELLPADDING=4 CELLSPACING=2>
<TR>
<TD ROWSPAN=3>This cell takes up 3 columns</TD>
</TR>
<TR>
<TD>A cell</TD>
<TD ALIGN=CENTER VALIGN=CENTER COLSPAN=2>this cell takes<BR>up 2 rows</TD>
<TD>A second cell</TD>
</TR>
<TR>
<TD>a third cell</TD>
<TD>a fourth cell</TD>
</TR>
</TABLE>

Changing the Colour of Cell Borders

One more thing you might want to try with your tables is change the border colour.  Using the BORDERCOLOR attribute just like the BGCOLOR attribute, you can change the border of your table.  The only problem you might have with this is that in some browser versions it takes away the 3-d effect of the border, but it still looks neat.  Here's an example of some tables using the BORDERCOLOR attribute:
 

this table's  border colour is indigo

this table's border colour is  maroon

this table's border colour is  green

this table's border colour is navy

Page Layouts

Now that you know how to code tables, you can begin using them on your pages to make charts and tables of data or information, or you can use them to enhance the layout of your page.

There are 2 popular ways to use tables to improve your page layout.  One is when you are using a border background, the other is when your page is presenting its information in a newsletter sort of format.

Border backgrounds are background graphics for your web page that have a coloured or graphical border down one side (usually the left side).  For example, the Terminal Learning page uses a coloured border background.  A border background file is just like a regular background file except that it's rectangular across the page instead of a square tile.  Here is what the Terminal Learning background looks like as a single file:

Like a regular background, this file will tile itself on the screen when used in the BACKGROUND attribute of the body tag.

Putting text on this type of background can be frustrating.  How to you indent the text so that it doesn't show up over the coloured background?  The simplest way to do this is to have your whole page contained in a table.  This table will have no border showing and it will have only one row (in its most basic form - you can modify this to suit your own needs) and 2 columns.  The left column will be the column that sits around the actual border.  In this column you can put links or buttons if you like, or you can leave it empty.  The right hand column will be the column where all your web page code will go.  This will display your web page with all the main body to the right of the border.

Another important element to this layout is a spacer graphic.  You have to keep in mind that people browsing your page will be viewing it on different sized monitors.  When you set up your table's 2 columns, you will have to set up the left column's width to fit exactly over the border.  You could define your width in pixels or percentages, but the results would look different on different sized screens.  Pixel definitions could result in your table being too wide for a screen, or too small.  Percentage definitions will alter the width of your border column to accomodate screen size.  The easiest way to fix this problem is to insert a special graphic into the left column.

A spacer graphic is just a regular transparent .gif file that contains no picture or anything.  You use the IMG tag to insert the graphic in the left cell of the table and set the image's WIDTH attribute to be the size of the border part of your background graphic (using pixels).  This forces the border cell to stay the size of the graphic.

Here is an example of that code used on Terminal Learning:

<TABLE>
<TR>
<!-- this is the border cell/column -->
<TD VALIGN=TOP ALIGN=LEFT>
   <IMG SRC="vspacer.gif" HEIGHT=1 WIDTH=125></TD>

<!-- this is the cell/column where my stuff goes -->
<TD VALIGN=TOP ALIGN=LEFT>

{html code for the main part of your page goes here}

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

Another helpful use for tables in terms of page layout is for newsletter style documents. In a typical newsetter, you would find columns of text and graphics, some of which may take up more than one row.