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
| 
Fly