6ff27d1704
to arbitrary table related display types. git-svn-id: svn://10.0.0.236/trunk@19080 18797224-902f-48f8-a5cc-f745e15eee43
217 lines
4.8 KiB
HTML
217 lines
4.8 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; }
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
|
|
<H1>
|
|
Example 4: Some simple tables.</H1>
|
|
|
|
<TABLE BORDER >
|
|
<TR>
|
|
<TH BACKGROUND="bg.jpg">Color </TH>
|
|
|
|
<TH BACKGROUND="bg.jpg">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">
|
|
<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>
|
|
<CAPTION ALIGN=BOTTOM>Table 4 has this bottom caption. The table has specified
|
|
column widths and collapsing borders.</CAPTION>
|
|
</TABLE>
|
|
|
|
<BR>
|
|
<table>
|
|
|
|
<thead>
|
|
<tr><td colspan=2 style="font-size: 8pt; font-weight: bold">HEADER
|
|
</thead>
|
|
|
|
<tbody style="overflow: auto; height: 60px; border: 1px solid black;">
|
|
<tr><td>cell-00<td>cell-01
|
|
<tr><td>cell-10<td>cell-11
|
|
<tr><td>cell-20<td>cell-21
|
|
<tr><td>cell-30<td>cell-31
|
|
</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.
|
|
<DIV style="background-color: orange; width: 230px;">
|
|
<UL style="display: table-row;">
|
|
<LI style="display: table-cell;">ONE</LI>
|
|
<LI style="display: table-cell;">TWO</LI>
|
|
<LI style="display: table-cell;">THREE</LI>
|
|
<LI style="display: table-cell;">FOUR</LI>
|
|
<LI style="display: table-cell;">FIVE</LI>
|
|
</UL>
|
|
</DIV>
|
|
<BR>
|
|
|
|
This is a table formed from a list with display of table-row-group and
|
|
list items with display of table-cell.
|
|
<BR>
|
|
<DIV style="background-color: orange; width: 100px;">
|
|
<UL style="display:table-row-group">
|
|
<LI style="display:table-cell;">ONE</LI>
|
|
<LI style="display:table-cell;">TWO</LI>
|
|
<LI style="display:table-cell;">THREE</LI>
|
|
<LI style="display:table-cell;">FOUR</LI>
|
|
<LI style="display:table-cell;">FIVE</LI>
|
|
<LI style="display:table-cell;">SIX</LI>
|
|
</UL>
|
|
</DIV>
|
|
<BR>
|
|
|
|
This is like the previous table plus the list's overflow property set
|
|
<DIV style="background-color:orange; width:50px; height: 50px;">
|
|
<UL style="display:table-row-group; overflow:auto; height: 50px;">
|
|
<LI style="display:table-cell;">ONE</LI>
|
|
<LI style="display:table-cell;">TWO</LI>
|
|
<LI style="display:table-cell;">THREE</LI>
|
|
<LI style="display:table-cell;">FOUR</LI>
|
|
<LI style="display:table-cell;">FIVE</LI>
|
|
<LI style="display:table-cell;">SIX</LI>
|
|
</UL>
|
|
</DIV>
|
|
<BR>
|
|
|
|
</BODY>
|
|
</HTML>
|