contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Cara Membuat table Zebra dengan CSS

Posted in HTML & CSS Life at 25 Februari 2016 With 0 Comments

Artikel kali ini kita akan Membuat Warna Tabel Slang 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.

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,

▼ Download Source Code Dibawah Ini ▼


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 Terkait

Diskusi