Prof. H's Tutorial on HTML Tables

Tables in HTML are useful not only for displaying data (as tables are traditionally used for), but also for formatting text on a page. Although style sheets are supposed to change this, many HTML authors (including yours truly) still use tables to format their pages. Table cells are also used to create the appearance of buttons; although fancier buttons can be created with Photoshop and placed as images, some authors use table cells because they load faster. Certainly tables in HTML are an important feature to master.

To create tables, we begin (and end) with the <TABLE> and </TABLE> tags. HTML tables are constructed by rows, with each row beginning with the <TR> and closing with </TR>. In each row, the cells are marked off with <TD> and </TD> tags.

Below is the well known Prisoner's Dilemma example, followed by the HTML that created the table:

<TABLE BORDER="3" CELLSPACING="2" CELLPADDING="1">
   <TR>
      <TD>&nbsp;</TD>
      <TD COLSPAN="3" ALIGN=CENTER>P2 chooses</TD>
   </TR>
   <TR>
      <TD ROWSPAN="3" ALIGN=CENTER>P1<BR>chooses</TD>
      <TD>&nbsp;</TD>
      <TD WIDTH="70" ALIGN=CENTER>cooperate</TD>
      <TD WIDTH="70" ALIGN=CENTER>defect</TD>
   </TR>
   <TR>
      <TD WIDTH="70" ALIGN=RIGHT>cooperate</TD>
      <TD WIDTH="70" ALIGN=CENTER>-2, -2</TD>
      <TD WIDTH="70" ALIGN=CENTER>0, -20</TD>
   </TR>
   <TR>
      <TD WIDTH="70" ALIGN=RIGHT>defect</TD>
      <TD WIDTH="70" ALIGN=CENTER>-20, 0</TD>
      <TD WIDTH="70" ALIGN=CENTER BGCOLOR="#FF6699">-5, -5</TD>
   </TR>
   <TR>
      <TD COLSPAN="4" HEIGHT="30" ALIGN=CENTER VALIGN=BOTTOM>
         <FONT SIZE=-1 COLOR="#3366FF">(payoff to P1, P2)</FONT>
      </TD>
   </TR>
</TABLE>

Things to note in this example:

1. To merge cells into a longer row (e.g., the "P2 chooses" cell), I used the COLSPAN="x" attribute in the TD tag, where x is the number of columns the merged cell would cover.
   
   
2. To merge cells into a longer column (e.g., the "P1 chooses" cell), I used the ROWSPAN="x" attribute in the TD tag, where x is the number of rows the merged cell would cover.
   
   
3. The cell's height and/or width can be modified with the appropriate TD tag attribute.
   
   
4. The cell's alignment (left/center/right) can be modified with the appropriate TD tag attribute. The default is ALIGN=CENTER -- I added it here just for illustration purposes. Contrast this with P1 choice cells which are aligned to the right.
   
   
5. A cell's vertical alignment (top/center/bottom) can be modified with the VALIGN="x" attribute. (See the bottom cell for an example of VALIGN set to bottom.) The default is VALIGN=CENTER; I didn't add it because I got tired.
   
   
6. A cell's color can be changed with the BGCOLOR attribute. In this case, I made the (-5, -5) cell a reddish color since that is the result of the dominant strategy for both players.
   
   
7. The font attributes can be modified for each cell if desired. In this case the note in the bottom cell is both in a different color and a slightly smaller size.
   
   
8. If I had wanted to get rid of the borders in this case, I could set the BORDER attribute in the TABLE tag equal to zero. (You can copy the HTML from this page and give it a try if you'd like.)
   

Frames

Frames are controversial among web designers. We will talk a bit about this in lecture next week. Nonetheless, it would be worthwhile for students to have an basic understanding of how frames work and are constructed, even if they don't intend to use them in their own site.

To create frames, we first create a frameset. The frameset is in its own HTML document. To create a frameset with a simple column bar on the left (sometimes used for navigation purposes), we'd write in a separate document the following HTML right after the HEAD closing tag:

   ...</HEAD>
   <FRAMESET COLS="100, *" FRAMEBORDER=0>
      <FRAME NAME="links" SRC="klingon_links.html" SCROLLING="no">
      <FRAME NAME="proverbs" SRC="klingon_banner.html" SCROLLING="auto">
   </FRAMESET>
   </HTML>

A pretty short document, for sure. In this case, this document calls up two other pages (klingon_links.html & klingon_banner.html) and puts them in the upper and lower frame respectively. The first frame size is set at 100 pixels, but the other is variable ("*") based on the browser window size. We could also make this a horizontal banner instead by changing COLS to ROWS.

Anchor Targets

Why did I name the frames in the above example? In this case, I had a column of links to load into one of the frames. If I clicked on a link, it would show up in the small column on the left, when I really want it to be in the main window (currently called "proverbs"). To correct that, I can set the TARGET attribute of the <A>nchor tags to the name of the frame I want it to open in. For example:

   <A HREF="http://www.kli.org/" TARGET=proverbs> ...

would open up the Klingon Language Institute's site in the "proverbs" frame/window.

If I had wanted the KLI site to open into a new window, I could do that with TARGET=_blank.

Please note: this site contains relevant information for the Spring 2004 semester only. The site is maintained by Professor H, so any questions or problems with these pages should be sent to lheimann@andrew.cmu.edu.