Tables and Frames

To organize items on a web page in columns or rows, you may use either the table commands or the frame commands. The table commands tend to cause less confusion at first. The main difference between the two is that a table can be placed on one HTML file, whereas frames require at least two HTML files, one file for each frame. If you want to create a matrix, you definitely want use tables rather than frames. We'll also discuss how to create background color in this lesson.

Tables

Tables are organized according to horizontal rows and vertical columns. Entering the code for tables can be tricky. If you fail to format one particular cell within the table correctly, the error will probably disrupt the entire shape of your table.

A table is defined by the <table> </table> tag pair. The entire contents of the table need to be located between these tags.

A table row is defined by the <tr> </tr> tag pair. The entire contents of the row need to be located between these tags.

A table cell is defined by the <td> </td> tag pair. The entire contents of the cell need to be located between these tags. Thus, columns are created according to the number of cells in a particular row. Images, texts, links etc. all need to be located within a cell, between a <td> </td> tag pair.

To add background color to an entire table, insert the "bgcolor=#ffffcc" code in the opening table tag
(e.g., <table bgcolor="#ffffcc"> where the color in this particular case is #ffffcc).

Similarly, to add background color to a particilar cell, insert the "bgcolor=#804040" code in the opening cell tag
(e.g., <td bgcolor="#804040"> where the color in this particular case is #804040).


row 1, column 1 row 1, column 2 row 1, column 3
row 2, column 1 row 2, column 2 row 2, column 3
row 3, column 1 row 3, column 1 row 3, column 1


Compare the table above with the code used to produce it below.


<table width=100% border="2" bgcolor="#ffffcc">

<tr>
<td bgcolor=#804040>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 bgcolor=#408080>row 2, column 2</td>
<td>row 2, column 3</td>
</tr>

<tr>
<td>row 3, column 1</td>
<td>row 3, column 2</td>
<td bgcolor=#0080c0>row 3, column 3</td>
</tr>

</table>


Other important table codes

Note: All of these codes should be placed in the opening <table> tag.

border="2" [in this case, there will be 5-pixel gridlines between cells]

border="0" [in this case, there will be *no* gridlines between cells]

width="95%" [in this case the table will consume 95% of the width of the browser screen]

height="80%" [in this case the table will consume 80% of the height of the browser screen]

cellpadding="10" [in this case, there will be a 10-pixel margin around all cell contents]

cellspacing="5" [in this case, there will be a 5-pixel margin between cells]


Click here to find out about frames.