Revision: 18859
Updated Code
at October 10, 2009 11:54 by dreadwarrior
Updated Code
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>price table</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; background: #cecece; font-size: 10pt; }
table.price { border-collapse: collapse; width: 637px; margin: 0 auto; }
table.price th, table.price td { padding: 2px; }
table.price thead th { text-align: left; }
table.price td { border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; }
table.price tbody th { border-top: 1px solid #ffffff; }
table.price td a { position: relative; }
table.price td a dfn { display: none; position: absolute; width: 264px; top: 2em; left: 5px; background: #ffffff; z-index: 10; font-style: normal; padding: 5px; border: 5px solid #000000; font-size: 0.8em; color: #000000; font-weight: normal; }
table.price td a:hover { text-decoration: none; }
table.price td a:hover dfn { display: block; }
table.price td a dfn img { border: none; }
table.price td a dfn strong { font-weight: bold; }
table.price tr.odd td { background: #a2a2a2; }
</style>
</head>
<body>
<!--
img small: 165x83
img big: 264x133
-->
<table class="price" width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col width="169" />
<col width="140" />
<col width="*" />
<col width="*" />
<col width="*" />
<col width="*" />
<col width="*" />
</colgroup>
<thead>
<tr>
<th><!-- --></th>
<th><!-- --></th>
<th>01.04.2009 - 01.05.2009</th>
<th>01.05.2009 - 01.08.2009</th>
<th>01.08.2009 - 01.10.2009</th>
<th>01.11.2009 - 01.01.2010</th>
</tr>
</thead>
<tbody>
<tr class="even">
<th><img src="img/sample-room01-small.jpg" width="165" height="83" alt="Doppelzimmer TYP Beispiel 1" /></th>
<td>
Doppelzimmer:<br />
<strong>
<a href="#">
TYP Beispiel 1
<dfn>
<img src="img/sample-room01-big.jpg" width="264" height="133" border="0" alt="Doppelzimmer TYP Beispiel 1" />
<strong>TYP Beispiel 1</strong><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dfn>
</a>
</strong>
</td>
<td>€ 10,00</td>
<td>€ 110,00</td>
<td>€ 83,00</td>
<td>€ 12,00</td>
</tr>
<tr class="odd">
<th><img src="img/sample-room02-small.jpg" width="165" height="83" alt="[ZIMMERTYP] [ZIMMERNAME]" /></th>
<td>
Einzelzimmer:<br />
<strong>
<a href="#">
TYP Beispiel 2
<dfn>
<img src="img/sample-room02-big.jpg" width="264" height="133" border="0" alt="Einzelzimmer TYP Beispiel 2" />
<strong>TYP Beispiel 2</strong><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dfn>
</a>
</strong>
</td>
<td>€ 130,00</td>
<td>€ 20,00</td>
<td>€ 10,00</td>
<td>€ 15,00</td>
</tr>
<tr class="even">
<th><img src="img/sample-room01-small.jpg" width="165" height="83" alt="Doppelzimmer TYP Beispiel 1" /></th>
<td>
Doppelzimmer:<br />
<strong>
<a href="#">
TYP Beispiel 1
<dfn>
<img src="img/sample-room01-big.jpg" width="264" height="133" border="0" alt="Doppelzimmer TYP Beispiel 1" />
<strong>TYP Beispiel 1</strong><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dfn>
</a>
</strong>
</td>
<td>€ 10,00</td>
<td>€ 110,00</td>
<td>€ 83,00</td>
<td>€ 12,00</td>
</tr>
<tr class="odd">
<th><img src="img/sample-room02-small.jpg" width="165" height="83" alt="[ZIMMERTYP] [ZIMMERNAME]" /></th>
<td>
Einzelzimmer:<br />
<strong>
<a href="#">
TYP Beispiel 2
<dfn>
<img src="img/sample-room02-big.jpg" width="264" height="133" border="0" alt="Einzelzimmer TYP Beispiel 2" />
<strong>TYP Beispiel 2</strong><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dfn>
</a>
</strong>
</td>
<td>€ 130,00</td>
<td>€ 20,00</td>
<td>€ 10,00</td>
<td>€ 15,00</td>
</tr>
</tbody>
</table>
</body>
</html>
Revision: 18858
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at October 10, 2009 11:12 by dreadwarrior
Initial Code
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th><!-- --></th>
<th><!-- --></th>
<th>dd.mm.yyyy - dd.mm.yyyy</th>
<th>dd.mm.yyyy - dd.mm.yyyy</th>
<th>dd.mm.yyyy - dd.mm.yyyy</th>
<th>dd.mm.yyyy - dd.mm.yyyy</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td><img src="..." width="" height="" alt="[ZIMMERTYP] [ZIMMERNAME]" /></td>
<td>
[ZIMMERTYP]:<br />
<strong>
<a href="#">
[ZIMMERNAME]
<dfn>
<img src="..." width="" height="" alt="[ZIMMERTYP] [ZIMMERNAME]" />
<strong>[ZIMMERNAME]</strong><br />
[ZIMMERBESCHREIBUNG]
</dfn>
</a>
</strong>
</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
</tr>
<tr class="odd">
<td><img src="..." width="" height="" alt="[ZIMMERTYP] [ZIMMERNAME]" /></td>
<td>
[ZIMMERTYP]:<br />
<strong>
<a href="#">
[ZIMMERNAME]
<dfn>
<img src="..." width="" height="" alt="[ZIMMERTYP] [ZIMMERNAME]" />
<strong>[ZIMMERNAME]</strong><br />
[ZIMMERBESCHREIBUNG]
</dfn>
</a>
</strong>
</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
</tr>
<tr class="even">
<td><img src="..." width="" height="" alt="[ZIMMERTYP] [ZIMMERNAME]" /></td>
<td>
[ZIMMERTYP]:<br />
<strong>
<a href="#">
[ZIMMERNAME]
<dfn>
<img src="..." width="" height="" alt="[ZIMMERTYP] [ZIMMERNAME]" />
<strong>[ZIMMERNAME]</strong><br />
[ZIMMERBESCHREIBUNG]
</dfn>
</a>
</strong>
</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
<td>€ XX,00</td>
</tr>
</tbody>
</table>
Initial URL
Initial Description
Price table sample markup UPDATE 1: with CSS styles
Initial Title
Price table markup
Initial Tags
table, html
Initial Language
HTML