Table Examples

or scroll down the page.

Return to Main Page of Ted’s HTML Tutorial

Example #1

Right aligning a table:

<TABLE ALIGN="RIGHT" BORDER CELLSPACING="0" CELLPADDING="0">
<CAPTION><B>MESA HIGH VICTORIES</B></CAPTION>
<TH>Team</TH>
<TH>Score</TH>
<TR ALIGN="CENTER"> <TD><B>Parkfield High Demons</B></TD>
<TD><B>28 to 21</B></TD>
</TR>
<TR ALIGN="CENTER"> <TD><B>Burns High Badgers</B></TD>
<TD><B>14 to 13</B></TD>
</TR>
<TR ALIGN="CENTER"> <TD><B>Mott High Kings</B></TD>
<TD><B>20 to 17</B></TD>
</TR>
</TABLE><FONT SIZE="4"><B>The Mesa High School Warriors football team has exploded this season with an outstanding start. They have won their first three games, the last two against teams which defeated them last year. The Warriors are well on their way to bettering their last season's overall tally of 9 wins and 3 losses, after which they went on to win the divisional championship. The momentum of the Warriors is expected to continue through their homecoming game on Friday night at 7:00 p.m., when they will host the Valley High Scorpions. Congratulations, Warriors! Keep up the spirit!</B></FONT>
would cause the text to be wrapped around it this way:
MESA HIGH VICTORIES
Team Score
Parkfield High Demons 28 to 21
Burns High Badgers 14 to 13
Mott High Kings 20 to 17
The Mesa High School Warriors football team has exploded this season with an outstanding start. They have won their first three games, the last two against teams which defeated them last year. The Warriors are well on their way to bettering their last season's overall tally of 9 wins and 3 losses, after which they went on to win the divisional championship. The momentum of the Warriors is expected to continue through their homecoming game on Friday night at 7:00 p.m., when they will host the Valley High Scorpions. Congratulations, Warriors! Keep up the spirit! Note:  Since some browsers do not recognize the ALIGN parameter within a <TABLE> tag, the above table may not be aligned against the right margin, and the text may not be wrapped around the left and bottom of the table.


Example #2

A caption, or title, may appear above or below the body of a table.  A caption placed at the top of a simple one-celled table, containing a single graphic:

<CENTER><TABLE>
<CAPTION><FONT FACE="ARIAL" COLOR="#C08040" SIZE="4">Cliffs near Tesuque, NM</FONT></CAPTION>
<TR> <TD><IMG SRC="graphics/cliffs.jpg" WIDTH="293" HEIGHT="199" ALT="Cliffs near Tesuque, NM">
</TD>
</TR>
</TABLE>
</CENTER>
Note:  In the source code, the parameter ALIGN="TOP" could have been placed within the <CAPTION> tag.  However, it was omitted because it is the default.
would appear this way on a browser:

Cliffs near Tesuque, NM
Cliffs near Tesuque, NM

On the other hand, a caption placed at the bottom of a simple one-celled table, containing a single graphic: <CENTER><TABLE>
<CAPTION ALIGN="BOTTOM"><FONT FACE="ARIAL" COLOR="#C08040" SIZE="4">Camel Rock near Tesuque, NM</FONT></CAPTION>
<TR> <TD><IMG SRC="graphics/camelrck.jpg" WIDTH="293" HEIGHT="199" ALT="Camel Rock near Tesuque, NM">
</TD>
</TR>
</TABLE>
</CENTER>
would appear this way on a browser:

Camel Rock near Tesuque, NM
Camel Rock near Tesuque, NM
Note:  Go to Example #7 to see how nested tables can be used to create a multi-layered “picture frame” around a photograph.


Example #3

Sometimes, one must decide how to align the data in cells of a table row with the data in the other cells of the same row.  For instance, the state flags assembled by the following table source code:

<CENTER><FONT SIZE="4">Not all state flags are the same size, as is shown below:</FONT><BR><BR>

