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.
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.
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:
Each horizontal row in a table begins with the
And, each piece of data within the row begins
with the tag:
There are many attributes you can assign to a
Remember that attributes are modifiers and cannot
All attributes must be part of either the
tr>, or <td> command.
Change the color of entire table background by
using the "bgcolor" tag within the initial "table" tag:
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">
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.
To place borders around your table use the border
To change the color of the border use the
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:
<table border=1 cellpadding=5>
<table border=1 cellpadding=15>
Larger number—bigger spacing
Cellpadding provides needed whitespace on your
The "cellspacing" tag specifies (in
pixels) the amount of space between each cell. Use it within the
<table border=1 cellspacing=5>
<table border=1 cellspacing=15>
Bigger the number--larger the border spacing
around the cell
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
Any words typed between these commands will
maintain the formatting from the word processor.
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.
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:
For vertical alignment, values can be top,
bottom, or middle:
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
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
"Spanning" occurs when one cell spans
two or more other cells in the table. An example of column spanning:
<td colspan=2> This
cell spans over two columns
The tag <colspan=value> is placed within
the <td> tag where it applies.
An example of row spanning:
<TD rowspan=2>This cell spans over two
The tag <rowspan=value> is placed within
the <td> tag where it applies.
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>
Miniature images to place in your table
Make them a link to an enlargement of the image
src="cat.gif" width=30 height=40></a>
You have to determine the width and height that
will create you miniature image.
- 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.