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


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

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


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.