<TABLE CELLSPACING="15">
<TR ALIGN="CENTER" VALIGN="CENTER"> <TD WIDTH="20%">
<IMG SRC="graphics/Alabama.gif" WIDTH="109" HEIGHT="109" ALT="Alabama State Flag"><BR>
<B><I>Alabama</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/Califrna.gif" WIDTH="110" HEIGHT="73" ALT="California State Flag"><BR>
<B><I>California</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/Iowa.gif" WIDTH="110" HEIGHT="82" ALT="Iowa State Flag"><BR>
<B><I>Iowa</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/Kentucky.gif" WIDTH="110" HEIGHT="58" ALT="Kentucky State Flag"><BR>
<B><I>Kentucky</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/RhodIlnd.gif" WIDTH="109" HEIGHT="96" ALT="Rhode Island State Flag">
<BR><B><I>Rhode Island</I></B>
</TD>
</TR>
</TABLE>
</CENTER>
Note:  The WIDTH="20%" parameter could have been left out of each <TD> tag with the same effect, since browsers will make the widths of cells equal (whenever possible) if the cell widths are unspecified.
appear, on a browser, aligned along an imaginary line through the center of each flag like this:
Not all state flags are the same size, as is shown below:

Alabama State Flag
Alabama
California State Flag
California
Iowa State Flag
Iowa
Kentucky State Flag
Kentucky
Rhode Island State Flag
Rhode Island
On the other hand, using a different vertical alignment parameter in the source code, the same flags: <CENTER><FONT SIZE="4">Not all state flags are the same size, as is shown below:</FONT><BR><BR>

<TABLE CELLSPACING="15">
<TR ALIGN="CENTER" VALIGN="BASELINE"> <TD WIDTH="20%">
<IMG SRC="graphics/Alabama.gif" WIDTH="109" HEIGHT="109" ALT="Alabama State Flag"><BR>
<B><I>Alabama</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/Califrna.gif" WIDTH="110" HEIGHT="73" ALT="California State Flag"><BR>
<B><I>California</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/Iowa.gif" WIDTH="110" HEIGHT="82" ALT="Iowa State Flag"><BR>
<B><I>Iowa</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/Kentucky.gif" WIDTH="110" HEIGHT="58" ALT="Kentucky State Flag"><BR>
<B><I>Kentucky</I></B>
</TD>
<TD WIDTH="20%">
<IMG SRC="graphics/RhodIlnd.gif" WIDTH="109" HEIGHT="96" ALT="Rhode Island State Flag">
<BR><B><I>Rhode Island</I></B>
</TD>
</TR>
</TABLE>
</CENTER>
Note:  Including the VALIGN="CENTER" parameter in the <TR> tag in the source code for the first table is unnecessary, since this is the default parameter.  It is listed only for the purpose of comparing it with the VALIGN="BASELINE" parameter in the <TR> tag in the source code for the second table, which is the only difference between the two source codes.

appear aligned along a common baseline like this:

Not all state flags are the same size, as is shown below:

Alabama State Flag
Alabama
California State Flag
California
Iowa State Flag
Iowa
Kentucky State Flag
Kentucky
Rhode Island State Flag
Rhode Island


Example #4

To demonstrate how to split a table data cell with horizontal dividers, and how the ROWSPAN parameter is used in the <TD> tags of all cells in a row other than in the components of the split cell, this table:

<CENTER><TABLE BORDER="5" BORDERCOLOR="#808080" CELLSPACING="1" WIDTH="405">
<CAPTION><FONT FACE="ARIAL" SIZE="5">South American Countries & Capitals</FONT></CAPTION>
<TH WIDTH="100">Country</TH><TH WIDTH="100">Capital</TH>
<TH WIDTH="5"></TH>
<TH WIDTH="100">Country</TH><TH WIDTH="100">Capital</TH>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Argentina</TD><TD>Buenos Aires</TD>
<TD></TD>
<TD>Guyana</TD><TD>Georgetown</TD>
</TR>
<TR ALIGN="CENTER"> <TD ROWSPAN="2">Bolivia</TD><TD>Sucre (official)</TD>
<TD ROWSPAN="2"></TD>
<TD ROWSPAN="2">Paraguay</TD><TD ROWSPAN="2">Asunción</TD>
</TR>
<TR ALIGN="CENTER"> <TD NOWRAP>La Paz (administrative)</TD> </TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Brazil</TD><TD>Brasília</TD>
<TD></TD>
<TD>Peru</TD><TD>Lima</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Chile</TD><TD>Santiago</TD>
<TD></TD>
<TD>Surinam</TD><TD>Paramaribo</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Colombia</TD><TD>Bogotá</TD>
<TD></TD>
<TD>Uruguay</TD><TD>Montevideo</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Ecuador</TD><TD>Quito</TD>
<TD></TD>
<TD>Venezuela</TD><TD>Caracas</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47" NOWRAP>French Guiana</TD><TD>Cayenne</TD> </TR>
</TABLE>
</CENTER>
would be marked up this way, with the split cell containing “Sucre” and “La Paz” in its upper and lower sections, respectively:

