contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara Membuat table Zebra dengan CSS

Posted in HTML & CSS Life at 16 November 2017 With 0 Comments

Artikel kali ini kita akan Membuat Warna Tabel Selang Seling dengan CSS, atau biasa disebut dengan Zebra, ya lantaran warna nya seperti hewan dengan nama zebra mungkin. Hal ini dilakukan supaya memudahkan orang dalam membaca tiap baris dari table tersebut.

Sebelumnya admin memang sudah menjelaskan cara membuat warna pada tabel HTML (baca), namun kli ini kita akan membuat warna zebra pada tabel dengan CSS Mudah

▼ Download Source Code Dibawah Ini ▼


Ok.. bagi anda yang menginginkan  baris di table seperti zebra yaitu warna background baris genap dan ganjil berbeda. Berikut saya akan jelaskan membuat table zebra dengan menggunakan style CSS,

Code HTML

    <table id="one">
        <caption>This is a nonsense table</caption>
        <thead>
            <tr>
                <td>Name</td>
                <th>ID</th>
                <th>Age</th>
                <th>Height</th>
                <th>Occupation</th>
                <th>Hobbies</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="6">Data accurate as of August 2010</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th>Harry Roberts</th>
                <td>001</td>
                <td>20</td>
                <td>6&prime;4&Prime;</td>
                <td>Web Developer</td>
                <td>Trials</td>
            </tr>
            <tr>
                <th>Joe Whitley</th>
                <td>002</td>
                <td>20</td>
                <td>6&prime;1&Prime;</td>
                <td>Sports Journalist</td>
                <td>Golf</td>
            </tr>
            <tr>
                <th>Laura Jones</th>
                <td>003</td>
                <td>22</td>
                <td>5&prime;5&Prime;</td>
                <td>Florist</td>
                <td>Pub darts</td>
            </tr>
            <tr>
                <th>Jos&eacute; Edwards</th>
                <td>004</td>
                <td>19</td>
                <td>6&prime;</td>
                <td>Candlestick Maker</td>
                <td>Singing</td>
            </tr>
            <tr>
                <th>Sally Rodgers</th>
                <td>005</td>
                <td>35</td>
                <td>5&prime;7&Prime;</td>
                <td>Copywriter</td>
                <td>Bodybuilding</td>
            </tr>
            <tr>
                <th>Herbert Smythe</th>
                <td>006</td>
                <td>12</td>
                <td>4&prime;11&Prime;</td>
                <td>Student</td>
                <td>Cage fighting</td>
            </tr>
            <tr>
                <th>John Smith</th>
                <td>007</td>
                <td>28</td>
                <td>5&prime;11&Prime;</td>
                <td>Fishmonger</td>
                <td>Cross-stitch</td>
            </tr>
        </tbody>
    </table>

Code CSS :

#one tbody tr:nth-of-type(odd){
	background:rgba(255,255,136,0.5);
}

Membuat Table Zebra dengan CSS

Atau kita Bisa membuat Table Zebra dengan bentuk :

tbody td:nth-of-type(odd),
thead th:nth-of-type(odd){
	background:rgba(255,255,136,0.5);
}

Membuat Table Zebra dengan CSS

Dan Satu Lagi :

tbody td:nth-of-type(odd),
tbody tr:nth-of-type(odd),
thead th:nth-of-type(odd){
	background:rgba(255,255,136,0.5);
}

Membuat Table Zebra dengan CSS

 

Demo Download

 Terakhir dalam Artikel Membuat table zebra dengan CSS / Membuat table selang seling dengan CSS ini dapat bermanfat ,

Artikel Rekomendasi



Artikel Terkait

Diskusi