HTML provides tables for structuring numerical or other information in an accessible way - such as with a bus timetable. However, many designers use tables to format chunks of content into columns and rows.
This is frowned upon by some designers who say that the <div> element (covered in CSS) should be used for this and that tables should only be used for their intended purpose.
The Basic Structure of a Table
<table> <tr>
<th>
Heading in here
</th>
<td>
Content in here
</td>
</tr>
</table>
A table has only one <table> element, which must have a closing tag, but there may be multiple <tr>, <th> and <td> elements, each of which must have closing tags.
The <tr> elements enclose the <th> and <td> elements and provide the rows of the table.
The <th> elements enclose the cell headings and the <td> elements enclose the content and provide the columns of the table.
The <th> element is optional and may be omitted if a heading above each cell is not required.
By default headings within <th> elements are displayed in bold text and centred whereas within <td> elements, content is displayed in normal text and left aligned.
If multiple rows and multiple columns are employed then the number of columns in each row must match i.e. each <tr> element must enclose the same number of <th> or <td> elements.
<table> Attributes
The <table> element supports a number of attributes, some of which are listed below.
The align attribute allows the table to aligned left, right or centre in relation the page or any enclosing container. This attribute is depreciated in 4.01 since it can be set using a style definition.
e.g. <table align="center">
The bgcolor attribute sets the background colour of the table which can be a standard colour name such as "blue" or hexadecimal values for the red, green and blue components of each colour. This attribute is depreciated in 4.01 since it can be set using a style definition.
e.g. <table bgcolor="#ff0000">
The border attribute draws a border round the table in the form border="n" where "n" is the width of the border in pixels. By default border="0". This attribute is depreciated in 4.01 since it can be set using a style definition.
e.g. <table border="1">
The cellpadding attribute sets the amount of space between the edges of a cell (i.e. <td> element) and its contents. It takes the form cellpadding="n" where n is the amount of space in pixels.
The cellspacing attribute sets the amount of space between individual cell boundaries (i.e. <td> elements). It takes the form cellspacing="n" where n is the amount of space in pixels.
The width attribute sets the width of the table in the form width="n" where "n" is a width in pixels or is expressed as a percentage of the page or any enclosing container. This attribute is depreciated in 4.01 since it can be set using a style definition.
The class attribute tells the browser to render the table in a named style and takes the form <table class="my_table_style"> where "my_table_style" is a previously defined style.
The <tr> element supports a number of attributes, some of which are listed below.
The align attribute defines whether the content within all cells, i.e. <td>, within the row is to be aligned left, right or centre. This attribute is depreciated in 4.01 since it can be set using a style definition.
The valign attribute specifies whether the content within all cells, i.e. <td>, within the row is to be vertically aligned top, middle or bottom. This attribute is depreciated in 4.01 since it can be set using a style definition.
The bgcolor attribute sets the background colour of all cells, i.e. <td>, in the row. This attribute is depreciated in 4.01 since it can be set using a style definition.
The class attribute. This tells the browser to render the element in a named style and takes the form <tr class="my_row_style"> where "my_row_style" is a previously defined style.
<th> and <td> Attributes
The <td> element supports a number of attributes, some of which are listed below.
The align attribute defines whether the content within this cell is to be aligned left, right or centre. This attribute is depreciated in 4.01 since it can be set using a style definition.
The valign attribute specifies whether the content within this cell is to be vertically aligned top, middle or bottom. This attribute is depreciated in 4.01 since it can be set using a style definition.
The bgcolor attribute sets the background colour of this cell. This attribute is depreciated in 4.01 since it can be set using a style definition.
The colspan attribute allows you to join cells vertically. It takes the form colspan="n" where "n" is the number of columns that the cell will span.
The rowspan attribute allows you to join cells horizontally. It takes the form rowspan="n" where "n" is the number of rows that the cell will span.
The class attribute. This tells the browser to render the element in a named style and takes the form <td class="my_cell_style"> where "my_cell_style" is a previously defined style.
Free Web Design Tutorials
Creating TablesForms - BasicsInput and TextareaSelect ListsFramesetsThe Frame ElementNested FramesetsTargeting FramesInline Frames
Previous - Linking to Other Documents
Next - Forms - Basics 
