|
Hints for Making
Tables
Getting Started
The basic HTML instructions for making
tables are quite simple. You need just three "TAGS."
- <table> ... </table>
This is the overall Table TAGS
- <tr> ... </tr> This
is the Table Row TAGS. You will have one, more or
less, for every row in your table.
- <td> ... </td> The
Table Data (or cell) TAGS. Each cell in your table,
more or less, gets its own TAGS.
Put together into a simple table with three
rows and three cells per row, you would have HTML
instructions that look like this:
<table>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table> |
It may look a little intimidating, at first.
You'll soon see that it is pretty straight forward.
There are a few things to look at that are
more apparent in this simple table than the more complex one's
you'll see soon.
- All the TAGSs have a start and
end code.
- A table TAGS starts and ends with
the same code, except there is a "/" in the
ending code.
- The TAGSs are nested. The
<table> ... </table> is on the outside.
<tr> ... </tr> come next. And finally,
<td> ... </td> are the innermost elements.
Put another way, the table is built of rows, each of
which has data cells.
- Blanks in data cells are ignored. This
has a lot of useful implications that we will explore in
the shortcuts section.
What does this table look like? Actually,
nothing. You can't see it because it has no data and until we add
some more information, there won't be any lines.
Enhancing the Table TAGS
Additional information can be put into each
table TAGS. For example, you can get a table with thin
borders by changing the starting <table> TAGS
into <table border>. If we also slip a value into
each data cell, you get the following table.
|
|
<table border>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table> |
|
There are three values, including border,
that you can use to enhance the appearance of your tables.
|
border
border=0
border=5 |
This draws lines of
various thicknesses around the table, or lets you turn
all the table lines off. Note that the outer line has
been defined as a bezel and it gives the table a distinct
3D appearance. |
|
cellpadding=0
cellpadding=5 |
This controls the
width of the interior lines in the table. Bigger values
result in thicker lines. The values are in pixels. |
|
cellspacing=0
cellspacing=10 |
This is the space (in
pixels) around each item in a data cell. |
|
You can see how these work
with a few examples. The previous table will be used, except it
will have different beginning <table> TAGS
enhancements.
|
|
<table border=5
cellspacing=5>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table> |
|
|
|
<table border=5
cellspacing=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table> |
|
|
|
<table border=5
cellspacing=5 cellpadding=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table> |
|
|
|
<table border=10
cellspacing=5 cellpadding=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table> |
|
|
|
<table cellspacing=0
cellpadding=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table> |
|
Obviously, with just these three
enhancements you can produce a wide variety of appearances.
There are many useful enhancements that can
be added to TAGSs.
Enhancing a Table by Adding Information to
a TAGS Specification
The previous examples showed three types of
"enhancement" that could be added to the <table>
TAGS. A number of other common enhancements are also
available.
| horizontal
alignment options, both for the table as a whole and
for cell contents. |
| vertical alignment
options for cell contents. |
| size options,
expressed as either an absolute value (such as the number
of pixels) or a percentage. |
| grouping of
cells so that larger cells can span either rows or
columns. |
Cell Contents
A cell in a table can hold just
about anything that you can include in a non-table HTML
document. We usually think of placing numbers or words into cells.
However, consider the following list of useful possibilities:
| numbers since
data values are a key part of many tables. |
| words for both
identification (like column headers) as well as "data
values." Sometimes people put many paragraphs of
words into a single cell when a table is used to format a
page. You can use all the word formatting TAGSs (such
as <> and <> to get bold and italics, as well
as <> and <> to control line breaks. |
| images such as
icons, or even pictures. Sometimes large pictures are
included. An image can be sized to fit into a cell.
You'll see in the examples that you can even expand a
tiny image to make a line or fat bar. |
| links to send
people to other places. |
| rules, which
provide any easy and general way you can get lines into a
table. |
| tables can be
put into tables (doesn't that boggle the mind!). |
Some of these possibilities may seem
unlikely. Don't bet on it. Everything on this list has been used
somewhere on this page or the TABLES home page.
|
