Membuat Background Table Warna Warni (Belang) Pada Blog
- Tabel warna warni atau belang banyak dipakai 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 sanggup perhatikan tabel yang dibentuk dengan memakai background satu warna dengan background warna warni / belang akan menimbulkan dampak 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 hasilnya sangat baik untuk web / blog itu sendiri.
Ikuti terus bagaimana cara menciptakan Background Tabel warna warni ini yang sanggup dibentuk mengguanakan dua (2) cara, yaitu:
1. Membuat Background Table Warna Warni (Belang) Dengan CSS
Kita sanggup menciptakan warna background tabel warna warni dengan hanya sentuhan CSS saja, dengan hanya satu baris instruksi yang kita tambahkan sudah sanggup menciptakan tabel yang menarik.
 |
| Tabel belang dengan CSS |
Kode menciptakan 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 instruksi CSS ini sudah sanggup merubah background tabel warna-warni / belang:
tr:nth-child(even) { background-color: #cccccc; } Cara ini sanggup dipakai didalam website / blog sahabat alasannya yaitu cara nya yang simple dan dinamis.
Baca juga : Membuat Table HTML
2. Membuat Background Table Warna Warni (Belang) Dengan JAVASCRIPT / JQuery
 |
| Tabel warna-warni dengan Javascript |
Kemudian selain sanggup menciptakan Background Table warna-warni dengan CSS kita juga sanggup 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 perhiasan Javascript/ JQuery ini Tabel warna-warni sanggup 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 menciptakan Tebel yang menarik diatas.
Kalau untuk tingkat efisien dan peforma Admin menyarakan untuk menciptakan Tabel warna-warni dengan memakai sentuhan CSS saja alasannya yaitu lebih gampang dan ringan.
Semoga bermanfaat artikel ihwal Membuat Background Table Warna Warni (Belang) Pada BLOG, terima kasih.
Sumber https://www.senikoding.com/