Software, Systems, and Solutions

"We do not run your business. We make your business run better."

Skip Repetitive Navigational Links

Tables

  • HTML tables allow Web designers to create grid-based page layouts.
  • Tables are used to create templates that allow the Web page designer to control how your content display's in the browser.
  • Tables are also used to present tabular information

Table Elements

  • The HTML <TABLE> element contains the table information. The following are a list of the table elements (tags):
Tag Description
<TABLE>...</TABLE> Required!
<CAPTION>...</CAPTION> An optional table title
<TR>...</TR> A table row (1 or more cells)
<TH>...</TH> a table header cell
<TD>...</TD> a table data cell
<THEAD>...</THEAD> Caption and header rows here
<TBODY>...</TBODY> All table data goes in body
<COLGROUP>..</COLGROUP> Allows alignment of column groups
  • The <TABLE> and </TABLE> tags must surround the entire table definition. 
  • You can have any number of rows (<TR> </TR>).
  • Each row of a table is, essentially, formatted independently of the rows above and below it.
  • Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. 

General Table Format

  • The most common table tags are <TR> for rows and <TD> for cells.  The example below uses these two elements inside <TABLE> tags to make a 2X2 grid of data.

<TABLE BORDER=1> <!-- a demo table -->
<TR> 
  <TD> first row, first cell </TD>
  <TD> first row, last cell </TD> 
</TR> 

<TR> 
  <TD> last row, first cell </TD>
  <TD> last row, last cell </TD> 
</TR> 
</TABLE>

  • The above example looks like this when rendered in a browser.  

first row, first cell first row, last cell
last row, first cell last row, last cell

Table Headers and Captions

  • You may occasionally want to add a <CAPTION> or a header <TH> to your table.  These make tabular data easier to read 
<TABLE BORDER=1> <!-- a demo table -->
<CAPTION> caption contents </CAPTION> 
<TR> 
  <TH> first header cell </TH> 
  <TH> last header cell </TH> 
</TR> 

<TR> 
  <TD> first row, first cell </TD>
  <TD> first row, last cell </TD> 
</TR> 

<TR> 
  <TD> last row, first cell </TD>
  <TD> last row, last cell </TD> 
</TR> 
</TABLE>

  • The above example looks like this when rendered in a browser.  

caption contents
first header cell last header cell
first row, first cell first row, last cell
last row, first cell last row, last cell

Table Attributes

  • Table Attributes let you further define a number of table characteristics.  You can apply attributes to the whole table, to a row or to an individual cell.
Table Attributes
ATTRIBUTE DESCRIPTION
ALIGN Specifies the position of the table with respect to the document. This works the same as the ALIGN parameter for images. Valid values include LEFT, CENTER and RIGHT.
BGCOLOR Colors the table background just as it would when used with the <BODY> tag.
BORDER Specifies the pixel width of the border that divides table cells and the table itself. This table is set to BORDER = "1".
CELLPADDING Specifies the amount of space between the borders of a table and the actual data in the cell.
CELLSPACING Specifies the amount of space inserted between table cells.
HEIGHT Specifies the height of the table in absolute pixels or as a percentage of the available space.
WIDTH Specifies the width of the table in absolute pixels or as a percentage of the available space
 
Table Row Properties
ATTRIBUTE DESCRIPTION
ALIGN Specifies the alignment of the text within the cells in the row. Valid values can be LEFT, RIGHT, or CENTER
BGCOLOR Specifies the background color for the table cells in the row. It works just the same as the corresponding attribute for the <BODY> tag
VALIGN Specifies the vertical alignment of text within the cells in the row. Valid values are TOP, BOTTOM, or CENTER.
 
Table Cell Properties
ATTRIBUTE DESCRIPTION
ALIGN Specifies the alignment of the text within the cell. Valid values can be LEFT, RIGHT, or CENTER
BGCOLOR Specifies the background color for the table cell. It works just the same as the corresponding attribute for the <BODY> tag
COLSPAN Specifies the number of columns that a single cell should span. The default value of colspan is 1. A value of zero means the cell will span all columns from the current column to the last column.
HEIGHT Specifies the height of the cell in absolute pixels or as a percentage of the total area. Note that all cells in that row will be sized to match this height.
NOWRAP Specifies that the text within the cell should not be word-wrapped.
ROWSPAN Specifies the number of rows the cell should span. The default value of rowspan is one. A value of zero means that the cell spans all rows from the current row to the last row.
VALIGN Specifies the vertical alignment of text within the cell. Valid values are TOP, BOTTOM, or MIDDLE.
WIDTH Specifies the width of the cell in absolute pixels or as a percentage of the total area. Note that all cells in that column will be sized to match this width.

