Menggabungkan Baris pada Tabel

Syntax:

<namaTag  rowspan=”nilai”>

Contoh:

Buatlah sebuah file HTML bernama rowspan.html dan masukkan kode berikut ini:

<head>

<style>

#tbName table, th, td{

border:1px solid green;

border-collapse:collapse;

padding:5px;

}

</style>

</head>

<table id="tbNama">

<tr>

<th>No.</th><th>Nama</th><th>No. Telpon</th>

</tr><tr>

<td rowspan="2">1</td><td rowspan="2">Andri</td><td>0818181</td>

 

</tr><tr>

<td>0555555</td>

</tr><tr>

<td rowspan="2">2</td><td rowspan="2">Oblak</td><td>0818143</td>

 

</tr><tr>

<td>0555545</td>

</tr>

 

</table>

Keterangan:

  • border:1px solid green, kode ini berarti saya memberikan ketebalan garis pembatas pada setiap tabel dan setiap sell dalam tabel sebesar 1px dengan tipe solid dan warna hijau.
  • border-collapse:collapse, kode ini berarti saya ingin membuat garis pembatas tabel itu tidak terpisah antara satu sell dengan sell lainnya, nilai default dari border-collapse adalah separate yaitu garis pembatas antara sell terpisah satu dan lainnya.

Catatan:

border-collapse:collapse ini masih terdapat bug pada beberapa browser sehingga tetap saja tabelnya tampil dengan pembatas sell terpisah satu dengan yang lainnya.

Hasil:

Klik 2x nama filemu maka pada browser akan tampil seperti berikut ini:

No.NamaNo. Telpon
1Andri0818181
0555555
2Oblak0818143
0555545

Keterangan:

Terlihat pada sell nomor 1 dan nama Andri itu merupakan gabungan dari 2 baris
2016 © Fahmi Basya Kartapura