Tabel pada HTML mirip dengan tabel yang biasa kita buat pada Microsoft Word, Excel ataupun Power Point. Di bagian tengah layar ini kita bisa melihat contoh tabel data karyawan, yang berisi nama, umur dan jabatan dari 3 orang karyawan.

Bagian horizontal dari tabel disebut Row atau Baris. Jadi disini kita lihat bahwa Budi, 35, dan Direktur adalah satu baris. Perhitungan baris biasanya dimulai dari atas ke bawah. Jadi Budi, 35 dan Direktur adalah baris pertama. Sedangkan Dewi, 28, Manajer adalah baris kedua. Dan Ahmat, 22, Teknisi adalah baris ketiga.

Sedangkan bagian vertikal dari tabel disebut Column atau Kolom. Dan biasanya kolom dihitung dari kiri ke kanan. Jadi contoh yang kita lihat disini Budi, Dewi dan Ahmat adalah kolom pertama. Berikutnya 35, 28 dan 22 adalah kolom kedua. Dan yang terakhir Direktur, Manajer dan Teknisi adalah kolom ketiga.

Satu bagian dari tabel disebut dengan nama Table Data atau Cell. Dalam tabel ini kita bisa mendapatkan 9 buah table data atau Cell. Jadi disini bisa dilihat bahwa Budi adalah satu cell, dan kemudian 35 adalah satu cell lagi, dan seterusnya.

Biasanya tabel juga dilengkapi dengan Header untuk menerangkan maksud dari datanya. Pada contoh disini, header dari tabel dituliskan secara horizontal, atau menggunakan baris pertama.

Contoh berikutnya adalah header yang ditulis secara vertikal, atau menggunakan kolom pertama dari tabel.

Dan ada juga tabel yang menggunakan dua header sekaligus, satunya ditulis secara horizontal, dan satunya lagi ditulis secara vertikal. Seperti contoh yang bisa kita lihat disini adalah tabel jam kerja dari karyawan.

Sekarang kita mulai coding. Disebelah kiri, saya sudah membuatkan file baru dengan nama table.html dan sudah saya isikan dengan Boilerplate. Jadi kita bisa langsung fokus ke bagian body. Dan kita akan membuat tabel seperti contoh di sebelah kanan. Kita akan mulai dengan tabel pertama.

Untuk membuat sebuah tabel, kita menggunakan tag table. Ingat ya, table dalam bahasa Inggris, jangan salah menuliskan tabel dalam bahasa Indonesia karena tidak akan dikenal oleh browser.

Selanjutnya di dalam tabel, kita tambahkan tag TR yang singkatan dari Table Row, artinya kita membuat baris pertama. Ingat bahwa aturan penulisan baris kita mulai dari atas ke bawah. Kalau kita lihat baris pertama pada contoh tabel disebelah, artinya kita sedang menuliskan baris paling atas yang isinya Budi, 35, Direktur.

Di dalam tag TR, kita tambahkan tag TD, singkatan dari Table Data. Artinya kita akan menuliskan isi dari masing-masing cell di dalam tabel, yang berada di dalam baris pertama. Di dalam baris pertama ada 3 buah cell ya, berarti kita membuat TD pertama untuk Budi. TD kedua untuk 35. Dan TD ketiga untuk Direktur.

Kita simpan dan kita coba lihat hasilnya. Di browser sebenarnya sudah ada sebuah tabel, hanya saja karena belum ada garisnya jadi kita melihat bentuknya seperti konten biasa. Kita tambahkan attribute border=”1” pada tag table. Kita refresh browser. Dan kita bisa melihat tabel yang kita buat sudah memiliki kotak, yang bentuknya seperti situs lama di tahun 90-an. Perlu diingat bahwa sekarang attribute border sudah tidak digunakan lagi ya, karena kita bisa membuat kotak yang bentuknya jauh lebih menarik dengan menggunakan css.

Kita kembali ke kode kita. Dan kita tambahkan tr untuk baris kedua. Kita isikan TD-nya dengan Dewi, 28, dan Manajer. Lalu kita tambahkan lagi tr untuk baris ketiga. Dan kita isikan TD dengan Ahmat, 22, dan Teknisi.

Kita tambahkan dahulu header 3 sebelum Table dan kita beri judul Contoh Tabel 1. Kita refresh browser dan kita sudah mendapatkan tabel yang sesuai dengan contoh.

Kita lanjutkan ke contoh tabel kedua. Kalau kita bandingkan dengan tabel pertama, perbedaannya hanya pada tabel kedua terdapat header pada baris paling atasnya. Kita akan belajar mengenai cara menambahkan header pada tabel.