Table Attribute Example

  • This table demonstrates table color, cell color and cell and row alignment.
Table with border 1, width 85%, and bgcolor ddaaff
Row bgcolor "550088"
Centered Header 		 Left-Aligned Header Right-Aligned Header
Text Row 1/Col 1, valign top
 cell color cyan valign bottom
right-align horizontally
cell color 99FF99		 bottom-aligned and left-aligned  True center alignment
  • The code for this table is:
<!-- table tag where table attributes are set -->
<table border="1" width="85%" bgcolor="ddaaff">
<caption>Table with border 1, width 85%, and 
         bgcolor </caption>
<tr bgcolor="#50088">Set Row Attributes
  <th align="middle">Set Header Cell Attributes
     Row bgcolor &quot;550088&quot;<br>
     Centered Header&nbsp;</th>
  <th align="left">Left-Aligned Header</th>
  <th align="right">Right-Aligned Header</th>
</tr>
<tr>
  <td vAlign="top">Set valign for cell
      Text Row 1/Col 1, valign top</td>
  <td bgcolor="cyan">Set bgcolor for cell
      cell color cyan</td>
  <td vAlign="center">valign center</td>
</tr>
<tr>
  <td align="right" bgcolor="#99FF99">align & bgcolor
     right-align horizontally<br>
     cell color 99FF99</td>
  <td align="left" vAlign="bottom">align & valign
     bottom-aligned and left-aligned&nbsp;</td>
  <td align="middle" vAlign="center">
     True center alignment</td>
</tr>
</table>

Tables with colspan & rowspan (for page layout)

  • Most HTML authors use tables as the main tool to layout their Web pages. 
    • eg. use a table with no borders to create "one" image from separate images.  (used like an image map). 
    • eg. use a table to format text with images. 
Colspan of "3" Right-align Column
Colspan of "2" Colspan of "2", Right-aligned
Rowspan of "2"
valign at top		 Normal Column Normal Column Rowspan of "2"
valign at top
Normal Column Normal Column
Colspan of "4" Center align
 
<table border="1" width="100%">
<tr>Start row 1
   <td colSpan="3">Colspan of 3</td>row 1, col 1-3
   <td align="right">Right-align</td>row 1, col 4
</tr>End row 1
<tr>Start row 2
   <td colSpan="2">Colspan of 2</td>row 2, col 1&2
   <td colSpan="2" align="right">row 2, col 3&4
       Colspan of 2, Right-aligned</td>
</tr>End row 2
<tr>Start row 3
   <td rowSpan="2" valign="top">row 3&4, col 1
       Rowspan of 2<br>valign at top</td>
   <td>Normal Column</td>row 3, col 2
   <td>Normal Column</td>row 3, col 3
   <td valign="top" rowspan="2">row 3&4, col 4
     Rowspan of 2<br>valign at top</td>
</tr>End row 3
<tr>Start row 4, No col 1 because of rowspan
   <td>Normal Column</td>row 4, col 2
   <td>Normal Column</td>row 4, col 3
</tr>End row 4, No col 4 because of rowspan
<tr>Start row 5
   <td colspan="4" align="center">row 5, col 1-4
       Colspan of 4 Center align</td>
</tr>End row 5
</table>
  • Here is the same table but with page layout type content and borders="0":
A Retailing Company
 



North America
United Kingdom		 Search:

France
Germany
Home | Products | Shopping Cart | Site Map | Customer Service

Some Home Page Tables 

  • The eToys Web page has a main navigation bar and then is organized in 3 major columns to present site content.  The columns have space between them and resize themselves as the window grows (Active White Space):

  • Other Web sites are obviously designed for either a large screen (Flowers.com shopping cart and search tool disappear at smaller screen sizes) or as small screen (Nordstrom has a wide white margin at the right of the screen at larger screen sizes):

Creating Table Templates

  • Web designers often create templates to place their content in.
  • These templates consist of multiple tables stacked on top of or nested inside of each other.
  • The Yahoo site below uses multiple tables to organize content and to provide background color changes:

Frames

