Advanced Search

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

/ Published in: CSS
Save to your folder(s)
via http://icant.co.uk/csstablegallery/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.