HTML IIa: Tables and Frames

Electronic Text Center
Alderman Library
University of Virginia
Charlottesville, VA 22904
434.924.3230

These instructions are for items that can be used from a UVa "public_html" account. See also
HTML I: A Basic Helpsheet
HTML IIb: Image Maps

Tables

TableMaker page: http://www.bagism.com/tablemaker/

Very simple example: See this table

<TABLE BORDER>

        <TR><TD>Electronic Text Center</TD></TR>

        <TR><TD>Phone: 434-924-3230</TD></TR>

        <TR><TD>Fax:   434-924-1431</TD></TR>

        <TR><TD>email: etextcenter@virginia.edu</TD></TR>

        <TR><TD>WWW: http://etext.lib.virginia.edu/</TD></TR>

</TABLE>

Further example: See this table

<TABLE BORDER>

  <TR>

    <TH COLSPAN=2 ALIGN=CENTER>Electronic Text Center</TH>

  </TR>

  <TR>

    <TD ALIGN=LEFT>Alderman Library<BR>

                   University of Virginia<BR>

                   Charlottesville, VA  22904</TD>

    <TD ALIGN=RIGHT>Email: <I>etextcenter@virginia.edu</I><BR>

                    Phone: (434) 924-3230<BR>

                    FAX: (434) 924-1431<BR></TD>

  </TR>

  <TR>

    <TD COLSPAN=2 ALIGN=CENTER>Web: http://etext.lib.virginia.edu/</TD>

  </TR>

</TABLE>

Another Example

<Table> Element and Attribute Definitions:

<TABLE> defines the beginning and the end of the table within the body of an HTML document. Tables may be nested. The attributes for TABLE are all optional. By default, the table is rendered without a surrounding border. The table is generally sized automatically to fit the contents, but you can also set the table width using the WIDTH attribute. BORDER, CELLSPACING and CELLPADDING provide further control over the table's appearence. Captions are rendered at the top or bottom of the table depending on the ALIGN attribute.

Each table row is contained in a TR element. Table cells are defined by TD elements for data and TH elements for headers. Like TR, these are containers and can be given without trailing end tags. TH and TD support several attributes: ALIGN and VALIGN for aligning cell content, ROWSPAN and COLSPAN for cells which span more than one row or column. A cell can contain a wide variety of other block and text level elements including form fields and other tables.

The <TABLE> element supports the following attributes:

bgcolor: You may specify a background color for the table, without altering a global background color for the rest of the page as specified in the <body> tag. This attribute takes a color name or number as described above.
align: This takes a value of LEFT, CENTER or RIGHT. It specifies the horizontal placement of the table relative to the current left and right margins. It defaults to left alignment, but this can be overridden by an enclosing CENTER element.
width: In the absence of this attribute the table width is automatically determined from the table contents. You can use the WIDTH attribute to set the table width to a fixed value in pixels (e.g. WIDTH=212) or as a percentage of the space between the current left and right margins (e.g. WIDTH="80%").
border: This attribute can be used to specify the width of the outer border around the table to a given number of pixels (e.g. BORDER=4). The value can be set to zero to suppress the border altogether. In the absence of this attribute the border should be suppressed. Note that some browsers also accept <TABLE BORDER> with the same semantics as BORDER=1.
cellspacing: In traditional desktop publishing software, adjacent table cells share a common border. This is not the case in HTML. Each cell is given its own border which is separated from the borders around neighboring cells. This separation can be set in pixels using the CELLSPACING attribute, (e.g. CELLSPACING=10). The same value also determines the separation between the table border and the borders of the outermost cells.
cellpadding: This sets the padding in pixels between the border around each cell and the cell's contents.

The <TR> or table row element has two attributes:

align: Sets the default horizontal alignment of cell contents. It takes a value of LEFT, CENTER or RIGHT and plays the same role as the ALIGN attribute on paragraph elements.
valign: This can be used to set the default vertical alignment of cell contents within each cell. It takes a value of TOP, MIDDLE or BOTTOM to position the cell contents at the top, middle or bottom of the cell respectively.

There are two elements for defining table cells. <TH> is used for header cells and <TD> for data cells. This distinction allows browsers to render header and data cells in different fonts, and enables speech based browsers to do a better job. Table cells can have the following attributes:

