Ada beberapa jenis informasi yang perlu ditampilkan dalam bentuk tabel, contohnya klasmen olahraga atau sebuah jadwal layaknya kalender. Ketika kita membuat sebuah tabel, pastinya kita akan banyak bermain dengan baris dan kolom. Pada materi ini, kita akan belajar bagaimana cara membuat dan mengorganisir sebuah tabel pada HTML.
Tapi sebelum itu, apa sih sebenarnya tabel dalam HTML itu? Elemen
pada HTML merepresentasikan data tabular. Yaitu informasi yang disajikan dalam sebuah tabel. Tabel sendiri disajikan dalam dua dimensi yang terdiri dari baris dan kolom (cell) yang berisikan sebuah data. Berikut contoh data sepakbola yang disajikan dalam bentuk tabel.
Struktur Dasar Sebuah Tabel
Tabel pada HTML disusun dari tiga buah elemen, yaitu
,
dan
atau
. Elemen
digunakan untuk menandakan dimulainya dan diakhirinya sebuah konten tabel dan juga sebagai wadah untuk tabel itu sendiri. Kemudian elemen
digunakan untuk membuat sebuah baris baru yang di dalamnya terdapat elemen
atau
sehingga menghasilkan sebuah cell.
Elemen
yang berarti “table data” selain membuat cell elemen ini juga merupakan tempat di mana data pada tabel ditampung, dan elemen
atau “table header” digunakan untuk menentukan sebuah header pada kolom datanya. Untuk lebih jelasnya, perhatikan ilustrasi berikut:
Cukup mudah kan? Sekarang mari kita ubah menjadi penerapan elemen HTML.
Berdasarkan ilustrasi di atas, kita dapat menuliskan sebuah struktur dasar tabel pada HTML seperti berikut:
Pemenang Piala Dunia tiga tahun terakhir
Tahun
Juara 1
Juara 2
Juara 3
2018
Prancis
Kroasia
Belgium
2014
Jerman
Argentina
Belanda
2010
Spanyol
Belanda
Jerman
Jika dibuka pada browser, maka akan tampak seperti ini:
Yang perlu kita ingat lagi, seluruh konten atau data dituliskan pada elemen
ataupun
. Kita bisa memberikan konten apa saja di dalamnya seperti teks, gambar atau bahkan sebuah tabel lainnya.
Spanning Cell Terkadang kita membutuhkan sebuah sel yang mencakup untuk dua kolom ataupun dua baris sekaligus. Dalam aplikasi seperti Microsoft Word, hal ini biasa kita kenal sebagai merging cell atau menggabungkan sebuah sel. Ini memang menjadi sebuah fitur dasar dalam membuat sebuah tabel, sehingga pada HTML pun kita dapat melakukan hal tersebut. Pada HTML hal ini lebih dikenal sebagai Spanning cell, yang artinya menjangkau atau merentangkan sebuah ukuran sel lebih dari ukuran yang biasanya. Dengan spanning cell kita dapat membuat sebuah tabel yang lebih kompleks, tetapi akan membuat markup yang kita tulis menjadi sedikit sulit dibaca. Column Spans Untuk merentangkan sebuah kolom (column spanning) kita bisa menggunakan atribut colspan pada elemen atau . Berikut contoh untuk penggunaan colspan sehingga sebuah header mencangkup dua kolom.
18:00
19:00
20:00
Avenger Infinity Wars
It Chapter 2
One Piece: Stampede
Weathering With You
Gundala
Gundala
Avenger Infinity Wars
Maka sebuah elemen yang menggunakan atribut colspan akan mencakup ruang kolom sesuai nilai dari atribut itu sendiri. 201912061501544586e8f264cccb836cf4dcdcf9da6cd5.png Untuk lebih jelasnya, kita bisa tambahkan atribut border pada elemen agar terdapat garis pada tepi selnya.
18:00
19:00
20:00
Avenger Infinity Wars
It Chapter 2
One Piece: Stampede
Weathering With You
Gundala
Gundala
Avenger Infinity Wars
Tampilan pada browser: 201912061504091a51240590398040f6add10f9ac9c577.png Row Spans Untuk merentangkan sebuah baris (row spanning) kita dapat menggunakan atribut rowspan. Sama seperti column spanning, tetapi atribut ini akan merentangkan sebuah sel ke bawah. Berikut contohnya.
18:00
Avenger Infinity Wars
One Piece: Stampede
Gundala
Perhatikan elemen yang diberi nilai atribut rowspan. Elemen tersebut berada pada baris pertama dan akan memakan tiga baris ke bawahnya. Jadi pada baris tersebut kita membutuhkan dua buah elemen ( dan ) dan pada baris selanjutnya (baris dua dan tiga) kita hanya perlu satu buah elemen saja. Sehingga jika dilihat pada browser akan nampak seperti ini:
Site Title 