1. Beautiful CSS3 code for styling price table

beautiful CSS3 table for price

Basic CSS

.pricing-table { min-width: 670px; }
 
.pricing-table td {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    vertical-align: text-top;
}

Plan Section

.pricing-table thead .plan td {
    width: 210px;
    height: 42px;
    padding: 15px 0;
    text-align: center;
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
 
.pricing-table thead .plan h2 {
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    line-height: 24px;
}
 
.pricing-table thead .plan em {
    font-family: Georgia, Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 14px;
    line-height: 16px;
}
.pricing-table thead .plan .green {
    color: #36611e;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: url(../img/green_pattern.png) repeat-x 0 0;
}
 
.pricing-table thead .plan .orange {
    color: #fafafa;
    text-shadow: 1px 1px 2px rgba(0,0,0, .4);
    background: url(../img/orange_pattern.png) repeat-x 0 0;
}

Price Section

.pricing-table thead .price td {
    position: relative;
    width: 210px;
    padding: 25px 0;
 
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #b6b07c;
 
    background: #f9f8f1;
    background: -moz-linear-gradient(top,  #f9f8f1 0%, #f4f2e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));
    background: -webkit-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
    background: -o-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
    background: -ms-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
    background: linear-gradient(to bottom,  #f9f8f1 0%,#f4f2e2 100%);
}
 
.pricing-table thead .price p {
    display: table;
    margin: 0 auto;
    font-size: 50px;
    line-height: 60px;
}
 
.pricing-table thead .price p span {
    font-size: 0.5em;
    display: table-cell;
    vertical-align: middle;
}
 
.pricing-table thead .price span { font-size: 14px; }
.pricing-table thead .price a {
    display: block;
    position: absolute;
    top: 41px;
    right: -5px;
    height: 32px;
    padding: 0 10px;
    line-height: 32px;
    font-size: 12px;
    text-decoration: none;
}
 
.pricing-table thead .price .green a {
    color: #37621f;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 
    background: #82d344;
    background: -moz-linear-gradient(top,  #82d344 0%, #51af34 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34));
    background: -webkit-linear-gradient(top,  #82d344 0%,#51af34 100%);
    background: -o-linear-gradient(top,  #82d344 0%,#51af34 100%);
    background: -ms-linear-gradient(top,  #82d344 0%,#51af34 100%);
    background: linear-gradient(to bottom,  #82d344 0%,#51af34 100%);
}
 
.pricing-table thead .price .orange a {
    color: #fafafa;
    text-shadow: 1px 1px 2px rgba(0,0,0, .3);
 
    background: #ff8042;
    background: -moz-linear-gradient(top,  #ff8042 0%, #f55a0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042), color-stop(100%,#f55a0e));
    background: -webkit-linear-gradient(top,  #ff8042 0%,#f55a0e 100%);
    background: -o-linear-gradient(top,  #ff8042 0%,#f55a0e 100%);
    background: -ms-linear-gradient(top,  #ff8042 0%,#f55a0e 100%);
    background: linear-gradient(to bottom,  #ff8042 0%,#f55a0e 100%);
}
.pricing-table thead .price .green a:before,
.pricing-table thead .price .orange a:before,
.pricing-table thead .price .green a:after,
.pricing-table thead .price .orange a:after {
    display: block;
    position: absolute;
    content: '';
}
 
.pricing-table thead .price .green a:before,
.pricing-table thead .price .orange a:before {
    width: 8px;
    height: 32px;
    top: 0;
    left: -8px;
    background: url(../img/badge.png) no-repeat;
}
 
.pricing-table thead .price .green a:after,
.pricing-table thead .price .orange a:after {
    width: 0;
    height: 0;
    bottom: -5px;
    right: 0;
    border-bottom: 5px solid transparent;
}
 
.pricing-table thead .price .green a:before { background-position: 0 0; }
.pricing-table thead .price .orange a:before { background-position: 0 -32px; }
.pricing-table thead .price .green a:after { border-left: 5px solid #1c5d40; }
.pricing-table thead .price .orange a:after { border-left: 5px solid #88330a; }

Features Section

.pricing-table tbody tr:first-child td:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 5px;
    top: -25px;
    left: 0;
    background: url(../img/stripe.png) repeat-x 0 0;
}
 
.pricing-table tbody td {
    width: 170px;
    padding-left: 40px;
    line-height: 30px;
    border-top: 1px solid #f2f2f2;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #828282;
}
 
.pricing-table tbody tr:first-child td { border-top: 20px solid #ffffff; }
.pricing-table .clock-icon td,
.pricing-table .basket-icon td,
.pricing-table .star-icon td,
.pricing-table .heart-icon td { background: #ffffff url(../img/icons.png) no-repeat 0 0; }
 
.pricing-table .clock-icon td { background-position: 0 0; }
.pricing-table .basket-icon td { background-position: 0 -30px; }
.pricing-table .star-icon td { background-position: 0 -60px; }
.pricing-table .heart-icon td { background-position: 0 -90px; }

Description Section

.pricing-table tfoot td {
    width: 190px;
    padding: 20px 10px;
    text-align: center;
    line-height: 18px;
    background: #ffffff;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #828282;
 
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
 
    -webkit-box-shadow: 0px 2px 0px #e4e4e4;
    -moz-box-shadow: 0px 2px 0px #e4e4e4;
    box-shadow: 0px 2px 0px #e4e4e4;
}

“Float” Text

@font-face {
    font-family: 'Lobster13Regular';
    src: url('font/Lobster_1.3-webfont.eot');
    src: url('font/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lobster_1.3-webfont.woff') format('woff'),
         url('font/Lobster_1.3-webfont.ttf') format('truetype'),
         url('font/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.table-float {
    display: block;
    position: absolute;
    width: 300px;
    padding: 80px 0 0 0;
    top: 85%;
    left: 130px;
}
 
.table-float p {
    font-family: Lobster13Regular, sans-serif;
    font-size: 16px;
    color: #858585;
    line-height: 20px;
}
 
.table-float p.big {
    font-size: 65px;
    color: #f76117;
    text-align: right;
    line-height: 65px;
}
 
.table-float .arrow {
    display: block;
    position: absolute;
    top: 0;
    left: 50px;
    width: 68px;
    height: 77px;
    background: url(../img/arrow.png) no-repeat 0 0;
}

Read more

2. Stylish Round corner using CSS3

stylish round corner with CSS3

3. Pure CSS code for animated table rows

table hover effect using css3

4. CSS3 and jQuery for table style

CSS and jQuery for table



CSS code

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
  
body {
    margin:0;
    padding:0;
    font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
    color: #555;
        background:#f5f5f5 url(bg.jpg);
}
  
a {color:#666;}
  
#content {width:65%; max-width:690px; margin:6% auto 0;}
  
/*
*/
  
table {
    overflow:hidden;
    border:1px solid #d3d3d3;
    background:#fefefe;
    width:70%;
    margin:5% auto 0;
    -moz-border-radius:5px; /* FF1+ */
    -webkit-border-radius:5px; /* Saf3-4 */
    border-radius:5px;
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
  
th, td {padding:18px 28px 18px; text-align:center; }
  
th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
  
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
  
tr.odd-row td {background:#f6f6f6;}
  
td.first, th.first {text-align:left}
  
td.last {border-right:none;}
  
/*
Background gradients are completely unnecessary but a neat effect.
*/
  
td {
    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
  
tr.odd-row td {
    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
  
th {
    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
  
/*
I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements.
And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
*/
  
tr:first-child th.first {
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px; /* Saf3-4 */
}
  
tr:first-child th.last {
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px; /* Saf3-4 */
}
  
tr:last-child td.first {
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
  
tr:last-child td.last {
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

HTML code

Task DetailsProgressVital Task
Look at Orman's simple table design100%No
Turn table design into a web project100%Yes
Drink another cup of coffee50%Yes
Take a stretch break0%Yes
Post this stuff on the interweb100%Yes