Mengatur Tabel Dengan CSS

Pada saat pembuatan website, adakalanya kita memerlukan tabel untuk menyampaikan sesuatu kepada pengunjung. CSS atau Cascade Style Sheeet pada pembuatan tabel, dapat kita berdayakan untuk memudahkan kita dalam mengatur tabel dan membuat tabel menjadi lebih menarik.

Tabel dapat kita bagi menjadi baris judul dan baris isi dengan menggunakan tag <th> dan <tr> dan tiap cell akan menggunakan tag <td>. Selanjutnya, perlu kita ketahui terlebih dahulu beberapa properti yang melengkapi sebuah tabel dan dapat diatur menggunakan CSS. Properti tersebut adalah:

1. Border, misal:
   

   table, th, td{border: 1 px solid red}

   maka hasilnya adalah sbb :
   
   
   
   

   No	Baris Judul
   1	Baris Isi



2. Collapse Border, tabel diatas mempunyai banyak border, apabila border untuk tabel dan cell akan kita gabung maka kita menambahkan
   

   table {border-collapse:collapse;}
   table, th, td{border: 1 px solid red}

   maka hasilnya adalah sbb:
   
   
   
   

   No	Baris Judul
   1	Baris Isi



3. Tinggi dan Lebar Tabel, kita dapat mengatur tinggi dan lebar total dari sebuah tabel. Kita dapat menggunakan persentase dari ruang yang tersedia atau menggunakan satuan px yang absolut. Misal, lebar tabel kita buat 75% dari ruang yang ada (dibandingkan dengan tabel diatas yang lebarnya 100%) dan tinggi baris judul lebih tinggi dari baris isi, dengan kode berikut:
   

   table{width:75%;}
   th{height:50px;}

   hasilnya adalah sbb :
   
   
   
   

   No	Baris Judul
   1	Baris Isi



4. Pengaturan Teks, teks di dalam cell dapat kita atur secara horizontal (left, right atau center) maupun secara vertikal (top, bottom, middle). Misal:
   

   th{text-align:left;}
   td{vertical-align:bottom;}

   maka hasilnya :
   
   
   
   

   No	Baris Judul
   1	Baris Isi



5. Padding, yaitu jarak antara border dengan isi dari tabel. Misal:
   

   th{padding:10px;}

   maka hasilnya :
   
   
   
   

   No	Baris Judul
   1	Baris Isi



6. Warna tabel, kita berikan warna pada tabel agar lebih menarik misal :
   

   th{background-color:green;}

   maka hasilnya akan sbb:
   
   
   
   

   No	Baris Judul
   1	Baris Isi