Tables
cell 1 |
cell 2 |
cell 3 |
cell 4 |
cell 5 |
cell 6 |
Gosh, where do I start... HTML tables allow you to customise the design and
layout of your Web page. For instance, using tables you can split your Web page
into several columns (like a newspaper) or add margins to your Web page. Infact,
almost any layout you can conceive!
Do not worry if you do not understand this tutorial after your first read
through, tables can be tricky to understand (this is why I wrote
Table.Wizard!). Take your time, follow the examples provided and all should
become clear soon.
A HTML table is contained between the tags, <TABLE> and
</TABLE>. Tables consist of columns and rows. <TR>
indicates the start of a new row. <TD> indicates the start of a
cell within a row and </TD> indicates the end of a cell.
Below is an example of a basic table.
<TABLE BORDER=1>
<TR>
<TD>cell 1</TD>
<TD>cell 2</TD>
<TR>
<TD>cell 3</TD>
<TD>cell 4</TD>
</TABLE>
|
cell 1 |
cell 2 |
cell 3 |
cell 4 |
|
The tags, <TABLE>, <TR> and <TD>
all have attributes associated with them. Below, the key attributes of these
tags are discussed.
The key attributes of the tag, <TABLE> are:
- ALIGN=""
Align the entire table LEFT, RIGHT or CENTER.
- BORDER=
How thick, in pixels, should the border be? (=0 no border at all)
- CELLPADDING=
The margin, in pixels, between the cells border and its content.
- CELLSPACING=
The spacing, in pixels, between each cell.
- WIDTH=
The total width of the table. This value can either be in pixels or a percentage
(in relation to browser window).
The key attributes of the tag, <TR> are:
- ALIGN=""
The alignment of each cells contents in the row LEFT, RIGHT or
CENTER.
- VALIGN=""
The vertical alignment of each cells contents in the row TOP,
MIDDLE or BOTTOM.
The key attributes of the tag, <TD> are:
- ALIGN=""
The alignment of the cells contents LEFT, RIGHT or
CENTER. The default is LEFT.
- BGCOLOR="#rrggbb"
The background color of the cell, in rrggbb format.
- COLSPAN=
The number of columns the cell should span.
- ROWSPAN=
The number of rows the cell should span.
- NOWRAP=""
Do not allow the cells contents to wrap (like a word processor) YES or
NO.
- VALIGN=""
The vertical alignment the cells contents TOP, MIDDLE or
BOTTOM.
Here are some examples for you to try out :)
-
<TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=16 CELLSPACING=4 WIDTH=80%>
<TR ALIGN="RIGHT">
<TD>cell 1</TD>
<TD>cell 2</TD>
<TD>cell 3</TD>
<TD>cell 4</TD>
<TR VALIGN="TOP">
<TD>cell 5</TD>
<TD>cell 6</TD>
<TD>cell 7</TD>
<TD>cell 8</TD>
</TABLE>
-
<TABLE ALIGN="RIGHT" CELLPADDING=8 CELLSPACING=4 WIDTH=300>
<TR>
<TD ALIGN="LEFT">cell 1</TD>
<TD ALIGN="CENTER">cell 2</TD>
<TD ALIGN="RIGHT">cell 3</TD>
<TR>
<TD BGCOLOR="#FF0000">cell 4</TD>
<TD BGCOLOR="#00FF00">cell 5</TD>
<TD BGCOLOR="#0000FF">cell 6</TD>
</TABLE>
-
<TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=8 CELLSPACING=4>
<TR>
<TD COLSPAN=2 ROWSPAN=1>cell 1</TD>
<TD COLSPAN=1 ROWSPAN=1>cell 2</TD>
<TR>
<TD COLSPAN=1 ROWSPAN=1>cell 3</TD>
<TD COLSPAN=2 ROWSPAN=2>cell 4</TD>
<TR>
<TD COLSPAN=1 ROWSPAN=1>cell 5</TD>
</TABLE>
Here is a very complicated table! As you can guess, it would take quite some
time to work out (how many rows and columns for each cell - etc.), but
thanks to Table.Wizard, is only took a couple of minutes to do! :)