Hi guys, Today I am going to tell how to create a nice table designs using CSS. Some of the styles are

  • Box Style using CSS
  • Zebra Style using Jquery
  • One Column Style using CSS
  • Simple Table Design using CSS

Here is the css code

<pre>/*ZEBRA STYLE*/
table.zebra-style {font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; text-align:left; margin-bottom:25px;}
table.zebra-style th { color: #444; font-size: 14px; font-weight: normal; padding: 10px 8px; }
table.zebra-style td {color: #777;padding: 8px; font-size:13px;}
table.zebra-style tr.odd {background:#f2f2f2;}

/*MINIMAL STYLE*/
table.minimal-style { background: #FFFFFF; border-collapse: collapse; font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif; font-size: 12px; text-align: left; min-width: 480px; margin-bottom:25px; }
table.minimal-style th { border-bottom: 2px solid #444; color: #666666; font-size: 14px; font-weight: normal; padding: 10px; }
table.minimal-style td { border-bottom: 1px solid #CCCCCC; color: #999; padding: 8px 10px; }
table.minimal-style tbody tr:hover td {color:#444;}

/*BOX STYLE*/
table.box-style {font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;min-width:480px;text-align:left;border-collapse:collapse;margin-bottom:25px; }
table.box-style th {font-size:14px;font-weight:normal;background:#ccc;border-top:4px solid #ddd;border-bottom:1px solid #fff;color:#666666;padding:10px;}
table.box-style td {background:#f9f9f9;border-bottom:1px solid #fff;color:#999;border-top:1px solid transparent;padding:8px 10px;}
table.box-style tr:hover td {background:#eee;color:#444;}

/*ONE COL STYLE*/
.onecol-style {font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size:12px; min-width:480px; text-align:left; border-collapse:collapse; margin-bottom:25px;}
.onecol-style th {font-size:14px; font-weight:normal; color:#666666; padding:12px 15px;}
.onecol-style td {color:#999; border-top:1px solid #ccc; padding:10px 15px;}
.onecol-first {background:#dedede; border-right:10px solid transparent; border-left:10px solid transparent;}
.onecol-style tr:hover td {color:#444; background:#eee;}

/*SIMPLE STYLE*/
.simple-style {border-top:1px solid #CFCFCF; border-left:1px solid #CFCFCF; border-right:0; border-bottom:0; width:100%;}
.simple-style td, .simple-style th {border-right:1px solid #CFCFCF; border-bottom:1px solid #CFCFCF; text-align:center; padding:5px 0; width:20%;}
.simple-style th {background-color:#dedede; font-size:120%;text-shadow: 0 1px 0 #fff;}
.simple-style tr:nth-child(even) {background: #fff;}
.simple-style tr:nth-child(odd) {background: #F6F6F6;}
</pre>

View Demo Download

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/02/table-design-css1.pnghttp://w3lessons.info/wp-content/uploads/2012/02/table-design-css1-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignCascading Style Sheets,Design,tips & tricks
Hi guys, Today I am going to tell how to create a nice table designs using CSS. Some of the styles areBox Style using CSS Zebra Style using Jquery One Column Style using CSS Simple Table Design using CSSHere is the css codeView Demo DownloadPlease don’t forget to share and subscribe to...