Hallo teman-teman, berjumpa kembali dengan saya Muhamad Rizal Hidayat (Murihat). Masih seperti biasa diwebsite dumetschool ini banyak sekali artikel yang bermanfaat dalam memberikan tutorial atau tips dan trik seputar desain website dan semoga teman-teman dapat dengan mudah dan semangat dalam mempelajari ilmu seputar desain website.
Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Kolom Table Kosong dengan CSS3. Caranya si sangat mudah ya teman-teman, karena dari CSS3 sendiri sudah menyediakan property untuk memberikan style pada kolom table yang kosong.
Oke tanpa basa basi langsung saja kita mulai ya teman-teman, Pertama-tama jalankan/run text-editor yang teman-teman gunakan. Lalu kemudia ketiklah/copy script HTML dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<center> <h3>Cara Membuat Kolom Table Kosong dengan CSS3</h3> <table border="1" width="400"> <tr> <th>Nama</th> <th>Kota</th> <th colspan="2">Koordinat</th> </tr> <tr> <td>Murihat</td> <td>Jakarta</td> <td>2542</td> <td></td> </tr> <tr> <td>Rizal</td> <td>Bogor</td> <td></td> <td>6518</td> </tr> <tr> <td>Hidayat</td> <td>Bekasi</td> <td>2542</td> <td></td> </tr> </table> </center> |
Script diatas seperti biasanya ya teman-teman dalam membuat table, ada table head dan table kolom. Oke langkah selanjutnya teman-teman tambahkan script style CSS seperti dibawah ini :
|
1 2 3 |
<style> td:empty{background:grey;} /* style css3 untuk kolom kosong */ </style> |
Script diatas merupakan property CSS3 untuk mempermudah kita dalam memberikan style pada kolom yang kosong didalam table. Jadi tidak perlu lagi deh memberikan class satu-persatu hehe. Oke maka hasil jadinya akan menjadi seperti pada gambar dibawah ini :
Jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Cara Membuat Kolom Table Kosong dengan CSS3. Dan untuk pengembangan style nya silahkan teman-teman modifikasi sesuai keinginan teman-teman.
Oke sekian pembahasan kali ini tentang Cara Membuat Kolom Table Kosong dengan CSS3. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih