Examples of Tables (cont'd)


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 6: COLSPAN and ROWSPAN

    a) COLSPAN
Cell 1
Cell 2Cell 3
Cell 4Cell 5
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=10>
<TR>
<TD COLSPAN=2 BGCOLOR=#F7F3AC>Cell 1</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 2</TD>
<TD BGCOLOR=#80FFFF>Cell 3</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 4</TD>
<TD BGCOLOR=#BCBC7A>Cell 5</TD>
</TR>
</TABLE>
    b) ROWSPAN
Cell 1Cell 2
Cell 3
Cell 4
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=10>
<TR>
<TD ROWSPAN=3 BGCOLOR=#F7F3AC>Cell 1</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 4</TD>
</TR>
</TABLE>
Top

Example 7: VALIGN and ALIGN

    a) Horizontal Alignment
Cell 1; aligned right
Cell 2; aligned centreCell 3; aligned left
Cell 4; aligned rightCell 5; default
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010
CELLPADDING=10>
<TR>
<TD COLSPAN=2 BGCOLOR=#F7F3AC ALIGN=RIGHT>Cell 1; aligned right</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACDALIGN=CENTER>Cell 2; aligned centre</TD>
<TD BGCOLOR=#80FFFFALIGN=LEFT>Cell 3;aligned left</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACAALIGN=RIGHT>Cell 4; aligned right</TD>
<TD BGCOLOR=#BCBC7A>Cell 5; default</TD>
</TR>
</TABLE>
    b) Vertical Alignment
Cell 1; top alignCell 2
Cell 3
Cell 4
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=10>
<TR>
<TD ROWSPAN=3 BGCOLOR=#F7F3AC VALIGN=TOP>Cell 1; top align</TD>
<TD BGCOLOR=#9AFC8F>Cell 2</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Cell 3</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 4;</TD>
</TR>
</TABLE>
Cell 1 Cell 1
Cell 1 Cell 1
Cell 1 Cell 1
Cell 1 Cell 1
Cell 1 Cell 1		Cell 2; align bottom
Cell 3; align centreCell 4 Cell 4
Cell 4 Cell 4
Cell 4 Cell 4
Cell 4 Cell 4
Cell 4 Cell 4
Cell 5 Cell 5
Cell 5 Cell 5
Cell 5 Cell 5
Cell 5 Cell 5
Cell 5 Cell 5 		Cell 6; default
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=5>
<TR>
<TD BGCOLOR=#F7F3AC>Cell 1 Cell 1<br>Cell 1 Cell 1<br>Cell 1 Cell 1<br>Cell 1 Cell 1<br>Cell 1 Cell 1</TD>
<TD BGCOLOR=#9AFC8F VALIGN=BOTTOM>Cell 2;
align bottom</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD VALIGN=CENTER>Cell 3;
align centre</TD>
<TD BGCOLOR=#80FFFF>Cell 4 Cell 4<br>Cell 4 Cell 4<br>Cell 4 Cell 4<br>Cell 4 Cell 4<br>Cell 4 Cell 4</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Cell 5 Cell 5 <br>Cell 5 Cell 5 <br>Cell 5 Cell 5 <br>Cell 5 Cell 5 <br>Cell 5 Cell 5 </TD>
<TD BGCOLOR=#BCBC7A>Cell 6; default</TD>
</TR>
</TABLE>
Top

Example 8: Using COLS and not using COLS

(Netscape users only)
NOTE:  As mentioned before, the COLS attribute forces the columns to be of equal width.  This attribute works only in Netscape.  Compare the following two tables when with and without the COLS attribute included.
    a)Without COLS
Name:Courtney Day
Address:1244 King St., Apt. 4945
Bigton, Manitoba
Favourite Saying:"All of us are lying in the gutter, but some of us are looking at the stars."
-Oscar Wilde-
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=10>
<TR>
<TD BGCOLOR=#F7F3AC>Name: 1</TD>
<TD BGCOLOR=#9AFC8F>Courtney Day</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Address:</TD>
<TD BGCOLOR=#80FFFF>1244 King St., Apt. 4945<br> Bigton, Manitoba</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Favourite Saying:</TD>
<TD BGCOLOR=#BCBC7A>"All of us are lying in the gutter, but some of us are looking at the stars."<BR> -Oscar Wilde-</TD>
</TR>
</TABLE>
    b)With COLS
