Tutorial HTML kali ini akan membahas mengenai pembuatan tabel. Pembuatan tabel agak sedikit membingungkan tapi saya akan mengajarkannya secara bertahap agar proses pembelajaran pembuatan tabel ini menjadi lebih mudah. Tabel juga merupakan suatu hal mutlak untuk dipelajari karena kita akan menjumpai banyak halaman website yang memuat tabel data bahkan ada sebagian orang memanfaatkan table sebagai kerangka pembuatan template halaman website.

Saya akan coba terangkan dengan lebih detil langkah demi langkah agar mudah dimengerti tapi tutorial ini akan menjadi sangat panjang. Oleh karena itu, tutorial HTML mengenai tabel ini akan dipecah menjadi 3 bagian karena cara penggunaan table agak berbelit dan sedikit susah dipelajari. Semoga tutorial tabel HTML ini akan menjadi lebih mudah untuk Anda pelajari.

Tutorial HTML – Tabel(Dasar) – Bagian 14-1 (Bahasa Indonesia)

Pada pembuatan tabel, kita menggunakan gabungan dari beberapa tag untuk membuat sebuah tabel, contohnya: table, tbody, thead, tfoot, tr, th dan td. Pertama-tama kita akan mempelajari cara pembuatan tabel secara sederhana. Saya akan mengajarkan tabel paling sederhana terlebih dahulu. Pada tabel yang paling sederhana kita akan menggunakan tag table, tr dan td. Kita sementara tidak akan menyentuh tag lainnya.

Tabel paling sederhana

Pada pembuatan tabel paling sederhana kita harus menggunakan 3 buah tag yang masing-masing adalah tag table, tr dan td. Mari kita lihat penjelasannya masing-masing:

  • table – membentuk sebuah tabel
  • tr – menentukan sebuah baris di dalam tabel
  • td – isi atau data dari sebuah sel di dalam tabel

Untuk lebih jelasnya tentang penggunaan tag yang disebutkan di atas kita akan langsung melihat ke dalam contoh kode HTML berikut ini:

 

Silahkan perhatikan hasil tampilannya

Tutorial HTML - Tabel Dasar - 1

Sekilas tabel di atas tidak terlihat seperti sebuah tabel. Tabel di atas malah terlihat seperti sebuah kalimat. Untuk lebih jelasnya saya akan tambahkan semua atribut border pada tag table. Berikut ini adalah kode yang saya ubah.

 

Silahkan perhatikan hasil tampilan sesudah penambahan border pada tabel.

Tutorial HTML - Tabel Dasar - 2

Nah, sekarang akan terlihat seperti sebuah tabel. Saya yakin Anda pasti berpikir tabel ini terlalu sederhana. Ya, memang sederhana tapi ini adalah langkah awal agar Anda bisa mempelajari tabel ini dengan lebih mudah.

Penambahan baris ke dalam tabel

Saya sekarang akan menambahkan lagi baris baru ke dalam table. Perhatikan kode yang saya tambahkan.

 

Pada kode di atas saya menambahkan dua baris data ke dalam tabel. Setiap baris memiliki 3 buah elemen data di dalamnya. Pada contoh di atas kita akan dengan mudah mengetahui bahwa tag tr digunakan untuk menambahkan baris ke dalam tabel dan tag td untuk menambahkan data atau sel tabel dengan suatu baris. Berikut ini adalah hasil tampilan dari kode HTML di atas:

Tutorial HTML - Tabel Dasar - 3

Pada hasil screenshot di atas kita akan mengetahui bahwa tabel yang tercetak dengan 3 baris dan 3 kolom. Masing-masing sudah terisi dengan data tapi tabel tersebut terlihat tidak rapi karena lebar setiap kolom tidak sama. Kita melihat kolom yang ke-dua merupakan kolom paling sempit. Bila lebar kolom tidak diatur maka lebar kolom akan menyesuaikan dengan panjang data terpanjang di dalam kolom tersebut. Hal ini bisa kita lihat pada kolom ke 3. Kolom ke-tiga merupakan kolom terlebar karena kolom ini menyesuaikan lebarnya terhadap data terpanjang, yaitu “sawi hijau” yang terletak pada baris ke 3 dan kolom ke 3.

Pengaturan lebar kolom tabel

Lebar kolom pada tabel dapat diatur dengan menambahkan atribut width pada tag td. Namun penambahan atribut width pada tag td tidak perlu dilakukan pada setiap tag td. Atribut width pada tag td hanya perlu dilakukan sekali pada salah satu kolom. Lebar kolom tabel akan mengikuti setelah pengaturan sudah dilakukan. Mari kita simak kembali kode HTML berikut ini yang sudah diubah pengaturan lebar kolomnya.

 

nilai atribut width saya berikan 100 artinya 100 pixels. Saya hanya berikan atribut pada baris pertama dan selanjutnya saya tidak berikan atribut width pada tag td baris selanjutnya. Dengan pemberian atribut width 1 kali saja sudah cukup pada sebuah kolom. Anda juga bisa memberikan atribut tag pada baris lain selain baris pertama dan hasilnya akan sama. Mari kita lihat hasil tampilan dari kode HTML di atas.

Tutorial HTML - Tabel Dasar - 4

Pengaturan tinggi baris tabel

Selain lebar kolom tinggi baris juga dapat diatur. Pengaturan tinggi baris dapat dilakukan dengan cara memberikan atribut height pada tag tr atau salah satu tag td pada baris yang ingin diatur tingginya. Perhatikan contoh berikut ini:

 

Kemudian coba perhatikan hasil tampilan HTML berikut ini:

Tutorial HTML - Tabel Dasar - 5

Setelah dibandingkan kita akan mengetahui kita bisa melakukan salah satu cara yang paling kita sukai dan hasilnya akan sama. Kita bisa memasangkan atribut height pada tag tr maupun td pada baris yang kita inginkan.

Pengaturan posisi tulisan

Penganturan posisi tulisan atau isi di dalam tabel juga dapat dilakukan pada setiap sel tabel yang kita inginkan. Pengaturan posisi tulisan dapat diatur dari dua arah, baik secara horisontal dan secara vertikal. Gunakan atribut align untuk mengatur posisi tulisan secara horisontal dan atribut valign untuk mengatur posisi tulisan secara vertikal. Perhatikan cara pengisian atribut berikut ini:

Atribut Nilai Penjelasan
align left posisi tulisan kiri(rata kiri)
align center posisi tulisan tengah(antara kiri dan kanan)
align right posisi tulisan kanan(rata kanan)
valign top posisi tulisan atas
valign middle posisi tulisan tengah(antara atas dan bawah)
valign bottom posisi tulisan bawah

Mari kita uji coba melalui kode berikut ini:

 

Kode di atas akan menghasilkan tampilan seperti di bawah ini:

Tutorial HTML - Tabel Dasar - 1

Setelah Anda bandingkan hasil tampilan di atas dengan kodenya, Anda akan mengetahui bawah bila Anda melakukan pengaturan melalui tag tr maka seluruh baris tersebut akan mendapatkan efek yang sama. Bila Anda mengatur pada tag td maka sel tabel yang bersangkutan yang akan mendapatkan efek pengaturan tersebut.

Ok, setelah kita testing kode selama berkali-kali di dalam tutorial ini. Kita akan mengakhiri sesi Tutorial HTML – Tabel(Dasar). Kita akan lanjutkan lagi ke Tutorial HTML – Tabel(Menengah).

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