Examples of Tables

For each example, I will give the code on the right and display the table created by the code on the left.  All text that appears in the table will be in blue when displayed in the code.  If you wish, you can fiddle around with a few combinations on your own.  Have fun!


Example 1: Simple default table
Example 2: BORDER width
Example 3: BORDERCOLOR
Example 4: Background & Cell Colours
Example 5: Comparing CELLSPACING and CELLPADDING
Example 6: COLSPAN and ROWSPAN
Example 7: VALIGN and ALIGN
Example 8: Using COLS and Not Using COLS (Netscape Users Only)
Example 9: WIDTH Attributes
Example 10: Nesting Tables


Example 1: Simple default table (2x3)


Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=1>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD><TD>Cell 4</TD></TR>
<TR><TD>Cell 5</TD><TD>Cell 6</TD></TR>
</TABLE>

NOTE:  The default border widths in the table is 0 (i.e. invisible).  As a result, I have set the border width equal to 1 pixel so that you can see the table's layout.
Top

Example 2: BORDER width


Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD><TD>Cell 4</TD></TR>
<TR><TD>Cell 5</TD><TD>Cell 6</TD></TR>
</TABLE>

NOTE:  Note that only the outside border changed width.  In order to change the width of the in-between borders -- the cell borders -- check example 5.  In addition, the default colour of the table border corresponds with the colour of your Operating Systems' colour scheme (be it Mac, MS Windows, or what have you).  If you want to change the colour of your table borders, you must specify the colour, as seen in the following examples.
Top

Example 3: BORDERCOLOR

Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD><TD>Cell 4</TD></TR>
<TR><TD>Cell 5</TD><TD>Cell 6</TD></TR>
</TABLE>
NOTE:  There is a difference between the way that Internet Explorer and Netscape views the border colours of your table.  Click here to see the difference.
Top

Example 4: Background & cell colours

    a) Background Colour
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BGCOLOR=#F7F3AC BORDERCOLOR=#801010>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD><TD>Cell 4</TD></TR>
<TR><TD>Cell 5</TD><TD>Cell 6</TD></TR>
</TABLE>
NOTE:  There is a difference between the way that Internet Explorer and Netscape views the background colours of your table.  Click here to see the difference.
If you want each cell to be a different colour, then follow the next example:
    b) Cell Colours
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010>
<TR>
<TD BGCOLOR=#F7F3AC>Cell 1</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
<TD BGCOLOR=#80FFFF>Cell 4</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 5</TD>
<TD BGCOLOR=#BCBC7A>Cell 6</TD>
</TR>
</TABLE>
NOTE:  For different coloured cells, IE and Netscape look the same.  I have changed the format of the coding in this case to make it a little easier to read.
    c) Background Image in Cells
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010>
<TR>
<TD BACKGROUND="dots.gif">Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>BGCOLOR=#9A9ACD>Cell 3</TD>
<TD BACKGROUND="dots.gif">Cell 4</TD>
</TR>
<TR>
<TD BACKGROUND="dots.gif">Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
    d) Background Image in Table
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 BACKGROUND="dots.gif">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>BGCOLOR=#9A9ACD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
<TR>
<TD <>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
Top

Example 5: Comparing CELLSPACING with CELLPADDING

    a) CELLSPACING
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLSPACING=10>
<TR>
<TD BGCOLOR=#F7F3AC>Cell 1</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
<TD BGCOLOR=#80FFFF>Cell 4</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 5</TD>
<TD BGCOLOR=#BCBC7A>Cell 6</TD>
</TR>
</TABLE>
NOTE:  As you can see, CELLSPACING increases the border in between the cells.  It adds space between the cells.  Compare with CELLPADDING in the following:
    b) CELLPADDING
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=10>
<TR>
<TD BGCOLOR=#F7F3AC>Cell 1</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
<TD BGCOLOR=#80FFFF>Cell 4</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 5</TD>
<TD BGCOLOR=#BCBC7A>Cell 6</TD>
</TR>
</TABLE>
NOTE:  In this example, the width of the border stays the same, but the spacing between the text and the border changes. Note the differences if I remove the table border.
    c) CELLSPACING, NO BORDER
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=0 BORDERCOLOR=#801010 CELLSPACING=10>
<TR>
<TD BGCOLOR=#F7F3AC>Cell 1</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
<TD BGCOLOR=#80FFFF>Cell 4</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 5</TD>
<TD BGCOLOR=#BCBC7A>Cell 6</TD>
</TR>
</TABLE>
    d) CELLPADDING, NO BORDER
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE BORDER=0 BORDERCOLOR=#801010 CELLPADDING=5>
<TR>
<TD BGCOLOR=#F7F3AC>Cell 1</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
<TD BGCOLOR=#80FFFF>Cell 4</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 5</TD>
<TD BGCOLOR=#BCBC7A>Cell 6</TD>
</TR>
</TABLE>
Top


 

Return to the HTML Lesson Guide
Read more examples
Return to Tables Lesson
Read the next lesson: Frames

This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.