Advanced Search

Price table markup

/ Published in: HTML
Save to your folder(s)
Price table sample markup

UPDATE 1: with CSS styles

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  4.   <head>
  5.     <title>price table</title>
  6.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  7.     <style type="text/css">
  8.       body { font-family: Arial, Helvetica, sans-serif; background: #cecece; font-size: 10pt; }
  9.       table.price { border-collapse: collapse; width: 637px; margin: 0 auto; }
  10.       table.price th, table.price td { padding: 2px; }
  11.       table.price thead th { text-align: left; }
  12.       table.price td { border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; }
  13.       table.price tbody th { border-top: 1px solid #ffffff; }
  14.       table.price td a { position: relative; }
  15.       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; }
  16.       table.price td a:hover { text-decoration: none; }
  17.       table.price td a:hover dfn { display: block; }
  18.       table.price td a dfn img { border: none; }
  19.       table.price td a dfn strong { font-weight: bold; }
  20.       table.price tr.odd td { background: #a2a2a2; }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <!--
  25.       img small: 165x83
  26.       img big: 264x133
  27.     -->
  28.     <table class="price" width="100%" cellspacing="0" cellpadding="0" border="0">
  29.       <colgroup>
  30.         <col width="169" />
  31.         <col width="140" />
  32.         <col width="*" />
  33.         <col width="*" />
  34.         <col width="*" />
  35.         <col width="*" />
  36.         <col width="*" />
  37.       </colgroup>
  38.       <thead>
  39.         <tr>
  40.           <th><!-- --></th>
  41.           <th><!-- --></th>
  42.           <th>01.04.2009 - 01.05.2009</th>
  43.           <th>01.05.2009 - 01.08.2009</th>
  44.           <th>01.08.2009 - 01.10.2009</th>
  45.           <th>01.11.2009 - 01.01.2010</th>
  46.         </tr>
  47.       </thead>
  48.       <tbody>
  49.         <tr class="even">
  50.           <th><img src="img/sample-room01-small.jpg" width="165" height="83" alt="Doppelzimmer TYP Beispiel 1" /></th>
  51.           <td>
  52.             Doppelzimmer:<br />
  53.             <strong>
  54.               <a href="#">
  55.                 TYP Beispiel 1
  56.                 <dfn>
  57.                   <img src="img/sample-room01-big.jpg" width="264" height="133" border="0" alt="Doppelzimmer TYP Beispiel 1" />
  58.                   <strong>TYP Beispiel 1</strong><br />
  59.                   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.
  60.                 </dfn>
  61.               </a>
  62.             </strong>
  63.           </td>
  64.           <td>€ 10,00</td>
  65.           <td>€ 110,00</td>
  66.           <td>€ 83,00</td>
  67.           <td>€ 12,00</td>
  68.         </tr>
  69.         <tr class="odd">
  70.           <th><img src="img/sample-room02-small.jpg" width="165" height="83" alt="[ZIMMERTYP] [ZIMMERNAME]" /></th>
  71.           <td>
  72.             Einzelzimmer:<br />
  73.             <strong>
  74.               <a href="#">
  75.                 TYP Beispiel 2
  76.                 <dfn>
  77.                   <img src="img/sample-room02-big.jpg" width="264" height="133" border="0" alt="Einzelzimmer TYP Beispiel 2" />
  78.                   <strong>TYP Beispiel 2</strong><br />
  79.                   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.
  80.                 </dfn>
  81.               </a>
  82.             </strong>
  83.           </td>
  84.           <td>€ 130,00</td>
  85.           <td>€ 20,00</td>
  86.           <td>€ 10,00</td>
  87.           <td>€ 15,00</td>
  88.         </tr>
  89.         <tr class="even">
  90.           <th><img src="img/sample-room01-small.jpg" width="165" height="83" alt="Doppelzimmer TYP Beispiel 1" /></th>
  91.           <td>
  92.             Doppelzimmer:<br />
  93.             <strong>
  94.               <a href="#">
  95.                 TYP Beispiel 1
  96.                 <dfn>
  97.                   <img src="img/sample-room01-big.jpg" width="264" height="133" border="0" alt="Doppelzimmer TYP Beispiel 1" />
  98.                   <strong>TYP Beispiel 1</strong><br />
  99.                   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.
  100.                 </dfn>
  101.               </a>
  102.             </strong>
  103.           </td>
  104.           <td>€ 10,00</td>
  105.           <td>€ 110,00</td>
  106.           <td>€ 83,00</td>
  107.           <td>€ 12,00</td>
  108.         </tr>
  109.         <tr class="odd">
  110.           <th><img src="img/sample-room02-small.jpg" width="165" height="83" alt="[ZIMMERTYP] [ZIMMERNAME]" /></th>
  111.           <td>
  112.             Einzelzimmer:<br />
  113.             <strong>
  114.               <a href="#">
  115.                 TYP Beispiel 2
  116.                 <dfn>
  117.                   <img src="img/sample-room02-big.jpg" width="264" height="133" border="0" alt="Einzelzimmer TYP Beispiel 2" />
  118.                   <strong>TYP Beispiel 2</strong><br />
  119.                   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.
  120.                 </dfn>
  121.               </a>
  122.             </strong>
  123.           </td>
  124.           <td>€ 130,00</td>
  125.           <td>€ 20,00</td>
  126.           <td>€ 10,00</td>
  127.           <td>€ 15,00</td>
  128.         </tr>
  129.       </tbody>
  130.     </table>
  131.   </body>
  132. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.