Tutorial HTML – Tabel(Menengah) ini merupakan lanjutan dari tutorial HTML – Tabel(Dasar). Tutorial ini akan menambahkan pengetahuan tentang pembuatan tabel di dalam dokumen HTML. Tutorial HTML ini akan membahas tentang pengaturan jarak antar sel tabel, pembuatan kepala tabel dan sel tabel tanpa isi.

Tutorial HTML – Tabel(Menengah) – Bagian 14-2 (Bahasa Indonesia)

Sebelum kita mulai tutorial ini, saya akan memberikan sebuah contoh kode HTML. Silahkan perhatikan kode HTML berikut ini beserta hasil tampilannya:

 

Tutorial HTML - Tabel 2 - 1

Selanjutnya saya akan memulai tutorial ini dengan mengubah tampilan tabel di atas menjadi lebih lebar jarak antara sel yang satu dengan sel yang lain.

Pengaturan jarak antar sel

Jarak antar sel di dalam tabel juga dapat diatur dengan menambahkan atribut cellspacing ke dalam tag table. Atribut cellspacing dapat diisi dengan nilai jarak antar sel tabel yang diinginkan dalam satuan pixel. Silahkan perhatikan contoh kode html berikut ini:

 

Berikut ini adalah hasil tampilan yang dihasilkan setelah menambahkan atribut cellspacing pada tag table:

Tutorial HTML - Tabel 2 - 2

Penambahan atribut cellspacing pada tag table dapat digunakan untuk mengatur jarak antar sel tabel.

Sel tabel tanpa isi

Bila kita ingin mengosongkan sebuah sel di dalam tabel, saya yakin banyak di antara kita yang berpikir kosongkan saja isi sel tabel tersebut. Saya dulu awalnya juga berpikir dengan cara yang sama. Mari kita kosongkan salah satu sel tabel di atas. Berikut ini adalah kode HTML dengan mengosongkan sel yang di tengah:

 

Mari kita cermati apa yang terjadi pada hasil tampilan kode di atas.

Tutorial HTML - Tabel 2 - 3

Ternyata setelah kita lihat, sel tabel yang dihilangkan tersebut benar-benar hilang tanpa jejak. Bukan hanya isi dari sel tabel yang hilang tapi sel tabel tersebut juga ikut hilang.
Catatan: Pada aplikasi peramban tertentu kotak sel tabel akan tercetak tapi tidak semua aplikasi peramban akan mendukung cara ini.

Bagaimana caranya agar sel tabel tetap tercetak tapi isi di dalam tabel tersebut dihapus. Di sini kita harus menambahkan sebuah karakter yang tercetak tapi tidak terlihat oleh mata. Dalam hal ini mungkin sebagian dari Anda akan menjawab “spasi” tapi karakter “spasi” tidak memberikan hasil positif. Kita harus menggunakan sebuah karakter ajaib, yaitu “ ”. Mari kita lihat kode kita seperti berikut ini:

 

Kode di atas akan memberikan hasil yang benar dan stabil di semua aplikasi peramban. Kode di atas akan menghasilkan tampilan seperti berikut ini:

Tutorial HTML - Tabel 2 - 4

Kepala Tabel

Setelah kita mencermati tabel yang kita buatkan sebelumnya. Kita masih menemukan salah satu unsur yang kurang yaitu kepala tabel. kepala tabel dapat kita tuliskan dengan berbagai cara. Salah satu caranya adalah menggunakan perubahan bentuk huruf(format tulisan) seperti tutorial yang telah saya ajarkan sebelumnya. Tapi, penulisan kepala tabel menggunakan cara merubah format tulisan tidak baik secara struktur DOM(Data Object Model). Bahasa HTML telah menyediakan cara untuk menuliskan kepala tabel, yaitu menggunakan tag th.

Tag th dapat digunakan seperti tag td harus dituliskan di dalam tag tr. Cara penggunaan tag th sama persis dengan cara penggunaan tag td. Perbedaannya akan terlihat pada hasil tampilan. Mari perhatikan kode HTML berikut ini:

 

Pada kode di atas telah saya tambahkan beberapa baris kode sebagai kepala tabel. Silahkan cermati hasil tampilannya seperti berikut ini:

Tutorial HTML - Tabel 2 - 5

Kepala Tabel Pada Sebelah Kiri

Kepala tabel sebelumnya berada atas. Sekarang saya akan membuat sebuah tabel dengan kepala tabel yang berada pada sebelah kiri. Kita tetap akan meletakkannya di dalam tag tr. Sebelumnya kita membuat baris baru untuk meletakkan kepala tabel, sekarang kita akan meletakkan kepala tabel pada kolom baru. Berikut ini adalah kode HTML dengan kepala tabel berada di kiri.

 

Pada tag th pertama, saya juga menyisipkan sebuah atribut width untuk mengatur lebar kolom untuk kepala tabel. Silahkan perhatikan variasi pembuatan kepala tabel di sebelah kiri.

Tutorial HTML - Tabel 2 - 6

Dengan variasi yang ada, Anda bahkan bisa meletakkan kepala tabel di akhir tabel dan sebelah kanan tabel. Anda bebas berkreasi dengan cara Anda, Anda juga bisa membuat kepala tabel hingga lebih dari 1 lokasi.

Saya akhiri tutorial HTML – Tabel(Menengah) sampai di sini. Kita akan bertemu lagi di tutorial HTML – Tabel(Lanjut) di tutorial berikutnya.

Tutorial HTML – Tabel(Lanjut) – Bagian 14-3 (Bahasa Indonesia) – Akan segera Hadir