Tutorial HTML- Tabel(Lanjut) ini merupakan tutorial bagian akhir mengenai pembuatan tabel. Tutorial ini kita akan membahas tentang pengelompokan kepala tabel, kaki tabel dan penggabungan sel tabel. Tutorial penggabungan sel tabel akan terlihat lebih sulit karena kita harus menghitung sel tabel dengan cermat. Tapi tidak perlu khawatir karena saya akan mencoba menjelaskannya dengan jelas dan secara perlahan. Mari kita mulai tutorial HTML – Tabel (Lanjut).

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

Kita akan meneruskan tutorial sebelumnya mengenai kepala tabel. Kepala tabel pada tutorial sebelumnya dituliskan ke dalam baris tabel. Sekarang kita akan memisahkan kepala tabel secara tersendiri. Namun, kepala tabel pada kolom tabel tidak dapat dipisahkan dan tetap harus menggunakan kolom tabel sebagai kepala tabel. Pada tutorial ini saya akan memperkenalkan 3 tag baru lagi, yaitu thead, tbody dan tfoot.

Pengelompokan kepala tabel

Pada tutorial kali ini, kita akan mengelompokkan kepala tabel menggunakan tag tambahan, yaitu thead. Isi tabel yang seperti biasanya kita tuliskan seperti tag tr dan td akan kita kelompokkan ke dalam tag tbody. Penggunaan thead dan tbody akan membuat kode html kita lebih terorganisir karena thead akan berisi kepala tabel dan tbody hanya akan berisi data yang akan ditampilkan. Silahkan perhatikan kode berikut ini:

Cara sebelumnya:

 

Cara Sekarang:

 

kedua kode di atas akan menghasilkan tampilan yang sama seperti di bawah ini:

Tutorial HTML - Tabel - 01 - kepala tabel

Kode di atas saya memberikan pengaturan width di dalam thead. Bila pengaturan width diberikan pada salah satu baris tabel di dalam tbody, hasilnya juga akan sama.

Kaki tabel

Kepala tabel juga dapat dikelompokkan menjadi bagian Kaki tabel. Pengelompokan ini dapat menggunakan tag tfoot. Cara penggunaan tag ini sama persis dengan cara penggunaan tag thead, hanya letaknya saja yang berbeda. Tag tfoot diletakkan setelah tbody atau pada bagian akhir dari table. Silahkan perhatikan kode berikut ini:

 

Berikut ini adalah hasil tampilan dari kode di atas:

Tutorial HTML - Tabel - 02 - kaki tabel

Penggabungan sel tabel

Kini kita masuk ke bagian yang saya katakan paling susah. Tapi bagian ini tidak terlalu rumit bila kita susah mengerti dengan konsep dasarnya. Saya akan pecah tutorial ini menjadi 3 bagian dan kita akan melalui tahapan ini secara bertahap.

Tutorial ini saya akan membimbing Anda untuk membuat sebuah tabel yang hasil akhirnya seperti berikut ini:

Tutorial HTML - Tabel - 06 - Penggabungan Sel

 

Sebelumnya kita akan membuat sebuah tabel 5 x 5 untuk pembelajaran ini. Berikut ini adalah kodenya:

 

Ini adalah tampilan dari kode HTML tabel 5 x 5 di atas:

Tutorial HTML - Tabel - 03 - tabel 5x5

 

Pada tabel di atas saya berikan koordinat agar lebih mudah dimengerti. Cara membaca koordinat di atas adalah (baris, kolom). Komponen koordinat yang pertama adalah baris dan kemudian disusul dengan kolom.

Penggabungan sel tabel horisontal

Sekarang kita akan coba sel tabel secara horisontal. Penggabungan kolom sel akan meliputi penhapusan tag td dan menambahkan atribut colspan ke dalam sel awal.