Pertama kita copy dahulu kode dari tabel pertama, dimulai dari headernya hingga ke penutup tag table. Lalu kita ubah judulnya menjadi Contoh Tabel Dua. Kita hendak menambahkan baris yang berada di paling atas, maka kita menambahkan tag TR langsung setelah tag pembuka table. Berhubung yang kita tambahkan disini adalah header dari tabel, maka kita tidak menggunakan tag TD, melainkan menggunakan tag TH yang singkatan dari Table Header. Kita tambahkan tiga buah TH, yang pertama TH Nama, lalu TH Umur, dan yang terakhir TH Jabatan.

Kita refresh browser, dan sekarang kita sudah mendapatkan tabel kedua yang sesuai dengan contoh.

Selanjutnya kita akan belajar mengenai elemen thead dan tbody dari tabel. Mirip dengan tag HTML yang sudah kita pelajari sebelumnya, kalau di dalam tag HTML kita harus mengisikan dengan tag head dan tag body. Sedangkan kalau di dalam tag table, kita bisa menambahkan tag thead, dan tag tbody. Tag thead akan diisikan dengan baris header, dalam tabel kita adalah baris pertama yang isinya menggunakan tag TH. Sedangkan tag tbody diisikan dengan baris yang isinya data, yang menggunakan tag TD.

Jadi struktur dari tag table yang benar adalah seperti ini. Dan kalau kita refresh di browser, kita bisa lihat hasilnya adalah sama ya. Kalau begitu, sekarang pertanyaannya adalah apa gunanya menggunakan thead dan tbody? Seperti yang sudah saya jelaskan sebelumnya, di dalam HTML 5, kita sangat menekankan bahwa HTML adalah struktur dari konten. Jadi dengan menambahkan tag thead dan tbody di dalam tabel, kita menjelaskan struktur dari tabel kita, ini bagian kepalanya, dan ini adalah bagian badannya. Dan struktur ini akan sangat berguna bagi software yang sedang membaca kode HTML kita, seperti browser, atau software pembaca konten otomatis, ataupun software lainnya. Mereka akan lebih aware terhadap keberadaan table header, sehingga dapat menyesuaikan fungsinya.

Kegunaan lain dari tag thead dan tbody adalah untuk keperluan kita sendiri sebagai front end developer. Nantinya setelah mempelajari css dan javascript, mungkin saja ada kebutuhan kita untuk menunjuk bagian-bagian tertentu dari tabel kita. Misalnya, kita mau memasang horizontal scroll bar, tapi hanya di bagian badan saja. Sedangkan kita mau bagian kepala tabel tetap terus kelihatan walaupun kita sedang scroll ke bagian bawah. Untuk mengimplementasikan kode seperti ini, kita akan memerlukan tag thead dan tbody.

Selanjutnya kita akan membuat contoh tabel ketiga. Kita bisa lihat di contoh bahwa tabel ini menggunakan header secara vertikal, yang berada di kolom pertama. Kita buat dahulu tag header 3 dengan isi Contoh Tabel 3. Setelah itu kita buat tag table.

Cara membuat tabel seperti ini tetap sama dengan cara membuat tabel lainnya ya. Kita tetap membuat TR terlebih dahulu dan isi TR pertama adalah baris paling atas. Bisa kita lihat di contoh tabel, bahwa isi baris pertama kolom pertama adalah headernya dengan konten Nama. Maka kita tambahkan TH Nama. Setelah itu diikuti dengan TD Budi, TD Dewi dan TD Ahmat.

Kemudian kita tambahkan TR untuk baris kedua. Isinya yang pertama adalah TH Umur. Lalu TD 35, TD 28, TD 22.

Dan kita tambahkan TR terakhir yang isinya TH Jabatan, TD Direktur, TD Manajer, dan TD Teknisi.

Perhatikan disini bahwa untuk header vertikal, kita tidak bisa menggunakan thead dan tbody ya. Hal ini disebabkan karena cara menuliskan tabel harus berdasarkan baris dari atas ke bawah. Sedangkan header kita berada di dalam setiap barisnya.

Kita refresh browser dan kita lihat hasilnya. Masih kurang garis. Kita tambahkan attribute border=”1” pada tag table. Sekarang sudah sesuai ya.

Selanjutnya kita akan membuat contoh tabel keempat. Di layar bisa kita lihat bahwa tabel keempat memiliki dua header ya, header horizontal pada baris pertama dan header vertikal pada kolom pertama.

Nah, untuk latihan dari materi ini, silahkan paused terlebih dahulu video ini dan coba untuk membuat tabel keempat, kelima dan keenam. Sebagai bocoran, di tabel kelima kita akan meggunakan attribute colspan, sedangkan di tabel keenam kita akan meggunakan attribute rowspan. Silahkan paused dahulu dan coba kerjakan sendiri. Saya akan kembali lagi untuk mengajarkan solusinya.

