HTML Topics
©1998–2010 R. Hinton, Broome Community College
Last Updated: 16–Feb–10

The Incredibly Versatile Table

Overview

Go To:
Table Tags and Attributes	Examples

The following is taken from Netscape 4’s Help Menu, Working With Tables:

Tables are useful for presenting information you want to display in a grid, such as a calendar, or in a spreadsheet, such as financial data. But you can also use tables whenever you want to have greater control over page layout than you normally would. For example, you could combine graphics in a table to create a resume or a newsletter. Or, you could create a table that encompasses an entire page, and then nest tables within the main table for even more layout control.

In fact, creative use of tables will enable you to generate a variety of visual effects on your Web page.

Table Tags and Attributes Return to Top of Page

The following lists the tags used to create tables. The most commonly used supporting attributes are listed for each tag.

Tags

Starts and ends table

Supporting Attributes
Horizontal Alignment (pick one)	align="left"/"right"/"center"/"justify"
Background image for table	background="text string"
Background color for table	bgcolor="color"
Puts a border around object, value in pixels that can be 0 (no border) or higher	border="number"
Color of border (border attribute must be used)	bordercolor="color"
Puts space around text in a table cell, value in pixels that can be 0 (no space) or higher	cellpadding="number"
Space between cells in a table, value in pixels that can be 0 (no space) or higher	cellspacing="number"
Prevents text from breaking at ends of lines	nowrap
Summarizes the table contents	summary="text string"
Vertical alignment (pick one)	valign="top"/"bottom"
Width of element (100% max)	width="number%"

Table Row

Supporting Attributes
Horizontal Alignment (pick one)	align="left"/"right"/"center"/"justify"
Background image for header	background="text string"
Background color for table	bgcolor="color"
Prevents text from breaking at ends of lines	nowrap
Vertical alignment (pick one)	valign="top"/"bottom"/"center"/"baseline"

Table Header (bold text; use within Table Row)

Supporting Attributes
Horizontal Alignment (pick one)	align="left"/"right"/"center"/"justify"
Background image for header	background="text string"
Background color for table	bgcolor="color"
Number of columns a cell goes across	colspan="number"
Prevents text from breaking at ends of lines	nowrap
Number of rows a cell goes across	rowspan="number"
Vertical alignment (pick one)	valign="top"/"bottom"/"center"/"baseline"
Width of element (100% max)	width="number%"

Table Data (use within Table Row)

Supporting Attributes
Horizontal Alignment (pick one)	align="left"/"right"/"center"/"justify"
Background image for header	background="text string"
Background color for table	bgcolor="color"
Number of columns a cell goes across	colspan="number"
Prevents text from breaking at ends of lines	nowrap
Number of rows a cell goes across	rowspan="number"
Vertical alignment (pick one)	valign="top"/"bottom"/"center"/"baseline"
Width of element (100% max)	width="number%"

Caption for table (caption is centered)

Supporting Attributes
Vertical placement of caption (pick one)	align="top"/"bottom"

Return to Top of Page

Examples Return to Top of Page

	Simple Table with Border and Headers
	Same Table with Background Color and Cellspacing, but Self-Sized
	Same Table with Defined Widths and All Data Centered
	Super Ordered (or Bulleted) Lists
	Simulating Bulleted Lists Using ../images (Part 1)
	Simulating Bulleted Lists Using ../images (Part 2)
	Nested Tables (Part 1)
	Nested Tables (Part 2)

Simple Table with Border and Header Return to Examples

<table border="8" cellspacing="0" width="100%">
<tr>
         <th colspan="2">Name</th>
         <th>Student ID Number</th>
         <th>Phone</th>
</tr>
<tr>
         <td>Andrews</td>
         <td>Mike</td>
         <td>234-88-0012</td>
         <td>650-3451</td>
</tr>
<tr>
         <td>Carleson</td>
         <td>Angela</td>
         <td>561-77-0922</td>
         <td>487-4644</td>
</tr>
</table>

Name		Student ID Number	Phone
Andrews	Mike	234-88-0012	650-3451
Carleson	Angela	561-77-0922	487-4644

Notice that with the cellspacing="0", the border between the cells is very thin.

Return to Examples

Same Table with Background Color and Cellspacing, but Self-Sized Return to Examples

<table bgcolor="yellow" border="2" cellspacing="3">
<tr>
         <th colspan="2">Name</th>
         <th>Student ID Number</th>
         <th>Phone</th>
