Simple Table CSS

Membuat tampilan tabel lebih menarik dengan CSS3. Tampilan tabel pada website ataupun pada aplikasi berbasis web haruslah menarik, karena tabel akan menampilkan data. Bisa dibayangkan jikalau data yang di tampilkan berupa angka yang banyak. Kalau tampilan tabel tidak menarik, sudah pasti yang membaca data pun akan pusing melihatnya. Berikut ini adalah contoh css untuk tabel :

<!DOCTYPE html>

<html>

<head>

<title>Simple Table CSS3</title>

<style type="text/css">

body{width:500px;margin:0 auto;margin-top:25px;font-family:Verdana, Tahoma, Arial, "Trebuchet MS";font-size:13px;color:#666;padding:20px;}

.table{

    border:1px solid #ddd;

    border-collapse: collapse;

    border-spacing: 0px;

    width:100%;

    box-shadow: 0px 1px 2px #D1D1D1;

}

.table tr th{

    border:1px solid #ddd;

    padding:10px; 

    vertical-align: baseline;

    padding: 21px 25px 22px;

    text-shadow: 1px 1px 0px #FFF;

    background: #ededed;

    box-shadow: 1px 1px 0px #FFF inset;

}

.table tr td{

    border:1px solid #eee;

    padding:7px 10px;

    margin:0px;

    line-height: 1.42857;

    vertical-align: top;

    border-left-width: 0px;

    border-bottom-width: 0px;

    box-shadow: 1px 1px 0px #FFF inset;

}

.table tr td:first-child{

    border-left: 0px none;

}

</style>

</head>

<body>

<h4>Simple Table CSS3</h4>

<table class="table">

    <thead>

        <tr><th width="10">No</th><th>Nama Lengkap</th><th>Alamat</th></tr>

    </thead>

    <tbody>

        <tr><td>1</td><td>Muhammad Ridho</td><td>Payakumbuh</td></tr>

        <tr><td>2</td><td>Berik Hanizar</td><td>Solok</td></tr>

        <tr><td>3</td><td>Metri Daniel Kurnia</td><td>Sijunjung</td></tr>

        <tr><td>4</td><td>Erick Renato</td><td>Padang</td></tr>

        <tr><td>5</td><td>Bobi Arianto</td><td>Bukittinggi</td></tr>

        <tr><td>6</td><td>Wahyu Rahmadani</td><td>Painan</td></tr>

        <tr><td>7</td><td>Era Delfa Yesa</td><td>Padang</td></tr>

    </tbody>

</table>

</body>

</html>