Membuat Tabel Zebra HTML Warna Warni dengan CSS3

Adakalanya ketika kita ingin membuat tabel yang menampilkan data kita di sistem informasi yang kita buat dengan tampilan yang berbeda. Misalnya kita ingin membuat tampilan seperti berikut ini :



No Nama Jurusan
1 Andi Sholihin Teknik Informatika
2 Eka Nanda Teknik Informatika
3 Winda Sarifati Teknik Informatika
4 Rahilah Teknik Informatika

caranya mudah, pertama mari kita buat tabelnya dulu.
<table>
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Jurusan</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Andi Sholihin</td>
            <td>Teknik Informatika</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Eka Nanda</td>
            <td>Teknik Informatika</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Winda Sarifati</td>
            <td>Teknik Informatika</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Rahilah</td>
            <td>Teknik Informatika</td>
        </tr>
    </tbody>
</table>


Selanjutnya kita pasang CSSnya seperti berikut ini.
<style type="text/css">
table {
   border-collapse:collapse;
   width:90%;
}

table, td, th {
   border:1px solid black;
}

tbody tr:nth-child(odd) {
   background-color: #ccc;
}
</style>


Mudah kan? sekian tutorial kali ini, semoga bermanfaat. Salam Blogger Madura.

BAGIKAN KE:

2 komentar:

  1. Hehehe.. tapi kenapa sampeyan pakenya PHP buat warnain tabel ya Kang?

    ReplyDelete