membuat table menarik untuk dilihat dengan CSS

 Author : hadinug, 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 hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda