Membuat Warna Selang Seling Baris / Row Tabel dengan CSS


membuat warna row table dengan php

Membuat Warna Selang Seling Baris / Row Tabel dengan CSS - Untuk menyajikan data berbentuk tabulasi kita bisa membuat tampilan yang bertolak belakang antara baris yang satu dengan yang lain. Untuk mengimplementasikannya kita bisa membuat tampilan yang bertolak belakang antara baris ganjil dan baris genap. Kita dapat menciptakan perbedaan itu dengan menyerahkan latar belakang warna yang berbeda.

Dalam penyajian dengan browser, kita menggunakan tr:nth-child(even) atau tr:nth-child(odd). Pada misal kali ini anda akan memakai tr:nth-child(even) dengan contoh berikut ini:

Cara membuat tabel warna warni dengan css

Silahkan anda copy/paste kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Variasi baris ganjil genap</title>

<style type="text/css">
table
{
    border: 1px solid #000;
}
thead
{
    background-color:#c0bc03;
}

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

</head>

<body>

<table>
<thead>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</thead>
<tbody
<tr>
<td>Baris 1</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 2</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 3</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 4</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 5</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>

</tbody>
</body>

</html>

 

Sekian tutorial tentang Membuat Warna Selang Seling Baris / Row Tabel dengan CSS, semoga bermanfaat.

Tags

css  tutorial css  membuat warna tabel css  

Artikel Menarik Lainnya:

Rekomendasi Artikel


Aplikasi yang digunakan Untuk membuat Aplikasi dengan PHPPenulisan [PHP] Terpisah dari Kontrol StrukturContoh Cara Menentukan Bilangan Ganjil Dengan Fungsi DO-WHILEProses Pengulangan Pada Form text filed dengan Fungsi ForCara Menggunakan Variabel [PHP]

Terbaru dari PHP


Search


Top Stories


  1. Membuat Perulangan Segitiga Bintang Dengan PHP

    on 2018-01-12

  2. Membatasi Jumlah Karakter dengan PHP

    on 2018-01-23

  3. Kenapa Telinga Gatal dan Berair

    on 2018-04-13

  4. Membuat Tanggal dan Zona Waktu Sederhana dengan PHP

    Admin on 2017-11-26

  5. Membuat Paragraf Otomatis dengan Script PHP

    on 2018-01-26

Other Post


Top Videos


  1. FILM Horor Terbaru "SABRINA THE DOLL 2" Full Movie 2018

    Andri03 on 2018-08-01

  2. Sandiaga Uno Resmi Mundur dari Ketua Tim Pemenangan Partai Gerindra

    joesep on 2018-07-31

  3. Founder SB1M dan Pemilik Distro BLOOP ini BANGKIT dari BANGKRUT 16x dan HUTANG 11M | Christina Lie

    joesep on 2019-06-04

  4. vivo Z1 Pro VS OPPO A9 2020 | Duel HP 3 Jutaan Terbaik 2019!

    joesep on 2019-09-26

  5. Aplikasi Kasir Point of Sale Restoran / Kafe Berbasis WEB

    joesep on 2018-08-15

close