South American
Countries & Capitals
CountryCapital CountryCapital
ArgentinaBuenos Aires GuyanaGeorgetown
BoliviaSucre (official) ParaguayAsunción
La Paz (administrative)
BrazilBrasília PeruLima
ChileSantiago SurinamParamaribo
Colombia Bogotá UruguayMontevideo
EcuadorQuito VenezuelaCaracas
French GuianaCayenne

Note:  The HEIGHT="47" parameter, used in the source code for the first cells of most rows, was found by trial and error in an attempt to make the vertical heights of all the cells in those rows to appear equal to the heights of the non-split cells in row #2.  On some browsers, they may not appear equal.

Note:  The NOWRAP attribute, used in two of the cells, causes the columns containing those cells to be “stretched” beyond their 100-pixel allotment.  For all the columns to be the same width, trial and error must be used to find a new width for each column and then the total width of the new table.

The new table’s source code, with adjusted table and column widths:

<CENTER><TABLE BORDER="5" BORDERCOLOR="#808080" CELLSPACING="1" WIDTH="645">
<CAPTION><FONT FACE="ARIAL" SIZE="5">South American Countries & Capitals</FONT></CAPTION>
<TH WIDTH="160">Country</TH><TH WIDTH="160">Capital</TH>
<TH WIDTH="5"></TH>
<TH WIDTH="160">Country</TH><TH WIDTH="160">Capital</TH>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Argentina</TD><TD>Buenos Aires</TD>
<TD></TD>
<TD>Guyana</TD><TD>Georgetown</TD>
</TR>
<TR ALIGN="CENTER"> <TD ROWSPAN="2">Bolivia</TD><TD>Sucre (official)</TD>
<TD ROWSPAN="2"></TD>
<TD ROWSPAN="2">Paraguay</TD><TD ROWSPAN="2">Asunción</TD>
</TR>
<TR ALIGN="CENTER"> <TD NOWRAP>La Paz (administrative)</TD> </TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Brazil</TD><TD>Brasília</TD>
<TD></TD>
<TD>Peru</TD><TD>Lima</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Chile</TD><TD>Santiago</TD>
<TD></TD>
<TD>Surinam</TD><TD>Paramaribo</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Colombia</TD><TD>Bogotá</TD>
<TD></TD>
<TD>Uruguay</TD><TD>Montevideo</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">Ecuador</TD><TD>Quito</TD>
<TD></TD>
<TD>Venezuela</TD><TD>Caracas</TD>
</TR>
<TR ALIGN="CENTER"> <TD HEIGHT="47">French Guiana</TD><TD>Cayenne</TD> </TR>
</TABLE>
</CENTER>
would mark up more symmetrically like this:

South American Countries & Capitals
CountryCapital CountryCapital
ArgentinaBuenos Aires GuyanaGeorgetown
BoliviaSucre (official) ParaguayAsunción
La Paz (administrative)
BrazilBrasília PeruLima
ChileSantiago SurinamParamaribo
Colombia Bogotá UruguayMontevideo
EcuadorQuito VenezuelaCaracas
French GuianaCayenne
Note: The browser considers the row containing the cells with “Bolivia,” “Sucre (official),” “Paraguay,” and “Asunción” as the second row of the table.  It considers the row containing the single cell with “La Paz (administrative)” as the third row of the table.


Example #5

You may recall the example of the directory list of hyperlinks (called “Table of Contents”) in the List Tags section.  Take this link, directory list, to return there briefly, review the hyperlink list, and then take the “example section of Tables” link there (below the marked-up directory list) to return back here again.

Since a table of contents is tiered, portions of the words in each row extend into the columns of words in other rows.  To demonstrate how the COLSPAN parameter is used for overlapping columns, this table:

<TABLE BORDER WIDTH="200">
<CAPTION><FONT SIZE="5">Table of Contents</FONT></CAPTION>
<TR> <TD ALIGN="CENTER" WIDTH="14%">(1)</TD>
<TD ALIGN="CENTER" WIDTH="14%">(2)</TD>
<TD ALIGN="CENTER" WIDTH="14%">(3)</TD>
<TD ALIGN="CENTER" WIDTH="44%">(4)</TD>
<TD ALIGN="CENTER" WIDTH="14%">(5)</TD>
</TR>
<TR> <TD></TD>
<TD COLSPAN="3"><FONT SIZE="4"><A HREF="P-I">Part I</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-I_C-1">Chapter 1</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-1_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-1_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-I_C-2">Chapter 2</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-2_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-2_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD></TD>
<TD COLSPAN="3"><FONT SIZE="4"><A HREF="P-II">Part II</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-II_C-3">Chapter 3</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-3_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-3_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-II_C-4">Chapter 4</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-4_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-4_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
</TABLE>
Note:  Most word processors and HTML editors have a “search and replace” feature, whereby multiple identical changes can be made quickly.  In the above source code, so as to include the font size commands in each cell, the following could be done:  1) search for “<TD>” and replace with “<TD><FONT SIZE="4">,” and then 2) search for “</TD>” and replace with “</FONT></TD>.”
would be marked up this way:
Table of Contents
(1) (2) (3) (4) (5)
Part I
Chapter 1
Section A
Section B
Chapter 2
Section A
Section B
Part II
Chapter 3
Section A
Section B
Chapter 4
Section A
Section B
Observe that the cells with the “Part” items span columns 2 through 4, the cells with the “Chapter” items span columns 3 and 4, and the cells with the “Section” items are contained wholly within column 4.
Note:  A border has been added to the table and to the cells containing data within it to see more easily the number of columns spanned by each data cell.  A top row of cells has been included (which temporarily contains the column numbers 1–5), the height of which can be adjusted to create the desired space between the caption (title) and the first item in the table.  Also, beginning and ending empty columns (1 & 5) have been included, the widths of which can be adjusted to center horizontally, more exactly, the information in the table beneath the title.

The new source code table, without borders and with adjusted top row height and right/left column widths:

<TABLE WIDTH="200">
<CAPTION><FONT SIZE="5">Table of Contents</FONT></CAPTION>
<TR> <TD HEIGHT="3" WIDTH="16%"></TD>
<TD WIDTH="14%"></TD>
<TD WIDTH="14%"></TD>
<TD WIDTH="44%"></TD>
<TD WIDTH="12%"></TD>
</TR>
<TR> <TD></TD>
<TD COLSPAN="3"><FONT SIZE="4"><A HREF="P-I">Part I</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-I_C-1">Chapter 1</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-1_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-1_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-I_C-2">Chapter 2</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-2_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-I_C-2_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD></TD>
<TD COLSPAN="3"><FONT SIZE="4"><A HREF="P-II">Part II</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-II_C-3">Chapter 3</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-3_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-3_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="2"></TD>
<TD COLSPAN="2"><FONT SIZE="4"><A HREF="P-II_C-4">Chapter 4</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-4_S-A">Section A</A></FONT></TD>
<TD></TD>
</TR>
<TR> <TD COLSPAN="3"></TD>
<TD><FONT SIZE="4"><A HREF="P-II_C-4_S-B">Section B</A></FONT></TD>
<TD></TD>
</TR>
</TABLE>
would be marked up this way:
Table of Contents
Part I
Chapter 1
Section A
Section B
Chapter 2
Section A
Section B
Part II
Chapter 3
Section A
Section B
Chapter 4
Section A
Section B
Note:  The above hyperlinks are not active; they are for demonstration only.  How to create hyperlinks is shown in the section on Hyperlinks.


Example #6

You may remember the example of the preformatted table (titled “NUMBERS 1-5 in VARIOUS LANGUAGES”) in the Text Modification Characters & Tags section.  Take this link, preformatted table, to return there briefly, make a mental note of how the items in the marked up table are neither bold nor well-centered, and then take the “example section of Tables” link there (below the marked-up table) to return back here again.

Admittedly, using preformatting tags (<PRE> & </PRE>) is a quick and easy way to produce a table, especially one without borders.  However, next it will be shown how the table without borders can become more attractive simply by making the elements bolder and better centered.  After that, it will be demonstrated how adding borders, colors, and other attributes can enhance the appearance of the table even more. 

By using table commands in the HTML source code document:

<TABLE WIDTH="500">
<CAPTION><FONT SIZE="4"><B>NUMBERS 1-5 in VARIOUS LANGUAGES</B></FONT></CAPTION>
<TH WIDTH="5%"></TH>
<TH WIDTH="19%"><FONT SIZE="4">English</FONT></TH>
<TH WIDTH="19%"><FONT SIZE="4">Español</FONT></TH>
<TH WIDTH="19%"><FONT SIZE="4">Français</FONT></TH>
<TH WIDTH="19%"><FONT SIZE="4">Italiano</FONT></TH>
<TH WIDTH="19%"><FONT SIZE="4">Deutsch</FONT></TH>
<TR ALIGN="CENTER"> <TD><FONT SIZE="4">1</FONT></TD>
<TD><FONT SIZE="4">one</FONT></TD>
<TD><FONT SIZE="4">uno</FONT></TD>
<TD><FONT SIZE="4">un</FONT></TD>
<TD><FONT SIZE="4">uno</FONT></TD>
<TD><FONT SIZE="4">eins</FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT SIZE="4">2</FONT></TD>
<TD><FONT SIZE="4">two</FONT></TD>
<TD><FONT SIZE="4">dos</FONT></TD>
<TD><FONT SIZE="4">deux</FONT></TD>
<TD><FONT SIZE="4">due</FONT></TD>
<TD><FONT SIZE="4">zwei</FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT SIZE="4">3</FONT></TD>
<TD><FONT SIZE="4">three</FONT></TD>
<TD><FONT SIZE="4">tres</FONT></TD>
<TD><FONT SIZE="4">trois</FONT></TD>
<TD><FONT SIZE="4">tre</FONT></TD>
<TD><FONT SIZE="4">drei</FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT SIZE="4">4</FONT></TD>
<TD><FONT SIZE="4">four</FONT></TD>
<TD><FONT SIZE="4">cuatro</FONT></TD>
<TD><FONT SIZE="4">quatre</FONT></TD>
<TD><FONT SIZE="4">quattro</FONT></TD>
<TD><FONT SIZE="4">vier</FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD><FONT SIZE="4">5</FONT></TD>
<TD><FONT SIZE="4">five</FONT></TD>
<TD><FONT SIZE="4">cinco</FONT></TD>
<TD><FONT SIZE="4">cinq</FONT></TD>
<TD><FONT SIZE="4">cinque</FONT></TD>
<TD><FONT SIZE="4">fünf</FONT></TD>
</TR>
</TABLE>
the aforementioned table marks up to this more appealing form:
NUMBERS 1-5 in VARIOUS LANGUAGES
English Español Français Italiano Deutsch
1 one uno un uno eins
2 two dos deux due zwei
3 three tres trois tre drei
4 four cuatro quatre quattro vier
5 five cinco cinq cinque fünf
Next, borders, colors, and other attributes will be added to the table and its contents to enhance its appearance even more.  All of these commands:
<TABLE BORDER="3" BORDERCOLOR="#C000C0" BGCOLOR="#FFDDFF" WIDTH="500" CELLSPACING="1" CELLPADDING="3">
<CAPTION><FONT COLOR="#D000D0" SIZE="4"><B>NUMBERS 1-5 in VARIOUS LANGUAGES</B></FONT></CAPTION>
<TH WIDTH="5%"></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"><U>English</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Español</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Français</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Italiano</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Deutsch</U></FONT></TH>
<TR ALIGN="CENTER"> <TD BGCOLOR="#00FFFF"><FONT SIZE="4">1</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>one</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>uno</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>un</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>uno</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>eins</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD BGCOLOR="#00FFFF"><FONT SIZE="4">2</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>two</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>dos</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>deux</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>due</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>zwei</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD BGCOLOR="#00FFFF"><FONT SIZE="4">3</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>three</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>tres</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>trois</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>tre</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>drei</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD BGCOLOR="#00FFFF"><FONT SIZE="4">4</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>four</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>cuatro</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>quatre</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>quattro</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>vier</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER"> <TD BGCOLOR="#00FFFF"><FONT SIZE="4">5</FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>five</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>cinco</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>cinq</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>cinque</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>fünf</B></I></FONT></TD>
</TR>
</TABLE>
will result in this embellished table on a browser:
NUMBERS 1-5 in VARIOUS LANGUAGES
English Español Français Italiano Deutsch
1 one uno un uno eins
2 two dos deux due zwei
3 three tres trois tre drei
4 four cuatro quatre quattro vier
5 five cinco cinq cinque fünf


Example #7

As noted in the description of <TABLE> & </TABLE>, tables may be nested within one another.  This can be useful, for instance, in making a drab photograph more interesting by placing an attractive, multi-layered “picture frame” around it.  This source code, which places a three-tiered frame around a picture:

<CENTER>
<TABLE BORDER="12" BORDERCOLOR="#755639" BGCOLOR="#000000">
<TR> <TD> <TABLE BORDER="4" BORDERCOLOR="#97A4AD">
<TR> <TD> <TABLE BORDER="8" BORDERCOLOR="#B58861">
<TR> <TD>
<IMG SRC="graphics/windmill.jpg" WIDTH="267" HEIGHT="154" ALT="Windmill and Water Tank near Española, NM"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
Note:  The </TD> tag after the <IMG SRC="graphics/windmill.jpg"...> tag should not be placed on the next line down.  Doing so will cause unwanted extra space between the bottom of the picture and picture frame (because a browser will interpret the line return after the <IMG SRC="graphics/windmill.jpg"...> tag as a space).

Note:  Using the Color Machine alongside the photograph can aid in selecting suitable colors for the picture frame strips.
would appear this way on a browser:

Windmill and Water Tank near Española, NM

By changing the background color of the outermost table from black (BGCOLOR="#000000") to neutral gray (BGCOLOR="#808080"):
<CENTER>
<TABLE BORDER="12" BORDERCOLOR="#755639" BGCOLOR="#808080">
<TR> <TD> <TABLE BORDER="4" BORDERCOLOR="#97A4AD">
<TR> <TD> <TABLE BORDER="8" BORDERCOLOR="#B58861">
<TR> <TD>
<IMG SRC="graphics/windmill.jpg" WIDTH="267" HEIGHT="154" ALT="Windmill and Water Tank near Española, NM"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
the appearance of the picture frame is “softened” a bit:

Windmill and Water Tank near Española, NM

Alternately, to eliminate the thin lines around the interiors of the frame strips (where the outer table’s background color shows through), the following source code could be written:
<CENTER>
<TABLE BORDER="12" BORDERCOLOR="#755639" CELLSPACING="0" CELLPADDING="4" BGCOLOR="#97A4AD">
<TR> <TD> <TABLE CELLSPACING="0" CELLPADDING="8" BGCOLOR="#B58861">
<TR> <TD>
<IMG SRC="graphics/windmill.jpg" WIDTH="267" HEIGHT="154" ALT="Windmill and Water Tank near Española, NM"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
Note:  In this case, only 2 tables rather than 3 are required (because the BGCOLOR—background color—of the exterior table is the color of the middle strip of the picture frame, and the BGCOLOR of the interior table is the color of the innermost strip of the frame).

Note:  As before, the </TD> tag after the <IMG SRC="graphics/windmill.jpg"...> tag should not be placed on the next line down.  Doing so will cause the bottom edge of the innermost strip of the picture frame to be thicker than the other edges of that strip (because a browser will interpret the line return after the <IMG SRC="graphics/windmill.jpg"...> tag as a space).

Note:  Eliminating any cellspacings (that is, making CELLSPACING="0") for both tables tends to decrease the impression of depth within the picture frame.
and would look like this when marked up:

Windmill and Water Tank near Española, NM


Example #8

Another instance where the process of nesting tables is helpful is when information is presented in groups which are similar in some way but different enough to be placed in separate tables.  The following source code of an initial “skeleton” of a table containing three tables, each containing three cells inside of which are even smaller tables:

<CENTER><TABLE BORDER CELLSPACING="5">
<TR> <TD HEIGHT="80">
</TD>
</TR>
<TR> <TD> <TABLE BORDER CELLSPACING="5"> <TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
</TR>
<TR> <TD> <TABLE BORDER CELLSPACING="5"> <TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
</TR>
<TR> <TD> <TABLE BORDER CELLSPACING="5"> <TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD> <TABLE BORDER WIDTH="100%" CELLSPACING="8">
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR> <TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
would be marked up this way:

       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       