Oke, sekarang kita akan membahas mengenai cara membuat tabel keempat. Pertama kita tambahkan dahulu header 3 dengan isi Contoh Tabel 4. Lalu kita buat tag table. Dan tag thead.

Kita tambahkan TR. Dan kita isikan dan 4 buah TH, yang pertama adalah TH kosong, lalu diikuti dengan TH Budi, TH Dewi dan TH Ahmat.

Lalu kita pergi ke setelah penutup tag thead. Kita tambahkan tag baru tbody. Dan kita tambahkan TR untuk baris kedua. Kolom pertama dari baris kedua adalah header dengan konten Senin, jadi kita tambahkan dahulu TH Senin. Setelah itu kita tambahkan TD 08:30-17.30. Lalu TD yang sama 08:30-17.30. Dan yang terakhir TD 13.30-21.30.

Kita copy TR Senin, dan kita Paste sebanyak 4 kali. Lalu kita ubah TR ketiga, bagian headernya menjadi Selasa. Lalu kolom ketiganya kita ubah menjadi libur. Kita langsung menuju TR keempat, header menjadi Rabu. Lalu ke TR kelima dan header menjadi Kamis, kolum kolom menjadi Libur. Dan kita ubah TR terakhir, headernya menjadi Jumat.

Tabel sudah selesai. Dan kita lihat hasilnya di browser.

Selanjutnya kita membuat tabel kelima. Bisa kita lihat contohnya di layar. Tabel kelima ini akan menggunakan attribute colspan, yang fungsinya untuk menggabungkan beberapa kolom menjadi satu cell. Kalau kita perhatikan lagi bagian header Telepon ini sebenarnya menggunakan 2 kolom yang digabungkan menjadi satu. Begitu juga kalau kita melihat ke baris ketiga, yaitu nomor telepon dari Dewi.

Untuk membuat tabel seperti ini, pertama kita tambahkan dahulu Header 3 dengan konten Contoh Tabel 5. Lalu kita buat tag Table. Dan Thead. Kita tambahkan TR untuk baris pertama. Dan kita tambahkan TH pertama Nama, lalu TH kedua Umur. TH ketiga adalah gabungan dari 2 kolom. Oleh karena itu kita tambahkan tag TH dengan attribute colspan=”2”, yang isinya Telepon.

Setelah itu seperti biasa kita tambahkan tbody dan TR untuk mengisikan data pada tabel. Baris kedua kita isikan dengan TD Budi, TD 35, TD 021 dan TD 0811.

Selanjutnya kita membuat TR ketiga. Isinya TD Dewi, lalu TD 28. Dan untuk data ketiga, berhubung kita perlu menggabungkan dua kolom menjadi satu cell, maka kita membuat TD dengan attribute colspan=”2”. Dan kita isikan kontennya 022.

Dan TR terakhir isinya seperti biasa. TD Ahmat, TD 22, TD 023 dan TD 0813.

Tabel sudah selesai dan kita lihat hasilnya pada browser.

Sekarang kita membahas mengenai tabel keenam. Tabel keenam sebenarnya sama dengan tabel kelima, hanya saja kita putar dari tadinya horizontal menjadi vertikal. Jadi yang tadinya menggunakan colspan, sekarang menjadi rowspan karena kita menggabungkan beberapa baris menjadi satu cell. Namun untuk menuliskan kode tabelnya akan sedikit lebih rumit dibandingkan tabel kelima.

Pertama kita buat dahulu header tiga dengan konten Contoh Tabel 6. Lalu kita buat tag Table. Kita tambahkan TR untuk baris pertama, dan kita isikan kontennya dengan TH Nama, TD Budi, TD Dewi dan TD Ahmat.

TR kedua isinya juga sama seperti yang telah kita pelajari. Kita tambahkan TH Umur, TD 35, TD 28, dan TD 22.

TR ketiga sedikit lebih rumit. Karena kolom pertama yang merupakan headernya menggabungkan 2 baris menjadi satu cell. Dan kolom ketiga juga menggabungkan 2 baris menjadi 1 cell. Jadi pertama kita buat dahulu TH dengan attribute rowspan=”2”, dan kita isi dengan Telepon. Lalu kita buat TD 021. Dan kita buat lagi TD dengan attribute rowspan=”2”, dan kita isi dengan 022. Dan terakhir kita buat TD 023.

Kita lanjutkan dengan TR keempat. Namun disini kita hanya mengisikan 2 TD saja ya, yaitu nomor telepon Budi dan Ahmat. Jadi kita tambahkan TD 0811 dan TD 0813.

Tabel sudah selesai dan kita lihat hasilnya di browser.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.