Cara Mendesain Tabel Web Menggunakan CSS
Seperti yang kalian ketahui bahwa kode CSS sangat berpengaruh besar pada tampilan website termasuk konten tabel, secara default tampilan tabel pada web sangat sederhana dan kurang menarik. 
Pada kesempatan kali ini saya akan memberikan fakta mengenai cara untuk mengubah design atau tampilan tabel buat terliat lebih menarik menggunakan menggunakan kode CSS.
1. Langkah pertama, buatlah arsip html pada notepad kalian
<html> <head> <title>Cara Mendesain Tabel Dengan CSS</title> <style> .tabel{border:1px solid #000; border-collapse:collapse;font-family:sans-serif} </style> </head> <body> <h2>Cara Mendesain Tabel Web Dengan CSS [Zona Internetku]</h2> <table class="tabel"> <tr> <th>No.</th> <th>Nama</th> <th>Asal</th> <th>Jenis Kelamin</th> </tr> <tr> <td>1</td> <td>Jaenudin Ngaciro</td> <td>Surabaya</td> <td>Laki-Laki</td> </tr> <tr> <td>2</td> <td>Mukidi Mekedel</td> <td>Semarang</td> <td>Laki-Laki</td> </tr> <tr> <td>3</td> <td>Mimin Perih</td> <td>Jakarta</td> <td>Perempuan</td> </tr> <tr> <td>4</td> <td>Sri Mbombok</td> <td>Bandung</td> <td>Perempuan</td> </tr> <tr> <td>5</td> <td>Zona Internetku</td> <td>Jogja</td> <td>Laki-Laki</td> </tr> </table> </body> </html>
2. Selanjutnya kalian simpan file html tersebut dengan ekstensi .html (jika belum tau silahkan baca dulu artikel ini Macam - Macam Tag HTML Beserta Fungsi Dan Contohnya
3. Jika kalian sudah menyimpan file tersebut, maka bukalah file tersebut menggunakan browser dan hasilnya akan terlihat seperti ini
.tabel{border:1px solid #7bff96; border-collapse:collapse;font-family:sans-serif} .tabel tr th{background:#24b913;color:#fff;padding:4px 7px;margin:0;} .tabel tr td:nth-child(1){text-align:center;font-weight:bold} .tabel tr td{padding:4px 7px;margin:0;} .tabel tr:nth-child(odd){background:#a0efa0}
Silahkan kalian simpan perubahan pada file html tadi dan lihat hasilnya dengan browser kalian, dan hasil akhirnya akan menjadi seperti ini
Baca juga :
Cara Memakai Fungsi nth-child Selector