advanced code snippet 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

fjm on 07/10/07


Tagged

css


Versions (?)


[CSS] Tableデザインサンプル

Published in: CSS 

URL: http://icant.co.uk/csstablegallery/

via http://icant.co.uk/csstablegallery/

Plain TextExpand 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>無題ドキュメント</title>
  6. <style>
  7. /* "Winter Blues" CSS theme for CSS Table Gallery (http://icant.co.uk/csstablegallery/) by Gunta Klavina (http://www.klavina.com) */
  8.  
  9. table {font: 85% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;padding: 0; margin: 0; border-collapse: collapse; color: #333; background: #F3F5F7;}
  10.  
  11. table a {color: #3A4856; text-decoration: none; border-bottom: 1px solid #C6C8CB;}  
  12.  
  13. table a:visited {color: #777;}
  14.  
  15. table a:hover {color: #000;}  
  16.  
  17. table caption {text-align: left; text-transform: uppercase;  padding-bottom: 10px; font: 200% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;}
  18.  
  19. table thead th {background: #3A4856; padding: 15px 10px; color: #fff; text-align: left; font-weight: normal;}
  20.  
  21. table tbody, table thead {border-left: 1px solid #EAECEE; border-right: 1px solid #EAECEE;}
  22.  
  23. table tbody {border-bottom: 1px solid #EAECEE;}
  24.  
  25. table tbody td, table tbody th {padding: 10px; background: url("td_back.gif") repeat-x; text-align: left;}
  26.  
  27. table tbody tr {background: #F3F5F7;}
  28.  
  29. table tbody tr.odd {background: #F0F2F4;}
  30.  
  31. table tbody  tr:hover {background: #EAECEE; color: #111;}
  32.  
  33. table tfoot td, table tfoot th, table tfoot tr {text-align: left; font: 120%  "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-transform: uppercase; background: #fff; padding: 10px;}
  34.  
  35. </style>
  36. </head>
  37. <body>
  38. <table summary="Submitted table designs">
  39.   <caption>
  40.   Table designs
  41.   </caption>
  42.   <thead>
  43.     <tr>
  44.       <th scope="col">Design Name</th>
  45.       <th scope="col">Author</th>
  46.       <th scope="col">Country</th>
  47.       <th scope="col">Comment</th>
  48.       <th scope="col">Download</th>
  49.     </tr>
  50.   </thead>
  51.   <tfoot>
  52.     <tr>
  53.       <th scope="row">Total</th>
  54.       <td colspan="4">85 designs</td>
  55.     </tr>
  56.   </tfoot>
  57.   <tbody>
  58.     <tr >
  59.       <th scope="row" id="r84">UV Green</th>
  60.       <td>Kunimichi Takahashi</td>
  61.       <td>USA</td>
  62.       <td>Let me know what you think.</td>
  63.       <td>Download</td>
  64.     </tr>
  65.   </tbody>
  66. </table>
  67. </body>
  68. </html>

Report this snippet 

You need to login to post a comment.