Selasa, 20 Januari 2015

Memformat Kolom Tabel Menggunakan CSS

Untuk memformat kolom pada tabel, membuat tampilannya lebih rapi atau sekedar memperindahnya, dapat dilakukan dengan dua cara: menggunakan software eksternal atau menggunakan fasilitas CSS. Software eksternal umumnya dengan menggunakan Ms. Excel yang nantinya di-capture kemudian dipindahkan ke dalam halaman website sebagai gambar.

Teknik kedua adalah memformat kolom tabel menggunakan CSS. Pendekatan ini lebih baik dari sisi fleksibilitas dan kecepatan loading page. Dengan menggunakan CSS pengubahan isi tabel menjadi lebih mudah selain lebih cepat di-load karena ukurannya file tetap lebih kecil dibanding menampilkan tabel dengan format gambar.

Kali ini, kami akan membeberkan secara singkat 3 teknik pemformatan kolom tabel menggunakan CSS. Sebagai contoh kasus, kita hanya akan memformat tabel seperti dibawah ini.

Rata TengahRata Kanan

1. Teknik Inline Formatting 

Teknik ini ditempuh dengan menyisipkan kode css secara langsung pada elemen tabel. Untuk menghasilkan format seperti diatas, didapatkan dengan kode sebagai berikut:

<table style="width: 250px;">
 <tr>
   <td style="text-align: center;">Rata Tengah</td>
   <td style="text-align: right;">Rata Kanan</td>
 </tr>
</table>

Kelebihan teknik ini adalah kemudahan pengaturan format elemen secara spesifik tanpa mempengaruhi tampilan tabel secara keseluruhan
Kekurangannya adalah jika elemen yang ini dimodifikasi sangat banyak tentu menyulitkan pembacaan kode dan editing dibelakang hari.

2. Teknik Class

Teknik ini dilakukan dengan menentukan format elemen tabel sebelum tabel di-load oleh browser.

<style>
.tabel{width:250px} 
.tengah {text-align:center}
.kanan {text-align:right} 
</style>


<table class='tabel'>
 <tr>
   <td class='tengah'>Rata Tengah</td> 
   <td class='kanan'>Rata Kanan</td>
 </tr> 
</table>

Kelebihan teknik ini ada pada kemudahan penerapan format yang sama pada banyak elemen,cukup memanggil nama class yang dibutuhkan Selain itu proses editing pada masa mendatang juga akan lebih mudah. Ukuran file website juga relatif lebih kecil dibanding teknik pertama.
Kekurangan teknik ini adalah pemilihan nama class yang harus lebih kreatif jika ingin menerapkan banyak style berbeda

Teknik Class nth-child()

Ini adalah kelanjutan dari teknik Class. Berikut ini contohnya:

<style>
.tabel{width:250px} 
.table td:nth-child(1){text-align:center} 
.table td:nth-child(2){text-align:right} 
</style>

<table class='tabel'>
 <tr>
   <td>Rata Tengah</td> 
   <td>Rata Kanan</td>
 </tr> 

Angka 1 atau 2 pada kode css diatas mengacu pada urutan kolom tabel dari kiri ke kanan. Dimana kolom pertama diberi nomor indeks 1, berikutnya indeks 2 dan seterusnya.

Perbedaan dengan Teknik Class sebelumnya adalah tidak diperlukannya pemanggilan nama class untuk menerapkan style pada suatu elemen tabel. Browser secara otomatis akan melakukan render halaman sesuai dengan format yang ditentukan jika elemen tersebut memenuhi kriteria ketentuan pada nth-child().

Kelebihan teknik ini kurang lebih sama dengan Teknik Class sebelumnya. Bahkan ukuran file website akan lebih kecil lagi.
Kekurangan teknik ini adalah tidak semua browser mendukungnya. Tercatat IE versi 7 dan 8 sama sekali tidak mendukung teknik ini.

Teknik mana yang menjadi pilihan Anda?


Posted in

1 komentar:

  1. Menurut saya hindari in line style. Lebih mudah mengkordinasi semua kode di satu stylesheet css di tag header sehingga bisa gunakan kapan saja. Jadi saya menyarankan teknik class

    Sekian

    BalasHapus