Cara Menggabungkan Sel dari tabel HTML (rowspan dan colspan)
Cara Menggabungkan Sel dari tabel HTML menggunakan atribut (rowspan dan colspan)
Sebelumnya admin sudah membahas Cara Membuat Judul Kolom/ Header Tabel HTML Menggunakan (Tag th). Dimana kolom pertama pada tabel diberi judul untuk menjelaskan isi tabel HTML.
Pada artikel kali ini Tutorial part 3 untuk mengatur tabel, admin akan menjelaskan cara menggabungkan sel dari tabel HTML menggunakan atribut (rowspan dan colspan).
Pada microsoft exel atau microsoft word, Penggabungan sel ini biasa disebut dengan marge cell yang diggunakan untuk menyusun informasi dalam tabel yang membutuhkan penggabungan sel menjadi satu dalam sebuah tabel.
Atribut rowspan pada tabel HTML
Rowspan berarti penggabungan beberapa baris sel menjadi satu sel. Cara penggunaan atribut rowspan ini diletakkan di dalam tag <td> dan tag <th>, contoh <th rowspan="2">Data</th>, tentukan berapa baris sel yang akan digabungkan .
Misalkan ada sebuah data yang akan dimasukkan ke dalam tabel dengan field yakni satu Nama dan dua Hobi. Cara pembuatan tabelnya sebagai berikut :
File rowspan.html
Apabila kode HTML diatas dijalankan pada browser maka akan menampilkan seperti gambar berikut.
File gabung_sel.html
Apabila syntak diatas dijalankan pada web browser maka akan menampilkan seperti gambar berikut.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Rowspan pada Tabel HTML</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th>No</th>
<th>Nama </th>
<th>Hobi</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Zikri Febrian</td>
<td>Renang</td>
</tr>
<tr>
<td>Bola Kaki</td>
</tr>
</table>
</body>
</html>
Apabila kode HTML diatas dijalankan pada browser maka akan menampilkan seperti gambar berikut.
 |
| atribut rowspan |
Atribut colspan pada tabel HTML
Atribut colspan digunakan untuk menggabungkan beberapa kolom sel menjadi satu kolom sel. Cara penggunaan atribut colspan ini diletakkan di dalam tag <td> dan tag <th>, contoh <th colspan="2">Data</th>, tentukan berapa kolom sel yang akan digabungkan .
Misalkan ada sebuah data yang akan dimasukkan kedalam tabel yang name fieldnya yakni Data yang isinya ada Nama dan Nim. Berikut kode syntak colspan.
File colspan.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Colspan pada Tabel HTML</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th colspan="2">Data</th>
</tr>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Zikri Febrian</td>
<td>160210078</td>
</tr>
<tr>
<td>Nanda Riski</td>
<td>160210097</td>
</tr>
</table>
</body>
</html>
Apabila syntak diatas dijalankan maka akan menampilkan seperti gambar berikut :
 |
| Atribut colspan |
Gabungan rowspan dan colspan pada tebel HTML
Disini admin memiliki sebuah data Mahasiswa yang fieldnya Nama, Nim dan Data Nilai (UTS, UAS, IPK). Kode prgramnya sebagai berikut.File gabung_sel.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Colspan dan Rowspan di HTML</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">NIM</th>
<th rowspan="2">Nama</th>
<th colspan="3" width="30%">DATA NILAI</th>
</tr>
<tr>
<td>UTS</td>
<td>UAS</td>
<td>IPK</td>
</tr>
<tr>
<td>1</td>
<td>160210056</td>
<td>Zikri Febrian</td>
<td>85</td>
<td>90</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>160210070</td>
<td>Raja Zulfiando</td>
<td>80</td>
<td>75</td>
<td>B</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Penggunaan Colspan dan Rowspan di HTML</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">NIM</th>
<th rowspan="2">Nama</th>
<th colspan="3" width="30%">DATA NILAI</th>
</tr>
<tr>
<td>UTS</td>
<td>UAS</td>
<td>IPK</td>
</tr>
<tr>
<td>1</td>
<td>160210056</td>
<td>Zikri Febrian</td>
<td>85</td>
<td>90</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>160210070</td>
<td>Raja Zulfiando</td>
<td>80</td>
<td>75</td>
<td>B</td>
</tr>
</table>
</body>
</html>
Apabila syntak diatas dijalankan pada web browser maka akan menampilkan seperti gambar berikut.
 |
| rowspan dan colspan |
Dalam membuat tabel dengan atribut rowspan dan clospan, teman-teman sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, atau berapa baris dan kolom yang akan diperlukan. karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut.
Baiklah sekarang teman-teman sudah paham kan bagaimana cara menggabungkan sel pada tabel HTML? Pada tutorial part 4 untuk mengatur tabel HTML admin akan membahas tentang Cara Membuat Struktur Tabel HTML (tag thead, tfoot dan tbody).
0 Response to "Cara Menggabungkan Sel dari tabel HTML (rowspan dan colspan)"
Post a Comment