membuat table menarik untuk dilihat dengan CSS

 Author : Nugroho R. Hadi .W, 05 April, 2014, Komentar

Kali ini penulis akan membagi sedikit pengalaman bagaimana membuat sebuah table yang menarik untuk dilihat dengan menggunakan css. Sebelum nya, ada baiknya jika teman-teman memahami penggunaan selektor pada CSS sebagai dasar untuk membuat design table dengan menggunakan CSS.



Langsung saja agar tidak banyak berbasa-basi, di awal kita akan tuliskan sintak sederhana HTML table


HTML TABLE

<table cellpadding="0" cellspacing="0"> 
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
        <th>Favorite Color</th>
        <th>Wars or Trek?</th>
        <th>Porn Name</th>
        <th>Date of Birth</th>
        <th>Dream Vacation City</th>
        <th>GPA</th>
        <th>Arbitrary Data</th>
    </tr> 
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
        <td>Lettuce Green</td>
        <td>Trek</td>
        <td>Digby Green</td>
        <td>January 13, 1979</td>
        <td>Gotham City</td>
        <td>3.1</td>
        <td>RBX-12</td>
    </tr>
    <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
        <td>Blue</td>
        <td>Wars</td>
        <td>John Smith</td>
        <td>July 19, 1968</td>
        <td>Athens</td>
        <td>N/A</td>
        <td>Edlund, Ben (July 1996).</td>
    </tr>
    <tr>
        <td>Jokey</td>
        <td>Smurf</td>
        <td>Giving Exploding Presents</td>
        <td>Smurflow</td>
        <td>Smurf</td>
        <td>Smurflane Smurfmutt</td>
        <td>Smurfuary Smurfteenth, 1945</td>
        <td>New Smurf City</td>
        <td>4.Smurf</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Cindy</td>
        <td>Beyler</td>
        <td>Sales Representative</td>
        <td>Red</td>
        <td>Wars</td>
        <td>Lori Quivey</td>
        <td>July 5, 1956</td>
        <td>Paris</td>
        <td>3.4</td>
        <td>3451</td>
    </tr>
    <tr>
        <td>Captain</td>
        <td>Cool</td>
        <td>Tree Crusher</td>
        <td>Blue</td>
        <td>Wars</td>
        <td>Steve 42nd</td>
        <td>December 13, 1982</td>
        <td>Las Vegas</td>
        <td>1.9</td>
        <td>Under the couch</td>
    </tr> 
</table>


Kemudian dari html kode tersebut, pada browser mungkin akan terlihat kurang menarik, nah dengan CSS kita buat HTML table tersebut menarik untuk dilihat


CSS TABLE

<style type="text/css">
    table{
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;                 
    }
    table th, table th+th, table tr, table tr+tr, table td, table td+td{
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 5px;
    }
    table th, table th+th{
        background: #f9f9f9;
        padding: 6px;
    }

</style>


Semoga bermanfaat, lihat demonya disini


 
Bagikan halaman ke sosial media
 
Tags :   css       

Tentang Penulis

writer Nugroho R. Hadi .W
Lead Sofware Developer di PT. Yafii Solusi Internasional

Link: http://www.hadinug.net/

   Komentar Anda