advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

zensir on 08/16/06


Tagged

css table


Versions (?)


Who likes this?

15 people have marked this snippet as a favorite

jonhenshaw
samuraicoder
trickychicken
clifton
mdavie
theMacpenguin
mountchuck
icarus
jeffld
mblarsen
Phoenix
fael
vali29
gAmUssA
snucko


Table with style, CSS

Published in: CSS 

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

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


Plain TextExpand 
  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>

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: ezhanghao on August 18, 2006

It is different view in IE and Firefox.

You need to login to post a comment.