Cara Mendesain Table dengan CSS

Pada tutorial ini kita akan mencoba cara untuk mendesain table dengan menggunakan CSS. Asal tau saja, kalau table yang hanya dibuat dari HTML dan tidak ada style CSS nya sama sekali, maka table itu hanya kerangkanya saja dan rupanya pun juga tidak menarik sehingga kemampuan untuk membaca data (readability) yang ditampilkan dengan table ini menjadi tidak maksimal. Nah di bawah ini saya berikan pemakaian CSS yang biasa digunakan untuk untuk mendesain table.

Table Border Collapse

Umumnya table yang tidak di kolapse bordernya akan tampil seperti ini….

mendesain table dengan css

Dan bandingkan hasilnya, dengan yang memakai border-collapse di bawah ini, tentu lebih rapi bukan…??

Di bawah ini adalah contoh kode sumbernya :

Table Collapse

Mendesain Ukuran Table

Terkadang, ukuran table tidak sesuai dengan keinginan.

Terkadang kita ingin ukuran table ini full layout, namun kadang juga ingin lebih kecil dari itu sesuai ukuran wrappernya (pembungkusnya). Dalam kasus ini, anda dapat menanganinya dengan merubah ukurannya menggunakan CSS.

Dalam kode sumber di bawah ini, saya menggunakan satuan ukuran persen (%). Dan full width.

D i bawah ini adalah contoh kode sumber…

Dan di bawah ini adalah hasilnya :

mendesain table dengan css

Dengan menggunakan satuan ukuran persen, hasil dari objek tersebut akan bersifat dinamis (berubah2), yakni sekalipun anda memperbesar/memperkecil ukuran browser, ukuran objek tersebut akan menyesuaikannya. Sekarang coba anda rubah ukuran browser, dan lihat hasilnya…

Namun, bandingkan hasilnya dengan menggunakan satuan ukuran pixel. Disini saya setting width:400px dan ukuran browser saya perkecil.

merubah ukuran table

Maka hasilnya table akan melewati batas layar browser. Tentu hasilnya pun juga tidak akan bagus pada smartphone / tablet.

Lalu, satuan ukuran mana yang akan kalian gunakan…??

Lebih baik sesuaikan dengan kebutuhan anda, jika saya lebih senang menggunakan satuan ukuran persen

Mengatur Margin dan Padding Table

Anda dapat mengatur jarak bagi Table terhadap layar browser, atau Table terhadap elemen yang ada di dalamnya….

Jika jarak Table terhadap layar, jarak ini dikenal dengan nama Margin.

Jika jarak elemen – elemen Table terhadap batas – batasnya, dikenal dengan nama Padding.

Mendesain Table dengan CSS

Contoh kode sumber Padding…

Hasil dari kode sumber di atas :

Padding pada Table

Perhatikan gambar di atas, dimana elemen Baris x, Kolom x memerikan jarak terhadap sisi atas dan kirinya. Karena dalam pengaturan PADDINGNYA yang saya setting adalah padding-top, dan padding-left.

Contoh kode sumber Margin…

Dan di bawah ini adalah hasilnya ”

Margin pada Table

Perhatikan gambar di atas, dimana pengaturan pada Margin ini akan menentukan tata letak objek terhadap Layar. Pada bagian atas objek yang beri jarak Margin sejauh 200px, sedangkan pada bagian kiri objek saya beri jarak Margin sejari 100px. Dan hasilnya seperti gambar di atas dimana juga saya setting zoom Layar adalah 100%.


Demikian tutorial dari cara mendesain table dengan CSS. Silahkan kunjungi tutorial lainnya seperti padding, font pada css, dan box model.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us