--> Membuat Background Table Warna Warni (Belang) Pada BLOG
Home Belajar HTML

Membuat Background Table Warna Warni (Belang) Pada BLOG

SeniKoding.com - Tabel warna warni atau belang banyak digunakan untuk kebutuhan user friendly dan keindahan desain. Banyak manfaat yang diperoleh dengan adanya desain ini. Selain dari pada desain yang elegan juga terdapat nilai bantu terhadap user terhadap data didalam table.

Kita bisa perhatikan tabel yang dibuat dengan menggunakan background satu warna dengan background warna warni / belang akan menimbulkan efek perbedaan data yang mencolok didalam sisi pengamatan / penglihatan. Dampak ini menjadi sangat baik didalam nilai desain tabel itu sendiri dan profesional web tersebut.

Nilai dari background Tabel warna warni ini juga mengandung User Eksperience yang pada akhirnya sangat baik untuk web / blog itu sendiri.

Ikuti terus bagaimana cara membuat Background Tabel warna warni ini yang dapat dibuat mengguanakan dua (2) cara, yaitu:

1. Membuat Background Table Warna Warni (Belang) Dengan CSS


Kita dapat membuat warna background tabel warna warni dengan hanya sentuhan CSS saja, dengan hanya satu baris kode yang kita tambahkan sudah dapat membuat tabel yang menarik.
Membuat Background Tabel Warna Warni (Belang) dengan CSS
Tabel belang dengan CSS

Kode membuat Table background warna-warni:
<!DOCTYPE html>
<html>
<head>
  <title>Membuat background table warna-warni</title>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {
    background-color: #cccccc;
} 
</style>
</head>

<body>
<h2>Membuat Background Table Warna-Warni</h2>
<table>
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
    <th>Hobi</th>
  </tr>
  <tr>
    <td>Edi Sutanto</td>
    <td>Jakarta</td>
    <td>Sepakbola</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Palembang</td>
    <td>Bulutangkis</td>
  </tr>
  <tr>
    <td>Raden Bagus</td>
    <td>Surabaya</td>
    <td>Panjat tebing</td>
  </tr>
  <tr>
    <td>Agus Hermawan</td>
    <td>Bandung</td>
    <td>Renang</td>
  </tr>
  <tr>
    <td>Ibnu</td>
    <td>Yogyakarta</td>
    <td>Mancing</td>
  </tr>
  <tr>
    <td>Denis</td>
    <td>Malang</td>
    <td>Voli</td>
  </tr>
</table>
</body>
</html>

Hanya satu baris kode CSS ini sudah dapat merubah background tabel warna-warni / belang:

tr:nth-child(even) {
    background-color: #cccccc;
}

Cara ini bisa digunakan didalam website / blog sobat karena cara nya yang simple dan dinamis.
Baca juga : Membuat Table HTML

2. Membuat Background Table Warna Warni (Belang) Dengan JAVASCRIPT / JQuery

Membuat Background Tabel Warna Warni (Belang) dengan Javascript
Tabel warna-warni dengan Javascript

Kemudian selain dapat membuat Background Table warna-warni dengan CSS kita juga dapat membuatnya dengan Javascript.

Berikut ini kodenya:
<!DOCTYPE html> 
<html>
<head>
  <title>Membuat background table warna-warni</title>
<style>
table {
    border-collapse: collapse;
}
th, td {
    padding: 5px 10px;
    text-align: left;
        } 
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script type="text/javascript">
        $(document).ready(function(){
            $('tr:even').css({'background':'brown'});
            $('tr:odd').css({'background':'silver'});
            $('th').parent().css({'background':'#ddd'});
        });
    </script>
</head>

<body>
<h2>Membuat Background Table Warna-Warni</h2>
<table>
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
    <th>Hobi</th>
  </tr>
  <tr>
    <td>Edi Sutanto</td>
    <td>Jakarta</td>
    <td>Sepakbola</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Palembang</td>
    <td>Bulutangkis</td>
  </tr>
  <tr>
    <td>Raden Bagus</td>
    <td>Surabaya</td>
    <td>Panjat tebing</td>
  </tr>
  <tr>
    <td>Agus Hermawan</td>
    <td>Bandung</td>
    <td>Renang</td>
  </tr>
  <tr>
    <td>Ibnu</td>
    <td>Yogyakarta</td>
    <td>Mancing</td>
  </tr>
  <tr>
    <td>Denis</td>
    <td>Malang</td>
    <td>Voli</td>
  </tr>
</table>

</body>
</html>

Dengan tambahan Javascript/ JQuery ini Tabel warna-warni bisa dibuat:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script type="text/javascript">
        $(document).ready(function(){
            $('tr:even').css({'background':'brown'});
            $('tr:odd').css({'background':'silver'});
            $('th').parent().css({'background':'#ddd'});
        });
    </script>

Kembali lagi kepada Anda cara mana yang mau dipilih untuk membuat Tebel yang menarik diatas.
Kalau untuk tingkat efisien dan peforma Admin menyarakan untuk membuat Tabel warna-warni dengan menggunakan sentuhan CSS saja karena lebih mudah dan ringan.

Semoga bermanfaat artikel tentang Membuat Background Table Warna Warni (Belang) Pada BLOG, terima kasih.

Baca juga :


2 komentar

  1. Pake css keliatan lebih gampang gan :) bookmark dulu

    BalasHapus

Dilarang SPAM Komentar!

to Top