Belajar Bikin Tabel di HTML5

Tabel merupakan wadah yang cocok untuk keperluan pemaparan data dalam sebuah dokumen. Sebagai sebuah berkas dokumen, tentu saja HTML5 mendukung pembuatan tabel. Bahkan dalam kasus tertentu, tabel bisa juga digunakan untuk mengatur tata letak (lay out) dokumen. Namun semenjak dikembangkan CSS, tabel sudah ditinggalkan sebagai pengatur tata letak dokumen dan difokuskan hanya untuk memaparkan data saja. Penyusunan tabel dalam dokumen HTML ditandai dengan tag <table> dan diakhiri dengan tag penutupnya </table>.

t06-434-html5-gb0Seperti kita ketahui bersama, tabel terdiri dari sel-sel yang tersusun atas baris dan kolom. Dalam pembuatan tabel HTML, yang disusun pertama kali adalah baris terlebih dahulu, baru kemudian dinyatakan kolom-kolomnya. Pembuatan baris dinyatakan dengan tag <tr> dan pembuatan kolom dinyatakan dengan tag <td>. Setiap penggunaan tag tersebut harus diakhiri dengan tag penutup masing-masing, yaitu </tr> dan </td>. Teks yang dituliskan di antara suatu tag <td> dan </td> merupakan isi suatu sel tabel.

Nah, tanpa berpanjang kata mari kita coba terapkan cara pembuatan tabel tersebut. Listing 1 (file table1. html) menunjukkan contoh pembuatan tabel yang memiliki 3 baris dan 4 kolom. Perhatikan bahwa setelah deklarasi tabel dengan tag <table>, dibuat satu baris sel dengan tag <tr> lalu baris tersebut diisi dengan empat kolom yang ditandai dengan empat pasang tag <td> dan </td>. Setelah empat kolom dibuat, baris ditutup dengan tag </tr>. Langkah pembuatan baris ini dilakukan hingga tiga kali. Setelah semua tersusun, pembuatan tabel ditutup dengan tag </table>.

Oh ya, ternyata masih ada satu hal lagi yang mesti jadi perhatian. Tag <table> dinyatakan dengan atribut border=”1”. Mengapa harus demikian? Ternyata bila atribut tersebut tidak disertakan, tabel akan ditampilkan tanpa bingkai (batas antar sel). Bila hendak dimanfaatkan sebagai pengatur tata letak, pembuatan tabel tanpa bingkai mungkin memang bermanfaat, namun seperti telah disebutkan di atas, kini tabel cenderung dimanfaatkan untuk menampilkan data, jadi batas antar sel tersebut lebih baik ditampilkan.

t06-434-html5-gb1Hasil eksekusi Listing 1 diperlihatkan pada gambar ini.

Jika baris pertama tabel hendak dimanfaatkan sebagai judul kolom, tag <tr> dan </tr> yang mewakili baris pertama boleh diganti <th> dan </th>. Dari sisi tampilan relatif sama saja, penggunaan tag <th> lebih ke arah struktur dokumen.

Bagaimana jika ada baris tertentu yang memiliki jumlah kolom tidak sama dengan baris yang lain? Mungkin dengan bahasa lain, ada sel-sel tertentu yang dimerger menjadi satu sehingga jumlah kolom suatu baris tertentu tidak sama  dengan baris yang lain.

Pastinya hal tersebut sudah diperhitungkan oleh pengembang HTML5. Jika ada kolom yang dimerger, gunakan atribut colspan yang disematkan ke tag <td>. Nilai atribut colspan adalah jumlah kolom yang dimerger. Jumlah tag <td> yang digunakan tentunya disesuaikan dengan jumlah kolom yang telah dimerger. Misalnya, jika tadinya ada 4 kolom, lalu ada 3 yang dimerger, maka tag <td> yang digunakan ada 2, yang satu digunakan untuk menyatakan 3 kolom yang dimerger dan yang satu digunakan untuk menyatakan kolom ke-empat.

t06-434-html5-gb2Contohnya diberikan pada Listing 2 (file table2.html) dan hasil eksekusinya diperlihatkan pada gambar ini.

Bagaimana sekarang jika yang dimerger bukan beberapa kolom dalam satu baris melainkan beberapa baris dalam satu kolom? Prinsipnya sama saja, tapi atribut yang digunakan sekarang adalah rowspan dan masih tetap disematkan pada tag <td>.

Perhatikan baik-baik jumlah kolom pada setiap baris. Misalnya seharusnya ada empat kolom di setiap baris, lalu baris pertama dan baris kedua pada kolom pertama dimerger, maka kamu tinggal membuat 3 kolom pada baris kedua karena kolom yang pertama pada baris tersebut sudah dimerger dengan baris di atasnya.

t06-434-html5-gb3

 

Contohnya diberikan pada Listing 3 (file table3.html) dan hasil eksekusinya diperlihatkan seperti ini.

 

 

        Listing 1

<!DOCTYPE html>
<html>
<head>
<title>Tabel</title>
<head>
<body>
Contoh tabel 3 baris 4 kolom
<br /><br />
<table border=”1”> |
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
<td>baris 1 kolom 4</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
<td>baris 2 kolom 4</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
<td>baris 3 kolom 4</td>
</tr>
</table>
</body>
</html> 

 

        Listing 2

<!DOCTYPE html>
<html>
<head>
<title>Tabel</title>
<head>
<body>
Contoh tabel 3 baris 4 kolom<br />
dengan beberapa sel yang dimerger
<br /><br />
<table border=”1”>
<tr>
<td colspan=”3”>baris 1 kolom 1,2,3</td>
<td>baris 1 kolom 4</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td colspan=”2”>baris 2 kolom 2,3</td>
<td>baris 2 kolom 4</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
<td>baris 3 kolom 4</td>
</tr>
</table>
</body>
</html>

 

      Listing 3

<!DOCTYPE html>
<html>
<head>
<title>Tabel</title>
<head>
<body>
Contoh tabel 3 baris 4 kolom<br />
dengan beberapa sel yang dimerger
<br /><br />
<table border=”1”>
<tr>
<td rowspan=”2”>baris 1,2 kolom 1</td>
<td rowspan=”2”>baris 1,2 kolom 2</td>
<td>baris 1 kolom 3</td>
<td>baris 1 kolom 4</td>
</tr>
<tr>
<td>baris 2 kolom 3</td>
<td>baris 2 kolom 4</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
<td>baris 3 kolom 4</td>
</tr>
</table>
</body>
</html>

 

 

Naskah: Yahya Kurniawan [[email protected]]

Tanggapan Kamu

komentar