Membuat Tabel CSS 2

Tabel ini dibuat menggunakan HTML 5 dan CSS 3

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML

<!DOCTYPE html>
<html lang="id">
 <head>
  <title>Membuat Tabel CSS - Kursus Membuat Web</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="tabel.css" media="all">
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th></th>
     <th scope="col">Smart Starter</th>
     <th scope="col">Smart Medium</th>
     <th scope="col">Smart Business</th>
     <th scope="col">Smart Deluxe</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th scope="row">Price per month</th>
     <td>$ 2.90</td>
     <td>$ 5.90</td>
     <td>$ 9.90</td>
     <td>$ 14.90</td>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <th scope="row">Storage Space</th>
     <td>512 MB</td>
     <td>1 GB</td>
     <td>2 GB</td>
     <td>4 GB</td>
    </tr>
    <tr>
     <th scope="row">Bandwidth</th>
     <td>50 GB</td>
     <td>100 GB</td>
     <td>150 GB</td>
     <td>Unlimited</td>
    </tr>
    <tr>
     <th scope="row">MySQL Databases</th>
     <td>Unlimited</td>
     <td>Unlimited</td>
     <td>Unlimited</td>
     <td>Unlimited</td>
    </tr>
    <tr>
     <th scope="row">Setup</th>
     <td>19.90 $</td>
     <td>12.90 $</td>
     <td>free</td>
     <td>free</td>
    </tr>
    <tr>
     <th scope="row">PHP 5</th>
     <td><span class="check"></span></td>
     <td><span class="check"></span></td>
     <td><span class="check"></span></td>
     <td><span class="check"></span></td>
    </tr>
    <tr>
     <th scope="row">Ruby on Rails</th>
     <td><span class="check"></span></td>
     <td><span class="check"></span></td>
     <td><span class="check"></span></td>
     <td><span class="check"></span></td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS

table{
 font-family: "Trebuchet MS", sans-serif;
 font-size: 16px;
 font-weight: bold;
 line-height: 1.4em;
 font-style: normal;
 border-collapse:separate;
}
thead th{
 padding:15px;
 color:#fff;
 text-shadow:1px 1px 1px #568F23;
 border:1px solid #93CE37;
 border-bottom:3px solid #9ED929;
 background-color:#9DD929;
 background:-webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.02, rgb(123,192,67)),
 color-stop(0.51, rgb(139,198,66)),
 color-stop(0.87, rgb(158,217,41))
 );
 background: -moz-linear-gradient(
 center bottom,
 rgb(123,192,67) 2%,
 rgb(139,198,66) 51%,
 rgb(158,217,41) 87%
 );
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:5px;
 -moz-border-radius:5px 5px 0px 0px;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
}
thead th:empty{
 background:transparent;
 border:none;
}
tbody th{
 color:#fff;
 text-shadow:1px 1px 1px #568F23;
 background-color:#9DD929;
 border:1px solid #93CE37;
 border-right:3px solid #9ED929;
 padding:0px 10px;
 background:-webkit-gradient(
 linear,
 left bottom,
 right top,
 color-stop(0.02, rgb(158,217,41)),
 color-stop(0.51, rgb(139,198,66)),
 color-stop(0.87, rgb(123,192,67))
 );
 background: -moz-linear-gradient(
 left bottom,
 rgb(158,217,41) 2%,
 rgb(139,198,66) 51%,
 rgb(123,192,67) 87%
 );
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-top-left-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 border-top-left-radius:5px;
 border-bottom-left-radius:5px;
}
tfoot td{
 color: #9CD009;
 font-size:32px;
 text-align:center;
 padding:10px 0px;
 text-shadow:1px 1px 1px #444;
}
tfoot th{
 color:#666;
}
tbody td{
 padding:10px;
 text-align:center;
 background-color:#DEF3CA;
 border: 2px solid #E7EFE0;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 color:#666;
 text-shadow:1px 1px 1px #fff;
}
tbody span.check::before{
content : url(check0.png)
}

Lihat Demo ..