</tr>
<tr>
         <td>Andrews</td>
         <td>Mike</td>
         <td>234-88-0012</td>
         <td>650-3451</td>
</tr>
<tr>
         <td>Carleson</td>
         <td>Angela</td>
         <td>561-77-0922</td>
         <td>487-4644</td>
</tr>
</table>

Name		Student ID Number	Phone
Andrews	Mike	234-88-0012	650-3451
Carleson	Angela	561-77-0922	487-4644

Return to Examples

Same Table with Defined Widths and All Data Centered
(Table Centered on Page) Return to Examples

<table align="center" bgcolor="yellow" border="2" cellspacing="3" width="70%">
<tr>
         <th width="35%" colspan="2">Name</th>
         <th width="45%">Student ID Number</th>
         <th width="20%">Phone</th>
</tr>
<tr align="center">
         <td>Andrews</td>
         <td>Mike</td>
         <td>234-88-0012</td>
         <td>650-3451</td>
</tr>
<tr align="center">
         <td>Carleson</td>
         <td>Angela</td>
         <td>561-77-0922</td>
         <td>487-4644</td>
</tr>
</table>

Name		Student ID Number	Phone
Andrews	Mike	234-88-0012	650-3451
Carleson	Angela	561-77-0922	487-4644

Notice that the width attribute in the Table tag defines how big the table appears on the screen. The width attribute in the Table Header tags defines how big each column is within the table. You can control the width of the first two columns by removing the width attribute from the first Table Header tag and adding it to the first two Table Data tags (in the first row) making sure that all the widths (between the Table Header and Table Data tags) equal 100%. Only these need to be defined as all cells in a column have the same width, unless the colspan attribute is used. However, even then, the spanned cell is only as wide as the total width of the two original cells.

Return to Examples

Super Ordered (or Bulleted) Lists Return to Examples

List Item 1
List Item 2
List Item 3

List Item 4
List Item 5
List Item 6

For a bulleted list, substitute the appropriate Unordered List tags and attributes.

Return to Examples

Simulating Bulleted Lists Using ../images (Part 1) Return to Examples

	List Item 1
	List Item 2
	List Item 3

Return to Examples

Simulating Bulleted Lists Using ../images (Part 2) Return to Examples

	List Item 1		List Item 4
	List Item 2		List Item 5
	List Item 3		List Item 6

Return to Examples

Nested Tables (Part 1) Return to Examples

<table width="100%" border="5" bordercolor="#400080" cellpadding="5" cellspacing="5" summary="Animated Bar Chart">
<tr>
         <td align="justify" width="80%" bgcolor="#400080">
                  <font color="#FFFFCA">This could be any kind of text. It could
                  describe the figure to the right. For example, it could explain
                  what the bar chart represents. In fact, just about anything could
                  be entered here.</font></td>
         <td width="20%"><table width="100%">
                  <caption align="bottom">Figure 1</caption>
                  <tr>
                           <td align="center"><img src="../images/barchart.gif"
                                    alt="Barchart" height="64" width="64"></td>
                  </tr>
         </table></td>
</tr>
</table>

This could be any kind of text. It could describe the figure to the right. For example, it could explain what the bar chart represents. In fact, just about anything could be entered here.

Figure 1

Notice how summary & caption are used.

Return to Examples

Nested Tables (Part 2) Return to Examples

<table width="100%" border="3" bordercolor="#FFFFCA" bgcolor="#400080" cellpadding="5">
<tr>
         <th rowspan="2" width="25%"><font color="#FFFFCA">Header</font></th>
</tr>
<tr align="center">
         <td width="75%"><font color="#FFFFCA">Table 1 - Cell 1</font></td>
</tr>
<tr align="center">
         <td><font color="#FFFFCA"> Table 1 - Cell 2</font></td>
         <td><table width="100%" background="../images/scale.jpg">
                  <tr align="center">
                           <td>Table 2<br>Cell 1</td>
                           <td>Table 2<br>Cell 2</td>
                  </tr>
                  <tr align="center">
                           <td>Table 2<br>Cell 3</td>
                           <td>Table 2<br>Cell 4</td>
                  </tr>
         </table></td>
</tr>
</table>

Header

Table 1 - Cell 1

Table 1 - Cell 2

Table 2 Cell 1	Table 2 Cell 2
Table 2 Cell 3	Table 2 Cell 4

Notice how another background image was used in the nested table.
Format Note: In Firefox, the cell borders appear in the second table; in Internet Explorer, they do not.

Return to Examples
Return to Tope of Page