Kita akan mencoba menggabungkan sel (1, 2), sel (1, 3) dan sel (1, 4) menjadi sebuah sel tunggal. Dalam hal ini, saya akan menambahkan atribut colspan ke dalam sel (1, 2). Saya akan menuliskan atribut colspan=”3″ dan nilai 3 tersebut adalah nilai jumlah sel yang akan tergabung menjadi 1. Selanjutnya saya akan menghapus tag td untuk sel (1, 3) dan sel (1, 4). Saya juga akan mengganti isi sel (1, 2) menjadi 1, 2 – 1, 4. Silahkan perhatikan kode berikut ini:

 

Kode di atas akan menghasilkan tampilan berikut ini:

Tutorial HTML - Tabel - 04 - Penggabungan Sel

Penggabungan sel tabel vertikal

Sekarang kita akan menggabungkan sel tabel secara horisontal. Cara penggabungan sel tabel vertikal mirip dengan cara penggabungan sel tabel horisontal. Cara penggabungan sel vertikal bukan menggunakan atribut colspan melainkan atribut rowspan.

Selanjutnya, kita akan menggabungkan sel tabel (2, 5), (3, 5), (4, 5) dan (5, 5). Untuk menggabungkan keempat sel ini, saya akan menambahkan atribut rowspan=”4″ pada sel(2, 5). Angka 4 digunakan untuk menandakan jumlah sel yang digabungkan adalah sebanyak 4 buah. Setelah itu, saya akan menghapus tag td untuk sel (3, 5), (4, 5) dan (5, 5). Saya juga akan menambahkan atribut valign=”middle” agar tampilan di dalam sel tabel tergabung menjadi lebih rapi. Saya juga akan menggantikan isi tabel tergabung tersebut menjadi 2, 5 – 5, 5 untuk menandakan penggabungan sel tabel tersebut. Silahkan perhatikan kode lengkapnya sebagai berikut:

 

Kode di atas akan menggabungkan sel di kolom ke 5 seperti berikut ini:

Tutorial HTML - Tabel - 05 - Penggabungan Sel

Penggabungan sel tabel horisontal dan vertikal

Sekarang saatnya kita menggabungkan kedua teknik di atas. Kita akan menggabungkan sel (2, 2), (2, 3), (2, 4), (3, 2), (3, 3), (3, 4), (4, 2), (4, 3), (4, 4), (5, 2), (5, 3) dan (5, 4) menjadi sebuah sel besar. Dalam hal ini kita akan mengabungkan sel sebanyak 3 kolom dan 4 baris. Kita harus menambahkan atribut colspan=”3″ dan rowspan=”4″ pada sel (2, 2) untuk menggabungkan semua sel tersebut. Kemudian kita akan menghapus semua tag td semua sel tergabung, di antaranya: (2, 3), (2, 4), (3, 2), (3, 3), (3, 4), (4, 2), (4, 3), (4, 4), (5, 2), (5, 3) dan (5, 4). Kita juga akan mengganti isi sel (2, 2) menjadi 2, 2 – 5, 4 untuk menandakan penggabungan sel tersebut. Selanjutnya tambahkan atribut valign=”middle” pada sel (2, 2) untuk merapikan tampilan isi sel. Mari kita lihat kode hasil penggabungan yang dilakukan:

Kode di atas akan menghasilkan tampilan seperti yang kita harapkan.

Tutorial HTML - Tabel - 06 - Penggabungan Sel

 

Anda di sini harus mencermati bahwa tag tr untuk baris ke 3, 4 dan 5 hanya mengandung 1 buah tag td. Bila Anda diminta untuk membaca tampilan pada kode yang terakhir ini tanpa melihat tampilannya, saya yakin sebagian dari Anda akan kesulitan membaca kode di atas. Saya mencoba menyederhanakan tutorial ini agar Anda akan mudah memahami. Saya sendiri mengakui bahwa bila saya sendiri diminta untuk membaca kode HTML untuk tabel yang mengalami beberapa penggabungan sel, Saya sendiri akan mengalami kesulitan. Namun, Anda tidak perlu terlalu banyak khawatir karena kita akan banyak belajar sejalan dengan praktek yang kita lakukan nantinya.

Kita akan lanjut ke tutorial Form
Tutorial HTML – Form – Bagian 15-1 (Bahasa Indonesia)