Basic Tables and Page Layout
Steve Benninghoff
Dept. of English Language and Literature
Eastern Michigan University
steve.benninghoff@emich.edu

Tables: The Tool for Page Layout

Tables are the main method of page layout in basic html. The idea is fairly strightforward - you can create a grid to mark off sections of your page into rows and columns. Then you can do various things to either make the table more or less visible according to your needs.

Here is another example from one of my own course home pages:

Here as well, the basic grid of the page and arrangement of the text is created using tables, though here the borders are off and no colors are used so the table itself is invisible.


The Basic Table
Tables are created by three basic kinds of paired tags, the table tag, the table row tag, and the table data tag. They are arranged in nested fashion, with the table tag "containing" the table row tags, and the table row tags containing the table data tags "inside" them.

Here's the simplest table you can have - with a single row, and a single cell inside that row, with the border set to 1 so we can see it.

When you first work with tables, it is a good idea to set the border attribute to 1 ( as above) so you can see the structure you're setting up. Later you can change this to "0" and your grid becomes invisible. Here is a more complex table, with three rows and three columns, so you can see the nested structure of the tags - cells inside rows inside table.

As you can see, once you have multiple rows and columns, the tags formatting the table can get quite extensive. This will be especially true when you begin nesting tables inside of tables (see below). For this reason WYSIWYG web page editors can be very helpful once you start dealing with complex pages. But knowing and understanding the basic structure and rules is the only way to troubleshoot pages when the fancy editors don't give desire results. These issues will be covered in more depth by following presenters.

Color (bgcolor="#CCCCCC")
So once you have the basic idea of laying out a table as such, the attributes and features of tables become important. For example you can set the background color and text color for table parts separately. You can set them for an individual cell, for an individual row, and table-wide as well. The most local setting holds, so the setting for a cell should overide the setting for the entire table.

Width and Height (width="90%" height=120)
You can also set the width and height of the table, and individual cells (not rows). So if you want to make sure your table maintains various proportions, or fix the size of parts, you can do so. There are two main ways to set widths and heights, with fixed "pixel" widths (a pixel is a single dot on your computer screen) or with a percentage of available space. If you set the width of your whole table to be 90%, it will fill up that much of the available space. If you then set the first cell to be 90% in width, it will take 90% of your table's width, as below:

That table looks like this:

Note that if you set the width of the whole table with percentages, and the table is not inside another one of fixed width (see nesting tables below), it will scale to the width of the screen, which can give the reader an impossibly long line of text to read and work with. For reasons like this, and because designers want to maintain the look they designed, fixed pixel widths are often used for tables and cells as well. Like this:

That table looks like this:

Here is an example table using color to illustrate this set of features:

Notice the cellpadding, or interior margin on the cell, and the cellspacing, the blue inbetween cells. This is created by giving the entire table a blue background color, border set to zero, but spacing set to four, and then giving the cells their own individual colors.

Nesting Tables
A last notes about using tables is that for many purposes you will actually want to use tables inside of tables. For example the "bottom layer" structure of the page you are reading is set up with one rather large table. But then each individual presentation you are being shown, of table and code side-by-side, consists of a table inside the larger table. Again for larger and more complex pages like this, it will be advantageous to use a visual editor, but one needs to understand the code to tweak and fix problems in the page construction, but more will offered on that later. Here is a nested table I sometimes use to show argument structure to students:

Three More Common Uses of Tables
Finally here are two further examples of uses of tables beyond the course home page - the schedule page and face or portfolio pages.

Schedule Pages
Here are two approaches to schedule page set ups:

Using colors:

The opposite approach - the invisible table:

Face Pages, Portfolio Pages, and the like
Sometimes you will want to have students construct online portfolios of their work, or you may want to work to construct more community in your classroom (many of my students this semester still don't know each other's names). You can use tables to help set up face pages or portfolio page structures:

Hobbes' Porfolio
	Paper 1 Paper 2 Paper 3 Paper 4

Face Page for Cartoon Composition
Hobbes	Stan	Cartman	Gromit
Barbrady	Wendy	Cow	Wallace

Syllabus and Policy Pages
Finally tables work well for setting up syllabus and policy pages, where the heading for a given section can be set out in a scan column to the left, either with returns to create spacing or an empty table row as a spacer.

In this example the headings are bolded and the alignment attribute for their table cells is set to right aligned (<td align="right">) so that they are close to the text they refer to.


A Cheat Sheet of Tags, Terms

The Basic Tags:
<table>
   <tr>
      <td>
      </td>
   </tr>
</table>