rowspan: This takes a positive integer value specifying the number of rows spanned by this cell. It defaults to one.
colspan: This takes a positive integer value specifying the number of columns spanned by this cell. It defaults to one.
align: Specifies the default horizontal alignment of cell contents, and overrides the ALIGN attribute on the table row. It takes the same values: LEFT, CENTER and RIGHT. If you don't specify an ALIGN attribute value on the cell, the default is left alignment for <td> and center alignment for <th> although you can override this with an ALIGN attribute on the TR element.
valign: Specifies the default vertical alignment of cell contents, overriding the VALIGN attribute on the table row. It takes the same values: TOP, MIDDLE and BOTTOM. If you don't specify a VALIGN attribute value on the cell, the default is middle although you can override this with a VALIGN attribute on the TR element.
width: Specifies the suggested width for a cell content in pixels excluding the cell padding. This value will normally be used except when it conflicts with the width requirements for other cells in the same column.
height: Specifies the suggested height for a cell content in pixels excluding the cell padding. This value will normally be used except when it conflicts with the height requirements for other cells in the same row.

Frames

The Frames group of HTML tags allows one to subdivide a Web browser window into multiple independent sub-windows or frames. Each frame created within the larger Frames structure will have scroll bars when necessary and contain a distinct Web page. Furthermore, any links within a frame can be directed to display information either in the same frame or in a different frame when selected.

Examples

A side-by-side presentation of the King James and Revised Standard Bibles, for easy comparison http://etext.virginia.edu/frames/bibleframe.html

17th-Century Shakespearean Prompt-Books
http://etext.lib.virginia.edu/bsuva/promptbook/

Basic Structure

The basic Frames shell is as follows:

<HTML>
  <HEAD>
    <TITLE>Contains title of document</TITLE>
  </HEAD>



<FRAMESET>
    <FRAME>
    <FRAME>
</FRAMESET>



<NOFRAMES>
  <BODY>
    Contains alternate material to be displayed if browser does
        not support Frames
  </BODY>
</NOFRAMES>
</HTML>

Frame Definition

The <FRAMESET> section of the document is divided into frames through the ROWS and COLS attributes, each of which carries a numeric value delimited by commas that dictates the number of divisions in terms of either percentages or pixels and wildcards. Hence:

<FRAMESET ROWS="33%,33%,33%">

will divide the main window horizontally into three equal- sized frames.

<FRAMESET COLS="150,*">

will divide the main window vertically into two frames; the left frame will be 150 pixels in width, and the right frame will vary in size, using whatever remains of the window after 150 pixels have been used for the left frame.

Frame Attributes

Each frame is defined with the empty tag <FRAME>, which carries the following attributes:

  SRC="file.html"; used to dictate the HTML document
    displayed within the frame


  NAME="name"; used to establish an identifying name for
    the frame so that it can be targeted by links in other frames
    [see below]


  SCROLLING="yes|no|auto" [select one]

Example: <FRAME SRC="contents.html" NAME="leftframe" SCROLLING="auto">

Nesting Frames

The <FRAMESET> tag can also be nested to further subdivide the frames. Hence:

<FRAMESET ROWS="33%,33%,33%">
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="filename.html" NAME="framename">
      <FRAME SRC="filename.html" NAME="framename">
    </FRAMESET>
  <FRAME SRC="filename.html" NAME="framename">
  <FRAME SRC="filename.html" NAME="framename">
</FRAMESET>

will divide the main window horizontally into three equal-sized frames, and the top frame will further be divided vertically into two equal-sized sub-frames. Example.

Linking and Targeting

Within the Frames structure a link in one frame can be targeted to another frame, which means clicking an active button in one frame will display the results in a separate frame. For example, in the following Frames structure:

<FRAMESET COLS="50%,50%">
  <FRAME SRC="file1.html" NAME="leftframe">
  <FRAME SRC="file2.html" NAME="rightframe">
</FRAMESET>

where "file1.html" contains the following line:

<A HREF="http://www.virginia.edu" TARGET="rightframe">Link</A>

clicking on the active "Link" displayed in the first frame and defined in file1.html will display the UVa Homepage in the second frame.

Furthermore, the attribute TARGET="_blank" will display the UVa Homepage in a new browser window.

<A HREF="http://www.virginia.edu" TARGET="_blank">Link</A>

The attribute TARGET="_top" will display the UVa Homepage in the same browser window, but it will replace the frame page altogether.

<A HREF="http://www.virginia.edu" TARGET="_top">Link</A>