Belajar HTML #1:Menggunakan colspan dan rowspan pada tabel
- Cara penggunaan Rowspan
Cara mengabungkan beberapa baris pada sebuah tabel dapat dilakukan dangan menggunakan rowspan yang artinya yang akan digabungkan adalah bagian baris pada tabel, cara penggunaan rowspan adalah rowspan=”x”, dimna x merupakan jumlah baris yang ingin kita gabung.
Contoh:
<td rowspan=”2”>Meggabungkan 2 buah colom</td>
Berdasarkan tabel diatas pada colom ke 2 tepat pada baris 1 dan 2 menerapakan rowspan=”2” dan pada colom ke 3 baris 2 dan 3 menerapkan rowspan=”2”. Untuk membuat tabel sesuai gambar kita tentukan dahulu berapa jumlah baris dan kolom pada tabel supaya proses pembentukan tabel lebih mudah dimengerti. Dari gambar tabel diatas terdapat 5 buah baris(termasuk colom 1–3 menjadi 1 baris) dan 3 colom. Artinya didalam tag <table> nantinya harus ada 5 tag <tr> untuk baris dan didalam tag <tr> ada 3 tag <td> untuk colom seperti source code dibawah ini.
ini adalah source code berdasarkan jumlah tag <tr> dan <td> yang sudah kita tentukan tadi.
<table border=”1" cellpadding=”10">
<tr>
<th>colom 1</th>
<th>colom 2</th>
<th>colom 3</th>
</tr>
<tr>
<td> baris 1</td>
<td rowspan=”2" style=”background-color: lightblue”>rowspan baris 1 dan 2</td>
<td></td>
</tr>
<tr>
<td>baris 2</td>
<td rowspan=”2" style=”background-color: orange”>rowspan 2 dan 3</td></tr>
<tr>
<td>baris 3</td>
<td></td>
</tr>
<tr>
<td>baris 4</td>
<td></td>
<td></td>
</tr>
</table>
2 . Cara penggunaan colspan
Cara mengabungkan beberapa baris pada sebuah tabel dapat dilakukan dangan menggunakan colspan yang artinya kita akan menggabukan bagian colom pada tabel, cara penggunaan colspan adalah colspan=”x”, dimna x merupakan jumlah colom yang ingin kita gabung.
Contoh:
<td colspan=”2">Meggabungkan 2 buah colom</td>
Berdasarkan tabel diatas pada baris ke 2 tepat pada colom ke 2 dan 3 menerapakan colspan=”2” dan pada baris ke 3 colom ke 4 sampai 8 menerapkan colspan=”5”. Untuk membuat tabel sesuai gambar kita tentukan dahulu berapa jumlah baris dan kolom pada tabel supaya proses pembentukan tabel lebih mudah dimengerti. Dari gambar tabel diatas terdapat 4 buah baris(termasuk colom 1–8 menjadi 1 baris) dan 8 colom.
artinya didalam tag <table> nantinya harus ada 4 tag <tr> untuk baris dan didalam tag <tr> ada 8 tag <td> untuk colom. Pada tutorial ini saya berikan source code HTML dari tabel tersebut supaya lebih mudah dimengerti penerapan jumlah <tr> dan <td> nya. Copy paste source sangat tidak disarankan dalam proses belajar ( kecuali dikejar deadline) hehehhehe. Cobalah mengetik secara manual walaupun masih melihat source setidaknya itu akan lebih membantu dari pada sekedar copy paste codingan.
Btw tag <th> dan <td> ini sebenarnya hampir sama, tapi <th> kerap digunakan pada tabel sebagai tanda judul atau nama colom pada tabel. Meskipun tag <td> juga bisa kita buat sebagai judul tapi untuk proses pembelajaran saat ini kita gunakan <th> aja biar asyik.
<table border=”1" cellpadding=”15">
<tr>
<th>Colom 1</th>
<th>Colom 2</th>
<th>Colom 3</th>
<th>Colom 4</th>
<th>Colom 5</th>
<th>Colom 6</th>
<th>Colom 7</th>
<th>Colom 8</th>
</tr>
<tr>
<td>Baris 1</td>
<td>baris 1 colom 2</td>
<td>Baris 1 colom 3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Baris 2</td>
<td colspan=”2" style=”background-color: gray”>colspan colom 2 dan 3</td>
<td>baris 2 colom 4</td>
<td>baris 2 colom 5</td>
<td>baris 2 colom 6</td>
<td>baris 2 colom 7</td>
<td>baris 2 colom 8</td>
</tr>
<tr>
<td>Baris 3</td>
<td>Baris 3 colom 1</td>
<td></td>
<td colspan=”5" style=”background-color: green”>colspan coloum 4–8</td>
</tr>
</table>
Demikian lah dulu tutorial cara menerapkan rowspan dan colspan pada tabel HTML dasar ini
semoga teman-teman paham dan jika ada yang kurang dimengerti mari diskusi dikolom komentar.
“Jika tutorial ini kurang bermanfaat beri tahu saya dan jika bermanfaat tolong beritahu kepada teman-teman dan saudara anda.”
jangan lupa follow dan claps tutorialnya
salam
