tutorial web dasar: HTML Table (3) : Rowspan dan Colspan pada tabel

Rowspan merupakan attribute dari tag <td> yang digunakan untuk menggabungkan antara kolom yang memiliki baris berbeda. Contoh penggunaan attribute :

Colspan merupakan attribute dari tag <td> yang digunakan untuk menggabungkan kolom dengan kolom lainnya pada baris yang sama. Contoh penggunaan attribute :

Untuk memperjelas kita perhatikan gambar dan penjelasan dasar berikut :

Gambar di atas merupakan suatu tabel dimana pada tabel tersebut memiliki 2 baris dan tiap baris memiliki 2 kolom. Pada baris pertama memiliki kolom A dan kolom B. Pada baris kedua memiliki kolom C dan D.

Rowspan dapat menggabungkan kolom A dari baris pertama dan kolom C dari baris kedua, Jadi Rowspan hanya dapat menggabungkan kolom dengan kolom lainnya secara vertical. Pada tabel di atas kolom yang bertemu secara vertical adalah kolom A dan C atau sebaliknya, B dan D atau sebaliknya.

Colspan dapat menggabungkan kolom pada baris yang sama. Kolom A dan B dapat di gabungkan karena memiliki baris yang sama. Colspan menggabungkan kolom dengan kolom lainnya secara horizontal. Pada tabel di atas kolom yang bertemu secara horizontal adalah A dan B atau sebaliknya, C dan D atau sebaliknya.

Kita akan mencoba bagaimana rowspan dan colspan bekerja.

Contoh : Tabel-dasar.html

<html>
<head>
<title>Tabel Rowspan</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

Kode di atas merupakan tabel dasar yang belum di lakukan penggabungan kolom, kita akan menggabungkan kolom A dan C yang menggunakan attribute rowspan.

Contoh : tabel-rowspan

<html>
<head>
<title>Tabel Rowspan</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<td rowspan="2">AC</td>
<td>B</td>
</tr>
<tr>
<td>D</td>
</tr>
</table>
</body>
</html>

Hasil keluaran browser :

Penjelasan : Pada tag <td> pada kolom A di beri rowspan senilai 2, mengapa 2 ? karena kita menggabungkan 2 kolom menjadi satu yakni A dan C, jadi kita perlu memberi nilai rowspan dengan nilai 2. Pada <td> kolom C baris kedua di hapus, karena sudah dilakukan penulisan rowspan pada kolom A.

Catatan : Penggabungan dilakukan dari atas kebawah (A ke C) tidak dapat dari bawah ke atas. Untuk lebih memahami mengenai rowspan silahkan anda melakukan latihan pada kasus yang berbeda.

Sekarang kita akan menggunakan colspan, kita gunakan kembali tabel-dasar.html yang telah di buat sebelumnya. Kita akan menggabungkan kolom A dan B yang terletak pada baris yang sama dengan attribute colspan.

Contoh : tabel-colspan.html

<html>
<head>
<title>Tabel Colspan</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<td colspan="2">AB</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

Hasil keluaran browser :

Penjelasan : Pada tag <td> kolom A di beri colspan senilai 2, mengapa 2 ? karena kita menggabungkan 2 kolom menjadi satu yakni A dan B, jadi kita perlu memberi nilai colspan dengan nilai 2. Pada <td> kolom B di hapus, karena sudah dilakukan penulisan colspan pada kolom A.

Catatan : Penggabungan dilakukan dari kiri ke kanan (A ke B) tidak dapat sebaliknya. Untuk lebih memahami mengenai colspan silahkan anda melakukan latihan pada kasus yang berbeda.

tutorial web dasar

Rabu, 22 April 2015

HTML Table (3) : Rowspan dan Colspan pada tabel

1 komentar: