<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.09 [en] (WinNT; U) [Netscape]">
   <TITLE>test4</TITLE>
<STYLE>
BODY { font-size: 12pt; background-image: url(../images/bg.jpg); }
</STYLE>
<meta name="crc" content=250397440>
</HEAD>
<BODY>

<H1>
Example 4: Some simple tables.</H1>

<TABLE BORDER >
<TR>
<TH BACKGROUND="../images/rock_gra.gif">Color&nbsp;</TH>

<TH BACKGROUND="../images/rock_gra.gif">Meaning&nbsp;</TH>
</TR>

<TR>
<TD BGCOLOR="#90EE90">lightgreen</TD>

<TD>Light green is used on cells that have a colspan</TD>
</TR>

<TR>
<TD BGCOLOR="#F0E68C">khaki</TD>

<TD>Khaki is used on cells that have a rowspan</TD>
</TR>

<TR>
<TD BGCOLOR="#D3D3D3">lightgrey</TD>

<TD>Light grey is used on cells that have a rowspan <B>and</B> a colspan</TD>
</TR>
</TABLE>
<br>
&nbsp;
<TABLE BORDER WIDTH="100%" >
<CAPTION>Table 1 has this caption at the top.&nbsp; It is defined to be 100%
of it's parent's width.</CAPTION>

<TR>
<TD COLSPAN="2" BGCOLOR="#90EE90">Cell</TD>

<TD>Stuff to test out table cell layout. This should be long enough.</TD>
</TR>

<TR>
<TD>Cell</TD>

<TD COLSPAN="2" BGCOLOR="#90EE90">Stuff to test out table cell layout.
This should be long enough.</TD>
</TR>

<TR>
<TD>Cell</TD>

<TD>Stuff to test out table cell layout. This should be long enough.</TD>

<TD>Cell</TD>
</TR>
</TABLE>
<br>
&nbsp;
<TABLE BORDER >
<CAPTION>Table 2 has auto-width (no width param specified.)</CAPTION>

<TR>
<TD>Cell</TD>

<TD COLSPAN="2" ROWSPAN="2" BGCOLOR="#D3D3D3">Stuff to test out table cell
layout. This should be long enough.</TD>
</TR>

<TR>
<TD>Cell</TD>
</TR>

<TR>
<TD>Cell</TD>

<TD>Stuff to test out table cell layout. This should be long enough.</TD>

<TD>more text</TD>
</TR>
</TABLE>
&nbsp;
<TABLE BORDER COLS=3 >
<CAPTION>Table 3 is the same as Table 2, but with equal column widths.&nbsp;</CAPTION>

<TR>
<TD>Cell</TD>

<TD COLSPAN="2" ROWSPAN="2" BGCOLOR="#D3D3D3">Stuff to test out table cell
layout. This should be long enough.</TD>
</TR>

<TR>
<TD>Cell</TD>
</TR>

<TR>
<TD>Cell</TD>

<TD>Stuff to test out table cell layout. This should be long enough.</TD>

<TD>more text</TD>
</TR>
</TABLE><br>
&nbsp;
<table cellpadding=2 style="border-collapse:collapse">
<CAPTION ALIGN=BOTTOM>Table 4 has this bottom caption. The table has specified
column widths and collapsing borders.</CAPTION>
<colgroup>
<col width=90 style="border-left: 2px solid black; border-right:2px dashed blue">
<col width=80 style="border-right:1px solid red">
<col width=80 style="border-right:2px solid black">
</colgroup>

<thead style="border-bottom: 6px solid black">
<tr style="border: 2px solid black;">
  <th style="border-right: hidden">Player</th>
  <th style="border-right: hidden">Ranking</th>
  <th>Record</th>
</tr>
</thead>

<tbody>
<tr style="border: 2px solid black">
  <td>Steve Clark</td>
  <td align=center>1</td>
  <td align=center>77-0</td>
</tr>
<tr style="border: 2px solid black">
  <td>Cliff Swain</td>
  <td align=center>2</td>
  <td align=center>67-10</td>
</tr>
<tr style="border: 2px solid black">
  <td>Marty Hogan</td>
  <td align=center>3</td>
  <td align=center>57-15</td>
</tr>
</tbody>
</TABLE>

<BR>
<table>
<CAPTION ALIGN=BOTTOM>Table 5 has a scrolling tbody.</CAPTION>
<thead>
<tr><td colspan=2 style="font-size: 8pt; font-weight: bold">HEADER
</thead>

<tbody style="overflow: auto; height: 200px; border: 1px solid black">
<tr><td>cell-00<td>cell-01<td>cell-02<td>cell-03</tr>
<tr><td>cell-10<td>cell-11<td>cell-12<td>cell-13</tr>
<tr><td>cell-20<td>cell-21<td>cell-22<td>cell-23</tr>
<tr><td>cell-30<td>cell-31<td>cell-32<td>cell-33</tr>
<tr><td>cell-40<td>cell-41<td>cell-42<td>cell-43</tr>
<tr><td>cell-50<td>cell-51<td>cell-52<td>cell-53</tr>
<tr><td>cell-60<td>cell-61<td>cell-62<td>cell-63</tr>
<tr><td>cell-70<td>cell-71<td>cell-72<td>cell-73</tr>
<tr><td>cell-80<td>cell-81<td>cell-82<td>cell-83</tr>
<tr><td>cell-90<td>cell-91<td>cell-92<td>cell-93</tr>
<tr><td>cell-a0<td>cell-a1<td>cell-a2<td>cell-a3</tr>
<tr><td>cell-b0<td>cell-b1<td>cell-b2<td>cell-b3</tr>
<tr><td>cell-c0<td>cell-c1<td>cell-c2<td>cell-c3</tr>
<tr><td>cell-d0<td>cell-d1<td>cell-d2<td>cell-d3</tr>
<tr><td>cell-e0<td>cell-e1<td>cell-e2<td>cell-e3</tr>
<tr><td>cell-f0<td>cell-f1<td>cell-f2<td>cell-f3</tr>
</tbody>

