Hendry Muda Rangkuti: Tabel Pada HTML

Selamat pagi,
Pada postingan kali ini kita akan belajar tentang Tabel, tidak usah banyak basi-basi langsung saja simak dibawah ini.

Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag <table>.

<table></table>

Untuk membuat baris tabel, kita gunakan tag <tr> - singkatan dari table row (ditulis di dalam tag table)

<table>
<tr></tr>
</table>

Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td> (table data) yang digunakan di dalam tag <tr>.

Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut colspan (untuk merge horizontally-secara horizontal) atau rowspan (untuk merge vertically).

Jika anda tampilkan dalam browser, maka tabel tersebut tidak akan memiliki garis, untuk memberi garis pada tabel anda dapat menambahkan atribut border=1 pada tag <table> atau anda dapat menambahkan border lewat CSS nantinya.

 Sebagai latihan, anda tulis kode tabel di atas dan tambahkan beberapa data lagi, lalu sempan file latihan7.html.


Struktur Tabel yang Dianjurkan

Agar format tabel sesuai dengan ketentuan, anda dapat menggunakan tag <thead> untuk baris yang menjadi Judul tabel, <tbody> untuk data/isi dari tabel dan <tfooter> untuk kaki tabel (diisi dengan thead atau lainnya).

Kesalahan dalam penggunaan <table>

Tag table digunakan untuk memformat data tabular/data yang membutuhkan format tabel dalam menampilkannya, seperti contoh penggunaan tabel untuk menampilkan data nilai berikut :

Masih banyak yang menggunakan tabel keperluan layouting sebuah website, misalnya menggunakan tag table untuk membuat kayout 2 kolom, 3 kolom, atau 4 kolom seperti contoh berikut :

Penggunaan tag <table> untuk keperluan layout adalah menyalahi aturan/fungsi dari tag table tersebut.

Layout table biasanya dibuat secara otomatis oleh aplikasi Dreamwaver atau Photoshop (di-generate oleh slicing tool).

Baiklah, demikian dulu pembelajaran kita kali ini.