Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

Cara Membuat Table dengan HTML

Kali ini aku akan mengajak teman-teman untuk belajar cara membuat table dengan HTML. Tulisan ini merupakan lanjutan dari tulisanku sebelumnya tentang Belajar HTML dengan Mudah. Table dalam HTML terdiri dari beberapa baris (row), dan setiap baris terdiri dari beberapa kolom atau cell. Sebuah table selalu dibuka dengan <table> dan ditutup dengan </table>. Untuk membuat row kita menggunakan <tr></tr> dan untuk membuat kolom kita menggunakan <td></td>.

LIHAT DEMO

Untuk lebih jelasnya, perhatikanlah contoh kode berikut ini:

Kode html diatas akan menghasilkan sebuah table tanpa border. Ukuran kolom pada table mengikuti ukuran isi terpanjang. Kurang lebih seperti inilah hasilnya.

Hasil Table HTML - Cara Membuat Table dengan HTML

Hasil Table HTML

Penggunaan Border dan Width – Cara Membuat Table dengan HTML

Apakah hasil di atas kurang menarik? Kalau kurang menarik, kita bisa membuatnya lebih menarik dengan cara menambahkan border pada table yang kita buat. Caranya adalah dengan menambahkan attribute “border=1″ pada table. 1 pada border tidak mengartikan ketebalan. Tapi, mengartikan YA. Jika kita memberikan attribute border=”0″ maka ini artinya table tidak memiliki border. Kita juga bisa mengatur lebar table dengan menggunakan attribute width. Misalkan kita gunakan attribute width=”100%” table yang kita buat lebarnya akan seluas halaman web. Berikut contoh penggunaan border dan width.

Jika kode diatas kita terapkan untuk table sebelumnya, maka hasilnya akan menjadi seperti ini:

Hasil Pengaturan Table - Cara Membuat Table dengan HTML

Hasil Pengaturan Table

Penggunaan cellspacing dan cellpadding – Cara Membuat Table dengan HTML

Kalau kita lihat, ternyata antar cell di table memiliki jarak. Kita bisa mengatur jarak atar cell dengan cara menambah attribute cellspacing. Nah, kalau untuk mengatur agar tulisan tidak terlalu mepet dengan garis, kita bisa gunakan attribute cellpadding. Untuk cellspacing dan cellpadding kita bisa menggunakan ukuran pada nilai attributenya. Misalnya seperti ini.

Jika kita menerapkan cellpadding dan cellspacing seperti di atas, maka hasilnya seperti ini:

Penerapan cellpadding dan cellspacing - Cara Membuat Table dengan HTML

Penerapan cellpadding dan cellspacing

Kita juga bisa menghilangkan cellspacing dengan cara mengatur nilai attributnya menjadi 0 (cellspacing=”0″). Berikut ini hasilnya.

penerapan cellspacing 0 - Cara Membuat Table dengan HTML

penerapan cellspacing 0

Rowspan dan Colspan (Merge Cell) – Cara Membuat Table dengan HTML

Kalau di MS. Excel kita mengenal merge cell. Apakah di table ini kita juga bisa menerapkan merge cell, tentu bisa dong. Kita akan menggunakan rowspan untuk menggabung ke bawah dan colspan untuk menggabung ke kanan. Berikut ini contohnya.

Berikut ini adalah hasil dari contoh kode di atas

Contoh Penggunaan Colspan dan Rowspan - Cara Membuat Table dengan HTML

Contoh Penggunaan Colspan dan Rowspan

Penggunaan thead, tbody dan tfoot

thead, tbody dan tfoot digunakan untuk mengelompokkan baris (row). Setiap baris yang kita taruh dalam thead akan selalu berada di atas sebagai kepala table. Sedangkan yang kita taruh di tfoot akan selalu berada di bawah sebagai footer table. Dan yang kita taruh di tbody akan selalu berada di bawah kepala table. Beginilah contohnya.

Pada contoh di atas, ada kode th. Kode th ini menggantikan td. Jika dengan td kita mendapat cell standar, maka dengan th cell otomatis berubah menjadi kepala table yang secara default hurufnya tebal dan text alignment-nya di tengah. Pada contoh di atas aku juga menaruh thead di bawah dan tfoot ditengah. Supaya teman-teman tahu bahwa dimanapun kita meletakkan kode dia akan menyesuaikan. Beginilah hasil table dari kode HTML di atas.

contoh penggunaan thead, tbody dan tfoot

contoh penggunaan thead, tbody dan tfoot

 

Penutup Cara Membuat Table dengan HTML

Sekian dulu ya materi tentang Cara Membuat Table dengan HTML. Ternyata membuat table dengan HTML itu tidaklah sulit. Benar kan? Informasi dari w3schools.com mengatakan bahwa cellpadding dan cellspacing sudah tidak berlaku lagi di html 5. Percobaan kali ini ternyata masih bisa digunakan. Untuk html 5 lebih banyak menggunakan css dibandingkan dengan attribute. Selamat belajar ya teman-teman. Semoga tulisan ini bermanfaat.