<tfoot>
<tr><td colspan=2 style="font-size: 8pt; font-weight: bold">FOOTER
</tfoot>

<CAPTION ALIGN=BOTTOM>Table 5 has a scrolling tbody.</CAPTION>
</table>

<BR>
This is a table formed from a list with display of table-row and
list items with display of table-cell.
<UL style="display: table-row; background-color:orange;">
<LI style="display: table-cell; background-color:orange;">ONE</LI>
<LI style="display: table-cell; background-color:orange;">TWO</LI>
<LI style="display: table-cell; background-color:orange;">THREE</LI>
<LI style="display: table-cell; background-color:orange;">FOUR</LI>
<LI style="display: table-cell; background-color:orange;">FIVE</LI>
</UL>
<BR>

This is a table formed from a list with display of table-row-group and
list items with display of table-cell. 
<BR>
<UL style="display:table-row-group;">
<LI style="display:table-cell;  background-color:orange;">ONE</LI>
<LI style="display:table-cell;  background-color:orange;">TWO</LI>
<LI style="display:table-cell;  background-color:orange;">THREE</LI>
<LI style="display:table-cell;  background-color:orange;">FOUR</LI>
<LI style="display:table-cell;  background-color:orange;">FIVE</LI>
<LI style="display:table-cell;  background-color:orange;">SIX</LI>
</UL>
<BR>

This is like the previous table plus the list's overflow property set
<UL style="display:table-row-group; overflow:auto; height: 50px;">
<LI style="display:table-cell;  background-color:orange;">ONE</LI>
<LI style="display:table-cell;  background-color:orange;">TWO</LI>
<LI style="display:table-cell;  background-color:orange;">THREE</LI>
<LI style="display:table-cell;  background-color:orange;">FOUR</LI>
<LI style="display:table-cell;  background-color:orange;">FIVE</LI>
<LI style="display:table-cell;  background-color:orange;">SIX</LI>
</UL>
<BR>
<P> The following table will have its rows and columns in red collapsed 
<BR>
<table border=1 style="background-color:orange;">
<caption><b>before</b></caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tr><td>C11<td style="background-color:red;">C12<td>C13 large
<tr style="background-color:red;"><td>C21<td>C22<td>C23
<tr><td>C31<td style="background-color:red;">C32<td>C33
</table>

<BR>
<table border=1 style="background-color:orange;">
<caption><b>after</b></caption>
<colgroup>
<col>
<col style="visibility:collapse;">
<col>
</colgroup>
<tr><td>C11<td>C12<td>C13 large
<tr style="visibility:collapse;"><td>C21<td>C22<td>C23
<tr><td>C31<td>C32<td>C33
</table>

<P> The following table will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.
<BR>
<table cellspacing=0 border=1 style="background-color:orange;">
<caption><b>before</b></caption>
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<tr><td>C11<td>C12<td>C13<td>C14
<tr><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
<tr><td>C31<td>C34
<tr><td>C41<td>C42<td>C43<td>C44
</table>

<table cellspacing=0 border=1 style="background-color:orange;">
<caption><b>after</b></caption>
<colgroup>
<col>
<col style="visibility:collapse;">
<col>
<col>
</colgroup>
<tr><td>C11<td>C12<td>C13<td>C14
<tr style="visibility:collapse;"><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
<tr><td>C31<td>C34
<tr><td>C41<td>C42<td>C43<td>C44
</table>

<P> The following table will have its 1st row group collapsed (rows 1 and 2)
<BR>
<table cellspacing=0 border=1 style="background-color:orange;">
<caption><b>before</b></caption>
<tbody style="background-color:red;">
<tr><td>C11<td>C12<td>C13<td>C14
<tr><td>C21<td>C22<td>C23<td>C24
</tbody>
<tbody>
<tr><td>C31<td>C32<td>C33<td>C34
<tr><td>C41<td>C42<td>C43<td>C44
</table>

<BR>
<table cellspacing=0 border=1 style="background-color:orange;">
<caption><b>after</b></caption>
<tbody style="visibility:collapse;">
<tr><td>C11<td>C12<td>C13<td>C14
<tr><td>C21<td>C22<td>C23<td>C24
</tbody>
<tbody>
<tr><td>C31<td>C32<td>C33<td>C34
<tr><td>C41<td>C42<td>C43<td>C44
</table>

<BR>
<P> The following table is similar to a previous table except that the direction is right-to-left. 
It will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.
<BR>
<table dir=rtl cellspacing=0 border=1 style="background-color:orange;">
<caption><b>before</b></caption>
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<tr><td>C11<td>C12<td>C13<td>C14
<tr><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
<tr><td>C31<td>C34
<tr><td>C41<td>C42<td>C43<td>C44
</table>

<table dir=rtl cellspacing=0 border=1 style="background-color:orange;">
<caption><b>after</b></caption>
<colgroup>
<col>
<col style="visibility:collapse;">
<col>
<col>
</colgroup>
<tr><td>C11<td>C12<td>C13<td>C14
<tr style="visibility:collapse;"><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
<tr><td>C31<td>C34
<tr><td>C41<td>C42<td>C43<td>C44
</table>

</BODY>
</HTML>