This is the foundation for a table in which there are 3 rows which are tables, each of which has 3 cells containing even smaller tables.  At the top of the overall table, an empty space (a one-celled row) has been provided to place text that describes the contents of the groups of tables below it.  (The height parameter for the top cell will not be necessary in the completed table below.)

Next, into this table framework will be placed three identical sets of colors (shades of red/green, shades of red/blue, and shades of green/blue) onto three different backgrounds (black, gray, and white):

<CENTER><TABLE CELLSPACING="5" WIDTH="500" BGCOLOR="#C0C080">
<TR> <TD><B><FONT COLOR="#600000" SIZE="3"><P ALIGN="JUSTIFY">In each (black, gray, or white) row below are 3 groups of colors.&nbsp; The colors in each <I>left</I> group are combinations of only <FONT COLOR="RED">red</FONT> and <FONT COLOR="GREEN">green</FONT> light; the colors in each <I>middle</I> group are combinations of only <FONT COLOR="RED">red</FONT> and <FONT COLOR="BLUE">blue</FONT> light; and the colors in each <I>right</I> group are combinations of only <FONT COLOR="GREEN">green</FONT> and <FONT COLOR="BLUE">blue</FONT> light.&nbsp; If you would like to see a more complete categorized color chart with any of these three backgrounds, click on the letter (B = Black, G = Gray, or W = White) in the top/left square of any of the three rows.</P></FONT></B></TD> </TR>
<TR> <TD> <TABLE BGCOLOR="#000000" WIDTH="100%" CELLSPACING="5"> <TD WIDTH="33%"> <TABLE BGCOLOR="#000000" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#202000" WIDTH="25%" ALIGN="CENTER"><FONT SIZE="3"><A HREF="clrctgBL.html"><B>B</B></A></FONT></TD>
<TD BGCOLOR="#404000" WIDTH="25%">&nbsp;</TD>
<TD BGCOLOR="#606000" WIDTH="25%">&nbsp;</TD>
<TD BGCOLOR="#808000" WIDTH="25%">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#A0A000">&nbsp;</TD>
<TD BGCOLOR="#C0C000">&nbsp;</TD>
<TD BGCOLOR="#E0E000">&nbsp;</TD>
<TD BGCOLOR="#FFFF00">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="33%"> <TABLE BGCOLOR="#000000" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#200020">&nbsp;</TD>
<TD BGCOLOR="#400040">&nbsp;</TD>
<TD BGCOLOR="#600060">&nbsp;</TD>
<TD BGCOLOR="#800080">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#A000A0">&nbsp;</TD>
<TD BGCOLOR="#C000C0">&nbsp;</TD>
<TD BGCOLOR="#E000E0">&nbsp;</TD>
<TD BGCOLOR="#FF00FF">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="33%"> <TABLE BGCOLOR="#000000" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#002020">&nbsp;</TD>
<TD BGCOLOR="#004040">&nbsp;</TD>
<TD BGCOLOR="#006060">&nbsp;</TD>
<TD BGCOLOR="#008080">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#00A0A0">&nbsp;</TD>
<TD BGCOLOR="#00C0C0">&nbsp;</TD>
<TD BGCOLOR="#00E0E0">&nbsp;</TD>
<TD BGCOLOR="#00FFFF">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
</TR>
<TR> <TD> <TABLE BGCOLOR="#808080" WIDTH="100%" CELLSPACING="5"> <TD WIDTH="33%"> <TABLE BGCOLOR="#808080" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#202000" WIDTH="25%" ALIGN="CENTER"> <FONT SIZE="3"><A HREF="clrctgGR.html"><B>G</B></A></FONT></TD>
<TD BGCOLOR="#404000" WIDTH="25%">&nbsp;</TD>
<TD BGCOLOR="#606000" WIDTH="25%">&nbsp;</TD>
<TD BGCOLOR="#808000" WIDTH="25%">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#A0A000">&nbsp;</TD>
<TD BGCOLOR="#C0C000">&nbsp;</TD>
<TD BGCOLOR="#E0E000">&nbsp;</TD>
<TD BGCOLOR="#FFFF00">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="33%"> <TABLE BGCOLOR="#808080" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#200020">&nbsp;</TD>
<TD BGCOLOR="#400040">&nbsp;</TD>
<TD BGCOLOR="#600060">&nbsp;</TD>
<TD BGCOLOR="#800080">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#A000A0">&nbsp;</TD>
<TD BGCOLOR="#C000C0">&nbsp;</TD>
<TD BGCOLOR="#E000E0">&nbsp;</TD>
<TD BGCOLOR="#FF00FF">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="33%"> <TABLE BGCOLOR="#808080" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#002020">&nbsp;</TD>
<TD BGCOLOR="#004040">&nbsp;</TD>
<TD BGCOLOR="#006060">&nbsp;</TD>
<TD BGCOLOR="#008080">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#00A0A0">&nbsp;</TD>
<TD BGCOLOR="#00C0C0">&nbsp;</TD>
<TD BGCOLOR="#00E0E0">&nbsp;</TD>
<TD BGCOLOR="#00FFFF">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
</TR>
<TR> <TD> <TABLE BGCOLOR="#FFFFFF" WIDTH="100%" CELLSPACING="5"> <TD WIDTH="33%"> <TABLE BGCOLOR="#FFFFFF" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#202000" WIDTH="25%" ALIGN="CENTER"><FONT SIZE="3"><A HREF="clrctgWH.html"><B>W</B></A></FONT></TD>
<TD BGCOLOR="#404000" WIDTH="25%">&nbsp;</TD>
<TD BGCOLOR="#606000" WIDTH="25%">&nbsp;</TD>
<TD BGCOLOR="#808000" WIDTH="25%">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#A0A000">&nbsp;</TD>
<TD BGCOLOR="#C0C000">&nbsp;</TD>
<TD BGCOLOR="#E0E000">&nbsp;</TD>
<TD BGCOLOR="#FFFF00">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="33%"> <TABLE BGCOLOR="#FFFFFF" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#200020">&nbsp;</TD>
<TD BGCOLOR="#400040">&nbsp;</TD>
<TD BGCOLOR="#600060">&nbsp;</TD>
<TD BGCOLOR="#800080">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#A000A0">&nbsp;</TD>
<TD BGCOLOR="#C000C0">&nbsp;</TD>
<TD BGCOLOR="#E000E0">&nbsp;</TD>
<TD BGCOLOR="#FF00FF">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="33%"> <TABLE BGCOLOR="#FFFFFF" WIDTH="100%" CELLSPACING="4" CELLPADDING="6">
<TR> <TD BGCOLOR="#002020">&nbsp;</TD>
<TD BGCOLOR="#004040">&nbsp;</TD>
<TD BGCOLOR="#006060">&nbsp;</TD>
<TD BGCOLOR="#008080">&nbsp;</TD>
</TR>
<TR> <TD BGCOLOR="#00A0A0">&nbsp;</TD>
<TD BGCOLOR="#00C0C0">&nbsp;</TD>
<TD BGCOLOR="#00E0E0">&nbsp;</TD>
<TD BGCOLOR="#00FFFF">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
Note:  the WIDTH="25%" parameter was placed in the <TD> tags of the first four cells of each row to make all these cells be the same width; otherwise, the letters (B, G, and W) in the upper left cell of each row would have caused those three cells to be wider than the rest of the cells in their respective rows.  Nevertheless, some browsers will not display all these cells with equal widths.

Note:  the WIDTH="33%" parameter was placed in the <TD> tags of the three cells in each row containing tables with similar groups of colors to make all these cells be the same width.  Nevertheless, some browsers will not display all these cells with equal widths.
and, with no borders present, would be marked up on a browser like this:

In each (black, gray, and white) row below is 3 groups of colors.  The colors in each left group are combinations of only red and green light; the colors in each middle group are combinations of only red and blue light; and the colors in each right group are combinations of only green and blue light.  If you would like to see a more complete categorized color chart with any of these three backgrounds, click on the letter (B = Black, G = Gray, or W = White) in the top/left square of any of the three rows.

B      
       
       
       
       
       
G      
       
       
       
       
       
W      
       
       
       
       
       

Proceed to Forms

Return to Tables

Return to Main Page of Ted’s HTML Tutorial

Copyright © 1998– by Ted M. Montgomery.  All rights reserved.