Name:Courtney Day
Address:1244 King St., Apt. 4945
Bigton, Manitoba
Favourite Saying:"All of us are lying in the gutter, but some of us are looking at the stars."
-Oscar Wilde-
 Code:

<TABLE BORDER=5 BORDERCOLOR=#801010 CELLPADDING=10 COLS=2>
<TR>
<TD BGCOLOR=#F7F3AC>Name: 1</TD>
<TD BGCOLOR=#9AFC8F>Courtney Day</TD>
</TR>
<TR>
<TD BGCOLOR=#9A9ACD>Address:</TD>
<TD BGCOLOR=#80FFFF>1244 King St., Apt. 4945<br> Bigton, Manitoba</TD>
</TR>
<TR>
<TD BGCOLOR=#BCCACA>Favourite Saying:</TD>
<TD BGCOLOR=#BCBC7A>"All of us are lying in the gutter, but some of us are looking at the stars."<BR> -Oscar Wilde-</TD>
</TR>
</TABLE>
NOTE:  Those with IE browsers can click here to see what the Netscape browsers see.
Top

Example 9: WIDTH attributes

    a) Table Widths
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE WIDTH=300 BORDER=5 CELLPADDING=5 CELLSPACING=2>
<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:  Most people recommend defining your widths using pixels instead of percentages, as the percentages are in relationship to the size of the screen and the screen resolution (less control over look of page). If you want different columns (or cells) to have different widths, look at the following example:
    b) Cell Widths
Cell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6
 Code:

<TABLE WIDTH=300 BORDER=5 CELLPADDING=5 CELLSPACING=2>
<TR>
<TD WIDTH=80>Cell 1</TD>
<TD WIDTH=220>Cell 2</TD>
</TR>
<TR>
<TD WIDTH=80>Cell 3</TD>
<TD WIDTH=220>Cell 4</TD>
</TR>
<TR>
<TD WIDTH=80>Cell 5</TD>
<TD WIDTH=220>Cell 6</TD>
</TR>
</TABLE>

Top

Example 10: Nesting Tables

Putting one table into another table (or "nesting" the tables in programming lingo) is very easy to do.  In fact, all the examples I have shown demonstrate how nesting looks. Each of the examples is in a table that is 85% of the screen size, with no border, and with padding within the cell of 10 pixels.  (<TABLE WIDTH=80% BORDER=0 CELLPADDING=10>) I will show you another example of a nested table for your viewing pleasure along with the code, complete with as much of what we have just learned as I can possibly fit in.
Cell 1aCell 1b
Cell 1cCell 1d
 Cell 2
Cell 3
Cell 4
 Code:

<TABLE WIDTH=300 BORDER=5 CELLPADDING=5 CELLSPACING=0>
<TR>
<TD ROWSPAN=3 WIDTH=200 VALIGN=TOP ALIGN=CENTER>

    <TABLE BORDER=2 BACKGROUND="dots.gif" BORDERCOLOR=#009990 CELLPADDING=2>
    <TR>
    <TD>Cell 1a</TD><TD>Cell 1b</TD>
    </TR>
    <TR>
    <TD>Cell 1c</TD><TD>Cell 1d</TD>
    </TR>
    </TABLE>

</TD>
<TD BGCOLOR=#9A9ACD WIDTH=100 ALIGN=CENTER>&ly;B>Cell 2</B></TD>
</TR>
<TR>
<TD BGCOLOR=#50AB45>Cell 3</TD><
/TR>
<TR>
<TD BGCOLOR=#DE1010>Cell 4</TD></TR>
</TABLE>
Top

Return to the HTML Lesson Guide
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.