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>.
Seperti
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.
Hasil 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.
Contohnya 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.
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>.
Senin, 17 Juni 2013
Belajar Bikin Tabel di HTML5
16.03
dasinario
No comments
0 komentar:
Posting Komentar