Working with Tables
A table comprises
three basic elements - table itself, the
table rows and the table columns. And
so, when playing with tables, there are
three tags you need to burn into your
memory:
The
<table>....</table> tag is the main tag
used to create a table. The <tr></tr>
tag is used to define a horizontal row.
Each row may be further divided into
'cells'. The <td></td> tag is used to
define cells (or columns) in a row.
Pretty simple, right? the <td> tags
always appear within <tr> tags, which in
turn are always sandwiched between the
<table></table> tags.
So let's create a simple table with two
rows and three columns:
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>
You should see
something like this:
Row 1, Column 1 Row 1, Column 2 Row 1,
Column 3
Row 2, Column 1 Row 2, Column 2 Row 2,
Column 3
Now let's talk
attributes, the BORDER attribute which
is used abve in the <table> tag controls
the thickness, of the border surrounding
the cells in the table. If you would
like to put borders, simply set
border="1" or any desired thickness.
Next, the width and height attributes.
These may be specified in terms of
pixels or as a percentage of the browser
window size. Example:
<table width="100%" border="1"
height="100%">
<tr>
<td>I'm all alone here</td>
</tr>
</table>
if these two
attributes are omitted, the height and
widht of the table will be automatically
calculated on the basis of the size of
the cells within it. And let's not
forget our old friend, the Align
attribute, used to align the table to
the left, right or center of the page.
The line of code:
<table border="1" align="center">
..................
</table>
would centralise
the table between the right and left
margins. The default value is left.
Internet Exploer 3.0 does not support
align="center" and so the entire table
should be explicitly ceptred within the
<center>.....</center> tags.
The bgcolor
attribture may be used to specify a
background color for the entire table.
e.g.:
<table bgcolor="red">
<tr>
<td>This table has a red background
color</td>
</tr>
</table>
The bgcolor and
align attributes can also be used with
the <tr> and <td> attributes to change
the background color and alignment of
individual cells or rows. It's even
possible to align rows or cells
vertically with the Valign attribute,
wich takes te values "top", "bottom" or
"middle".
so the line of code:
<table
width="100" height="100 border="0">
<tr>
<td align="center" valign="middle">I'm
right in the center of this box</td>
</tr>
</table>
Would create a
single cell of height and width 100
pixels, with the text placed in the
center. Also Note that the default value
of the Valign attribute is middle.
And while on the subject of the <td>
tag, the width and height attributes
canalso be used to change the size of
individual cells. Example:
<table
border=0 width=300 height=75>
<tr>
<td width=70%>Big Fat man</td>
<td width=40%>Thin as rake</td>
</tr>
</table>
would appear as shown below:
thin
Big fat man as a
rake
now that you know
how to align things, we should also
mention that it's possible to display
images within a cell by using the <img>
tag, or change the typeface and emphasis
of text using formatting tags like
<font> and <b>, as the following example
illustrates:
<table
width="200" border="1" height="200">
<tr align="center" valign="middle">
<td><img src="back.gif" width=75
height=75 border=0 alt="Back
Ground"></td>
<td bgcolor="black">
<font face="Arial" size="+1"
color="white">Who says the hare always
wins?</font></td>
</tr></table>
Then there are the
cellpadding and cellspacing attributes
of the <table> tag. Example:
<table
border=1 cellpadding="15">
<tr>
<td>R1, C1</td>
<td>R1, C2</td>
</tr>
<tr>
<td>R2, C1</td>
<td>R2, C2</td>
</tr>
</table>
<table border="2" cellspacing="15">
<tr>
<td>R1, C1</td>
<td>R1, C2</td>
</tr>
<tr>
<td>R2, C1</td>
<td>R2, C2</td>
</tr>
</table>
Now, suppose we
have a simple two-row, two-column
arrangement, and we want to combine the
two cells in the first row into a single
cell. No problem.... just add then
colspan attribute to the <td> tag, like
this:
<table
border="0">
<tr>
<td colspan="2">Row 1</td>
</tr>
<tr>
<td>R2, C1</td>
<td>R2, C2</td>
</tr>
</table>
You can even
stretch cells vertically using the
ROWSPAN attribute, like this:
<table
border="0">
<tr>
<td rowspan="2">Column 1</td>
<td>R1, C2</td>
</tr>
<tr>
<td>R1, C2</td>
</tr>
</table>
R1, C2
Column 1
R1, C2
