making a table
<table>
- the table tag
-
<table></table>
-
Starts and ends a table.
-
The only thing that can go between the table (<table>) tags,
are the row (<tr>) tags (and then the cell <th> or
<td> tags).
Any other tags will "float" outside the table!
-
<tr></tr>
-
The table row tag
marks each row of a table.
-
The only thing that can go between the row tags,
are the cell (<td>)
or heading
(<th>)
tags. Anything else may "float" outside the table,
or do something unpredictable.
-
<td></td>
-
The table data tag
sets off each cell in a row.
-
Any html can go between the cell tags - text, an image, even another table.
-
<th></th>
-
The table heading tag
sets off a table heading cell (a normal cell, with usually bold, centered text)
-
Any thing can go between the heading tags also.
table attributes
To see how to use these
attributes,
look at the code for the example tables to the right.
<td colspan="NUM">
'colspan' = sets number of columns a cell should span
<td rowspan="NUM">
'rowspan' - sets the number of rows a cell should span.
<table border="NUM">
'border' - sets the width of the border around the table cells.
Later in real pages we will make table
and cell borders with
CSS language
<table cellpadding="NUM">
'cellpadding' - sets amount of space between a cell's border and its contents.
<table cellspacing="NUM">
'cellspacing' - sets the amount of space between table cells.
<table width="NUM">
or
<table width="NUM%">
'width' - sets width of table, in pixels or as a percentage of page width.
Later we will learn how to do all these things with
CSS language.
column (cell) display
attributes
A "column" (cell) is a
<td>
or a
<th>
We can use
CSS language
to set the width and text alignment of a cell:
<td style="width: NUM;">
width - sets how wide the cell should be
NUM can be a number (which will mean pixels),
or a percent (which will mean the percentage to use
of the entire table width).
<td style="text-align: ALIGN">
text-align - sets alignment for content of cell(s).
ALIGN can be left, center, right.
|
examples:
here is a simple (and boring) table:
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>༡</td>
<td>༢</td>
<td>༣</td>
</tr>
</table>
The same table with some attributes
<table cellpadding="20" cellspacing="0" border="1">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>༡</td>
<td>༢</td>
<td>༣</td>
</tr>
</table>
Using th (table heading)
and
Using colspan
<table cellpadding="8" cellspacing="0" border="1">
<tr>
<th colspan="3">Parts of Tibet</th>
</tr>
<tr>
<td>Amdo</td>
<td>Kham</td>
<td>Lhasa</td>
</tr>
<tr>
<td>Dhomey</td>
<td>Dho du</td>
<td>U-Tsang</td>
</tr>
</table>
| Parts of Tibet |
| Amdo |
Kham |
Lhasa |
| Dhomey |
Dho du |
U-Tsang |
Now what can we do with tables!
-
Tables are made to be used for data: rows and columns of information.
-
We can put anything inside a table cell —
even another table!
One example: Check your email: the lines of emails with date, subject, and who from is
made with table code.)
Below are some small examples. (They are using
CSS language
for the colors, background, etc.)
This table is used to display images.
It is using the same table code as the simple tables above,
but the cells with photos contain img tags inside the td tags,
and the captions are in p tags inside the td tags.
|
|
|
|
His Holiness Dalai Lama
|
The Kalmiopsis Valley in Oregon, USA
|
A logo
|
This table uses a small repeating image for the background.
Click to see the code
for this table.
|
animals we like
|
|
sheep
|
In asia sheep are small and wooly.
In america sheep are very fat and wooly, and really really stupid.
Goats everywhere look intelligent, but
maybe they aren't.
Yak and dri live only in tibet, because they are very intelligent.
|
|
goats
|
|
yak
|
|
dri
|
This table uses one image for the background.
Click to see the code
for this table.
|
This is one of james' homes.
It is called the Kalmiopsis, in southern Oregon.
The animals of james' home are:
|
| eagle |
| hawk |
| owl |
| elk |
| deer |
| wolf |
|
)