mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-14 03:30:17 +01:00
336 lines
8.9 KiB
HTML
336 lines
8.9 KiB
HTML
<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(bg.jpg); }
|
|
</STYLE>
|
|
<meta name="crc" content=250397440>
|
|
</HEAD>
|
|
<BODY>
|
|
|
|
<H1>
|
|
Example 4: Some simple tables.</H1>
|
|
|
|
<TABLE BORDER >
|
|
<TR>
|
|
<TH BACKGROUND="rock_gra.gif">Color </TH>
|
|
|
|
<TH BACKGROUND="rock_gra.gif">Meaning </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>
|
|
|
|
<TABLE BORDER WIDTH="100%" >
|
|
<CAPTION>Table 1 has this caption at the top. 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>
|
|
|
|
<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>
|
|
|
|
<TABLE BORDER COLS=3 >
|
|
<CAPTION>Table 3 is the same as Table 2, but with equal column widths. </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>
|
|
|
|
<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>
|