Make your own free website on Tripod.com

Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]

 

 

Creating Tables

Why Tables?

Currently, one of the most widely used HTML tools for creating artfully arranged Web pages is the table.

By mastering tables, you are no longer just "creating" a page, you are "designing" one.

Choices

The variety of tables at your disposal is extensive, ranging from a simple box to very complex design layouts. We will discuss table basics, as well as a few tricks and hints for you to experiment with in your quest to design an exciting page that people will love to visit.

Where Placed?

Again, as with all information you would like displayed in the browser window, make sure your table is between the <body> and </body> tags in your HTML document. Begin your table with the following tag:

<table>

Code

Each horizontal row in a table begins with the tag:

 <tr>

And, each piece of data within the row begins with the tag:

 <td>

Attributes

There are many attributes you can assign to a table.

Remember that attributes are modifiers and cannot stand alone

All attributes must be part of either the <table>,      < tr>, or <td> command.

Background Color

Change the color of entire table background by using the "bgcolor" tag within the initial "table" tag:

Example: <table bgcolor="yellow">

A colored background can also be assigned to a row or a cell within a table. Just add bgcolor="color" to either the <tr> or <td> tag to color that specific portion of the table.  

Example: <td bgcolor="yellow">

Table Size

The width and height of rows and columns in a table will expand automatically to fit the length of data and/or the space of the browser window. To specify a width and height, include either pixels or percentage values within the starting "table" tag:

Example:<table width=300 height=400>

Width and Height

Width and height can also be specified for an individual data cell, as opposed to the table as a whole. To do this, add width="value" to the <tr> or <td> tag in question.

Borders

To place borders around your table use the border attribute

<border=value>

To change the color of the border use the bordercolor attribute

<border=5 bordercolor="green">

Cellpadding

The "cellpadding" tag specifies (in pixels) the amount of space between the edges of each cell and the data inside each cell. Use it within the starting "table" tag:

Example 1:

<table border=1 cellpadding=5>

Example 2:

<table border=1 cellpadding=15>

Larger number—bigger spacing

Cellpadding provides needed whitespace on your page

Cellspacing

The "cellspacing" tag specifies (in pixels) the amount of space between each cell. Use it within the "table" tag:

Example 1:

<table border=1 cellspacing=5>

Example 2:

<table border=1 cellspacing=15>

Bigger the number--larger the border spacing around the cell

Preformatting Command

If you like the look of your text in the word processor you can use a command that maintains all that formatting

To maintain formatting

<pre>….</pre>

Any words typed between these commands will maintain the formatting from the word processor.

Table Headings

To create a bold and centered "heading" for a column or row within a table, use the <th> tag in place of a <td> tag in the coding for your first row.

<PRE><table border=1>

<tr>

<th>Column 2</th>

Alignment

By default, all cell contents within a table (with the exception of table headings) align vertically centered and left justified. To make the contents of a cell align a different way, apply the following tags within the <td>, <th>, or <tr> tags:

For horizontal alignment, values can be left, right, or center:

Example:

<tr align="center">

For vertical alignment, values can be top, bottom, or middle:

Example:

<td valign="top">

You can also arrange the alignment of your entire table, to decide where it appears on the page and how text will behave outside the table

By inserting the tags <align="right"> or <align="left"> within the initial "table" tag, text will wrap around your table wherever it is located.

Division Tag

To change alignment on a page at various places you can use the division command.

Creates sections on the web page

Keeps text from interfering with other elements

Code

<div>…</div>

Attribute

Align="value"

Cell Spanning

"Spanning" occurs when one cell spans two or more other cells in the table. An example of column spanning:

<TD colspan=value>

<td colspan=2>  This cell spans over two columns

The tag <colspan=value> is placed within the <td> tag where it applies.

Row Spanning

An example of row spanning:

<TABLE border=1>

<TR>

<TD rowspan=2>This cell spans over two rows

The tag <rowspan=value> is placed within the <td> tag where it applies.

Attributes

You can also apply many of the attributes we have already learned within your table, such as font size, type and color, inserting an image, making a list and adding a link. Just add the appropriate tag to the particular cell you would like to format, right after that cell's <td> tag.

Thumbnail Images

Miniature images to place in your table

Make them a link to an enlargement of the image

Code

<a href="cat.gif"><img src="cat.gif" width=30 height=40></a>

You have to determine the width and height that will create you miniature image.

Ideas

  • Possibilities are endless when it comes to using tables on a Web page. 
  • Stack images and borderless colored boxes to create seamless designs, or nest borderless tables within borderless tables, some with color, some without, to create eye-catching layouts. 
  • Web page design limits expand with a little imagination, creativity and the use of tables.

Source:

http://www.howstuffworks.com/web-design.htm

This page was updated on:  04/10/02