What Are Frames?

  • A frames page is a way of displaying more than one web page on the same screen.
  • If you have two web pages you'd like to display side by side, you can do this by writing a third page with it's own distinct url. This page will contain instructions for the viewers browser, telling it where to find the two pages, and how to carve the screen up while displaying them in the same window. 
  • This is a Frames Page! 

How do Frames work?

  • Frames pages use two tags: FRAMESET and FRAME 
  • The FRAMESET tag tells the viewers browser how to divide up the window into columns and rows, and how big to make each. 
  • The FRAME tag tells the browser what to put into the columns and rows you just created. 
  • Thus, FRAMESET divides the page into sections, FRAME describes those sections. 

For example you could have a file: frames.html that displays the 2 files in this lecture, each taking up 50% of the screen:

<HTML>
<HEAD>
<TITLE>My Frames Page</TITLE>
</HEAD>End normal head but no body tag!!
<FRAMESET COLS="50%,50%">2 Columns each 1/2 page
<FRAME NAME="left" SRC="menuB.html">Column 1
<FRAME NAME="right" SRC="mainB.html">Column 2
</FRAMESET>End Frames definition
</HTML>
 
  • A FRAME tag does two things, it tells the browser where to find a web page to place in a section we created, and it names that section. 
    • You need to name the frames so you can do linking.
  • If you want to combine four different Pages to make
    one page...You would use FRAMESET ROWS tags. 

  • This example displays 4 frames (frames4.html). The first lecture at top_left & top_right and this lecture at bottom_left & bottom_right.

<HTML>
<HEAD>
<TITLE>My Frames Page</TITLE>
</HEAD>End normal head but no body tag!!
<FRAMESET ROWS="50%,50%">2 Rows each 1/2 page
  <FRAMESET COLS="20%,80%">2 Columns in Row 1
   <FRAME NAME="tl" SRC="menua.html">R1C1
   <FRAME NAME="tr" SRC="maina.html">R1C2
  </FRAMESET>End Columns in Row 1
  <FRAMESET COLS="20%,80%">2 Columns in Row 2
    <FRAME NAME="bl" SRC="mainb.html">R2C1
    <FRAME NAME="br" SRC="menub.html">R2C2
  </FRAMESET>End Columns in Row 2
</FRAMESET>End Frames definition
<NOFRAMES>This page contains frames
</NOFRAMES>Displays text for browsers w/o frame support 
</HTML> 
 

Linking with Frames

  • By default a link clicked in any given frame will load into that frame unless directed otherwise.
  • To place a link clicked in one frame in another frame you use the TARGET attribute where menu is the name assigned to the frame in the <frame name="menu"> tag:
    <A HREF="../links.html" TARGET="menu">
  • To have the link load in the main window (leave frames) use "_top" as the target:
    <A HREF="../links.html" TARGET="_top">
  • To have the link load in a new window use "_blank" as the target:
    <A HREF="../links.html" TARGET="_blank">

Images

  • Most Web browsers can display inline images (that is, images next to text) that are in Bitmap, GIF, JPEG or PNG format. 
  • Images take time to download and slows down the initial display of a document. So be careful when adding images to a document. 
  • To include an inline image, enter: 
    <IMG SRC="ImageName">
    where ImageName is the URL of the image file. 

Image Attributes

  • You should include three other attributes on <IMG> tags. 
    • The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. 
    • The ALT attribute gives the image a name that appears when your mouse passes over the image or if the image does not load into the browser:
    • For example, to include "Sparky" (ASU's mascot): 
      <img src="images/Sparky.gif" width="75" 
      height="75" alt="Sparky: ASU's Mascot">
      Sparky: ASU's Mascot

Images as Hyperlinks

  • Inline images can be used as hyperlinks just like plain text: Glossary

<A HREF="../glossary.html">
<IMG SRC="ball.gif" ALT="Glossary"
ALIGN="right"></A>

  • The border around the image indicates that it's a clickable hyperlink. 
    • If you do not want this border to be displayed, you can adding the BORDER attribute and setting it to zero.

Background Graphics

  • Background images can be a texture (linen finished paper, for example) or an image of an
    object (a logo possibly). 
  • The background image can be very small. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. 
  • The background image is included in the <BODY> statement as an attribute: 
    <BODY BACKGROUND="images/mainbg.jpg">


Some images and Logo generation was obtained from:
Flaming Text: Free online tool for generating custom web page graphics at: Flamingtext.com