Table with style, CSS


/ Published in: CSS
Save to your folder(s)

Table with style as in;
http://24ways.org/examples/tables-with-style/table_columns.html


Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>The Very Best Eggnog</title>
  6. <style type="text/css">
  7. body
  8. {
  9. font: .8em "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
  10. }
  11.  
  12. ol
  13. {
  14. margin:0;
  15. padding: 0 1.5em;
  16. }
  17.  
  18. table
  19. {
  20. color:#FFF;
  21. background:#C00;
  22. border-collapse:collapse;
  23. width:647px;
  24. border:5px solid #900;
  25. }
  26.  
  27. thead
  28. {
  29.  
  30. }
  31.  
  32. thead th
  33. {
  34. padding:1em 1em .5em;
  35. border-bottom:1px dotted #FFF;
  36. font-size:120%;
  37. text-align:left;
  38. }
  39.  
  40.  
  41.  
  42. thead tr
  43. {
  44.  
  45. }
  46.  
  47. td
  48. {
  49. padding:.5em 1em;
  50. }
  51.  
  52.  
  53.  
  54. tbody tr.odd td
  55. {
  56. background:transparent url(tr_bg.png) repeat top left;
  57. }
  58.  
  59. tfoot
  60. {
  61.  
  62. }
  63.  
  64. tfoot td
  65. {
  66.  
  67. padding-bottom:1.5em;
  68. }
  69.  
  70. tfoot tr
  71. {
  72.  
  73. }
  74.  
  75.  
  76. * html tr.odd td
  77. {
  78. background:#C00;
  79. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tr_bg.png', sizingMethod='scale');
  80. }
  81.  
  82.  
  83. #middle
  84. {
  85. background-color:#900;
  86. }
  87.  
  88.  
  89.  
  90. </style>
  91. </head>
  92. <body>
  93. <h1>The Very Best Eggnog</h1>
  94. <table>
  95. <col>
  96. <col id="middle">
  97. <col>
  98. <thead>
  99.  
  100. <tr><th>Ingredients</th><th>serves 12</th><th>serves 24</th></tr>
  101. </thead>
  102. <tfoot>
  103. <tr><td colspan="3"><ol>
  104. <li>Combine milk and spices including vanilla bean in a heavy saucepan and let them infuse over lowest possible heat for 5 minutes. Meanwhile, combine yolks and sugar in a large bowl and whisk until mixed.</li>
  105. <li>Bring milk to a boil and gradually whisk it into the yolk mixture. Return the mixture to the saucepan. Cook over medium heat, stirring steadily with a wooden spoon, for 2 to 3 minutes, or until foam subsides and mixture thickens to consistency of heavy cream. (Mixture should thickly coat the back of a wooden spoon.) Do not boil, or mixture will curdle.</li>
  106. <li>Strain mixture into a large bowl and let cool to room temperature. Stir in rum, brandy, half-and-half, vanilla and nutmeg.</li>
  107.  
  108. <li>Refrigerate eggnog for at least 2 hours, preferably overnight. Just before serving, dust top of eggnog with additional nutmeg.</li>
  109. </ol></td></tr>
  110. </tfoot>
  111. <tbody>
  112. <tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
  113. <tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
  114.  
  115. <tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
  116. <tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
  117. <tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
  118. <tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
  119.  
  120. <tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
  121. <tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
  122. <tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
  123.  
  124. <tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
  125. <tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
  126. <tr class="odd"><td>Freshly grated nutmeg to taste</td><td></td><td></td></tr>
  127. </tbody>
  128. </table>
  129.  
  130.  
  131. </body>
  132. </html>

URL: http://24ways.org/examples/tables-with-style/table_columns.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.