Cara Menggabungkan Cell Tabel menggunakan Atribut Rowspan dan Colspan

Dalam pembuatan tabel di html ada kalanya kita harus membuat tabel yang menampilkan satu kolom dua row atau sebaliknya. Untuk membuatnya kita harus menggabungkan cell dalam tabel. Bagaimana membuatnya?
Untuk membuat tabel yang saya sebutkan diatas kita bisa memakai atribut rowspan dan colspan pada tag <table>.

Atribut rowspan dan colspan

Atribut rowspan and colspan digunakan untuk menggambarkan cell pada tabel menjadi satu.
Kedua tag ini ditaruh didalam tag td pada tabel.
Contoh atribut colspan

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%" border="1">
 <tr>
 <th>Nama</th>
 <th colspan="2">Telephone</th>
 </tr>
 <tr>
 <td>Phpdanmysql.com</td>
 <td>082277712412</td>
 <td>0812******</td>
 </tr>
</table>
</body>
</html>

Contoh atribut Rowspan

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%" border="1">
 <tr>
 <th>Nama:</th>
 <td>Adies</td>
 </tr>
 <tr>
 <th rowspan="2">Telephone:</th>
 <td>082277712412</td>
 </tr>
 <tr>
 <td>08000000</td>
 </tr>
</table>
</body>
</html>

Dari kedua contoh ini dapat kita lihat perbedaan dan fungsi dari kedua atribut ini.
Atribut colspan akan menggabungkan kolom menjadi satu.
Atribut Rowspan akan menggabungkan dua cell row menjadi satu.
Jangan lupa untuk menggabung kolom atau cell kita harus memakai value, kolom atau cell yang digabungkan sesuai dengan nilai value. Jika rowspan=”5″ akan menggabungkan 5 cell.
Dari uraian diatas adakah yang masih bingung?

Keyword:

  • cara meggabungkan text antara beda table

Ada Komentar?

×