Tables

Readings

Chapter 16; Tufte Chapter 3 layering and separation (web library reserve--big file~2MB. Use the magnifying glass tool! But the book is also available.) Tufte has an interesting argument against most table grid lines (our "border" attribute).

Talking about tables

Lay out a rectangular grid on a piece of paper (or on the screen) and you have a table. This results in a bunch of little rectangles--which we'll call table cells--bounded by gridlines .

		one cell
	another cell

It is often useful to talk about all the cells that are in the same row or column, and the number of rows and columns in a table.



Notice that all the cells in the same row have...	exactly...	the same height, even though the widths may be different.

This is the first column...
of a table...
containing...
4 rows and 2 columns.

You can create arbitrarily complicated tables by arranging for the contents of one cell to span more than one row (or more than one column).

This cell spans two columns, but just one row

Constructing a table with HTML tags

In HTML, you start a table with the <TABLE> tag (and eventually end it with the </TABLE> tag).
You start a row within a table with <TR>.
Finally, you markup the individual cells within the row with <TD>...</TD>.
<TH> start a 'header' cell. This is really the same as <TD>, but the content is made bold and centered.
Put them together like this:

<TABLE BORDER=2>
 
 
 
  <TR>
    <TD> X </TD> <TD> X </TD> <TD>X</TD>
  </TR>
 
  <TR>
    <TD> </TD> <TD> O </TD> <TD> O </TD>
  </TR>
 
 
  <TR>
    <TD> &nbsp; </TD> <TD> </TD> <TD> O </TD>
  </TR>
 
 
 
</TABLE>

Which looks like:

X	X	X
	O	O
		O

Two useful things...

...that you can do quicker with tables than CSS-P are:

Creating a flexible 'box' containing side-by-side content
Centering content vertically within a box.

Example: Side-by-side text blocks

Task: Place Benjamin Skeezix' current address and home address in side-by-side text blocks. Center the table (horizontally) on the page, Get the content of both cells to start at the same height on the page.
Use:

A one-row, two-column table,
<TABLE ALIGN = center > to center the table (horizontally) on the page.
<TR VALIGN= top > to "vertically align" the contents of every cell in the row with the top of each cell.
Don't set any WIDTH in the table tag to have the browser try to make a decision about how wide to make your table.
Try out the effect of setting CELLSPACING=20 or CELLPADDING=20 in your <TABLE > tag.

Notice: What determines the widths of the cells with no explicit width set? How does the contents of one cell align vertically if no VALIGN is specified?

Reference list of table Attributes

Aligning text and graphics within a table:

<TD ALIGN = right | center | left >
< [TD | TR] VALIGN= top | middle | bottom >

Borders and spacing (n is in pixels):

<TABLE BORDER=n
       CELLSPACING=n
       CELLPADDING=n>

Specific cells can span several rows or columns:

<TD COLSPAN=n>
<TD ROWSPAN=n>

You can color the background of just one table cell, a row, or of the whole table:

<TD BGColor= #dddddd | color-name>
<TABLE BGColor= #dddddd | color-name>
<TABLE WIDTH= n | p% > <!-- p% of window  -->
<TD WIDTH= n | p% > <!-- p% of table -->

DreamWeaver tips with tables

Joining/splitting cells

Drag with your mouse to select the cells you'd like to join (or split) and then join or split using the join or split button on the Properties inspector (at right).

Editing row or table properties

You can edit properties--for example background color or cell alignment, for a whole row (the <tr> tag) or the whole table (<table> tag). If you're working in one cell of a table, select the <tr> or <table> tag (see location in DreamWeaver's screen at right) to edit properties of the row or the table.

The properties inspector may change to reflect options that exist or don't exist for the tag you've selected.

Re-sizing tables

You can re-size tables on the fly in DreamWeaver by grabbing a cell's borders with your moust and stretching them around.
Re-sizing tables like this may result in cells which have both an explicit width and an explicit height. But for tables that contain mostly text, you will almost certainly want to not set cell heights so that the table can flow to accomodate whatever size text the user may have set. To unset cell heights, select the <table> tag, then choose:

Default CSS for tables

When setting font characteristics for the whole page with CSS styles, modifying the body style may not change the typography of what's inside the table. To do that, set font characteristics for the <td> tag..