| Learning HTML Tables
This section looks at:
Basic table tags
All tables begin and end with the
<TABLE>
</TABLE> opening and closing tags.
Each row is opened with
<TR> and closed with </TR>
Each cell is opened with
<TD> and closed with </TD>
The example in the box below illustrates
a two cell, two row table with no border:
| HTML Coding <TABLE>
<TR>
<TD>Top left. </TD>
<TD>Top right.</TD>
</TR>
<TR>
<TD>Bottom left.</TD>
<TD>Bottom right.</TD>
</TR>
</TABLE>
|
Display
| Top left |
Top right |
| Bottom left |
Bottom right |
|
Table borders
If the BORDER="n"
attribute is used, the table
will be displayed with a border. "1"
provides the narrowest border,
"2" a slightly thicker border and so
on:
| HTML Coding <TABLE BORDER="1">
<TR>
<TD>Top left. </TD>
<TD>Top right.</TD>
</TR>
<TR>
<TD>Bottom left.</TD>
<TD>Bottom right.</TD>
</TR>
</TABLE>
|
Display
| Top left. |
Top right. |
| Bottom left. |
Bottom right. |
|
Table width
By default the width of the
table will be determined by the width of the text or images it contains. The width of the
table can be adjusted using the WIDTH attribute and
a percentage or a number of pixels:
| HTML Coding <TABLE WIDTH="100%" BORDER="1">
<TR>
<TD>This table takes up the full width of the page.</TD>
</TR>
</TABLE>
|
Display
| This table takes up the
full width of the page. |
|
| HTML Coding <TABLE WIDTH="60%" BORDER="1">
<TR>
<TD>This table takes up sixty percent of the page
width. </TD>
</TR>
</TABLE>
|
Display
| This table takes up sixty
percent of the page width. |
|
| HTML Coding <TABLE WIDTH="60" BORDER="1">
<TR>
<TD>This table is sixty pixels wide.</TD>
</TR>
</TABLE>
|
Display
| This table is sixty pixels
wide. |
|
Cell width
The width of cells can be
controlled using the WIDTH attribute with the <TD> tag and a percentage or number of
pixels. For example, if you want the left-hand cell to take up 30% of the column and the
right-hand side 70% the HTML coding would be as follows:
| HTML Coding <TABLE WIDTH="100%" BORDER="1">
<TR>
<TD WIDTH="30%">This cell
takes up 30% of the table width. </TD>
<TD WIDTH="70%">This cell takes up
70% of the table width.</TD>
</TR>
</TABLE>
|
Display
| This cell takes up 30% of the table
width. |
This cell takes up 70% of the table
width. |
|
Horizontal alignment
By default text and images
in a cell are aligned to the left. Horizontal alignment can be changed using the ALIGN="CENTER"
or ALIGN="RIGHT"
attributes within the <TD> tag.
| HTML Coding <TABLE BORDER="1" WIDTH=100%>
<TR>
<TD WIDTH="35%" ALIGN="RIGHT">
This text is <BR>
aligned to the<BR>
right of the cell.</TD>
<TD WIDTH="65%" ALIGN="CENTER">
This text is centred in the cell.</TD>
</TR>
</TABLE>
|
Display
This text is
aligned to the
right of the cell. |
This text is centred in the cell. |
|
Vertical alignment
By default text and images
in a cell are aligned in the middle of the cell. Vertical alignment can be controlled with
the VALIGN="TOP" and VALIGN="BOTTOM" attributes within the <TD> tag:
| HTML Coding <TABLE BORDER="1" HEIGHT=100>
<TR>
<TD WIDTH="50%" VALIGN="BOTTOM">
This text is aligned with the bottom of the cell.</TD>
<TD WIDTH="50%" VALIGN="TOP">
This text is aligned with the top of the cell.</TD>
</TR>
</TABLE>
|
Display
This text is aligned
with the bottom of the cell. |
This text is aligned with the top of the cell.
|
|
|
