Basic HTML Elements

Basic HTML Coding
Table Tags -- The table is one of the most useful design elements in html. It allows you to use relatively simple html codes to create complex and interesting arrangements on your pages. Tables can be used to create grids with information in cells, or without borders, they can help you arrange your text and images in all sorts of creative ways. For an overview of how tables can be used, see the General Tables page and the Color Chart page. This page discusses the basics of the tags for tables themselves.

Basic Table Tags
<table> </table> Tags to delineate the entire table.
<tr> </tr> Sets up a row in your table.
<td> </td> Sets up a cell within a row.

So if you were going to set up a simple table with 3 rows down, and 2 columns across, the coding would look something like this (in place of the "Row_1_Col_1_" items would be your actual text, images, etc.):

<table>

<tr> <td> Row_1_Col_1_ </td> <td> Row_1_Col_2_ </td> </tr>

<tr> <td> Row_2_Col_1_ </td> <td> Row_2_Col_2_ </td> </tr>

<tr> <td> Row_3_Col_1_ </td> <td> Row_3_Col_2_ </td> </tr>

</table>

Attributes in Table Tags:
There are a number of additions to the table tags you can use to add features to your tables and allow you to use them to create complex layouts.

Attributes to be used within the <table> tag (remember that you can combine a number of attributes within the table tag):
<table border="1"> Creates a border in your table. Can use different amounts.
<table width="70%"> Forces the table to fit within the specified percent of the screen.
<table width="350"> Forces the table to be a certain number of pixels wide
<table cellspacing="5" cellpadding="10"> Cellpadding is the space around your material to the edge of the cell (both vertically and horizontally). This keeps the text from runnning right to the edge. Cellspacing is the space between cells (if the table is bordered, cellspacing is represented in a kind of border). The following tables use a border of "3".
This mini table has cellpadding of 20 and cellspacing of 5
Cell Info Cell Info

This mini table has cellpadding of 5 and cellspacing of 20
Cell Info Cell Info

This mini table has cellpadding of 0 and cellspacing of 0
Cell Info Cell Info
<table bgcolor="#FF0000"> Changes the background color within the table. Can also be used for a row or a cell. See Color Chart for more information.

Attributes to be used within the <tr> tag (remember that you can combine a number of attributes within the tag):
<tr align=center> Centers the information (left to right) in all the cells in that row. Can also use left or right -- default is left.
<tr valign=top> Lines up the information in all the cells in that row vertically to start at the top of the cell, so that excess space is at the bottom. Can also use middle and bottom -- default is middle.
<tr bgcolor="#000000"> Changes the color of the background for that row.

Attributes to be used within the <td> tag (remember that you can combine a number of attributes within the tag):
<td align=center> Centers the information (left to right) in that cell. Can also use left or right -- default is left.
<td valign=top> Lines up the information in the cell to start at the top of the cell, so that excess space is at the bottom. Can also use middle and bottom -- default is middle.
<td bgcolor="#000000"> Changes the color of the background for that row.

<td colspan="2"> Indicates that this cell will take up the width of two columns. You can use this for a heading of your table by making the colspan equal to the number of columns, or you can use this to even out your table. It's important that all rows have the same number of cells.

<td rowspan="2"> Indicates that this cell will take up the height of two rows. Be careful with this as it can get confusing to make sure that the other rows have the right number of cells.

<td width="170" height="20"> Allows you to set the width and height of the cell in pixels

WebTricks Main Page

Document tags
Simple tags
Container tags
Using Color
Hyperlinks
Images

Table Tags
Table Examples

Animated Gifs

Frames

Outside Resources

You can reach Pete at:
pete@thelivingcanvas.com

<table> </table>	Tags to delineate the entire table.
<tr> </tr>	Sets up a row in your table.
<td> </td>	Sets up a cell within a row.

<table>
<tr> <td> Row_1_Col_1_ </td>	<td> Row_1_Col_2_ </td> </tr>
<tr> <td> Row_2_Col_1_ </td>	<td> Row_2_Col_2_ </td> </tr>
<tr> <td> Row_3_Col_1_ </td>	<td> Row_3_Col_2_ </td> </tr>
</table>

<tr align=center>	Centers the information (left to right) in all the cells in that row. Can also use left or right -- default is left.
<tr valign=top>	Lines up the information in all the cells in that row vertically to start at the top of the cell, so that excess space is at the bottom. Can also use middle and bottom -- default is middle.
<tr bgcolor="#000000">	Changes the color of the background for that row.

<td align=center>	Centers the information (left to right) in that cell. Can also use left or right -- default is left.
<td valign=top>	Lines up the information in the cell to start at the top of the cell, so that excess space is at the bottom. Can also use middle and bottom -- default is middle.
<td bgcolor="#000000">	Changes the color of the background for that row.
<td colspan="2">	Indicates that this cell will take up the width of two columns. You can use this for a heading of your table by making the colspan equal to the number of columns, or you can use this to even out your table. It's important that all rows have the same number of cells.
<td rowspan="2">	Indicates that this cell will take up the height of two rows. Be careful with this as it can get confusing to make sure that the other rows have the right number of cells.
<td width="170" height="20">	Allows you to set the width and height of the cell in pixels

WebTricks Main Page
Document tags Simple tags Container tags Using Color Hyperlinks Images	Table Tags Table Examples Animated Gifs Frames Outside Resources