Some text some message..
Some text some message..
Some text some message..
Some text some message..

Atribut Rowspan Pada Tabel

previous Previous Page

Atribut Rowspan merupakan atribut pada elemen tabel yang digunakan untuk menggabungkan dua buah atau lebih kelompok baris menjadi satu buah baris. Kelompok baris merupakan deretan sel pada tabel yang mempunyai arah membujur ke kanan dan kiri (horizontal). Penggabungan ini biasanya dilakukan bagi judul pada tabel header <th> yang mempunyai sub-sub baris anakkan disampingnya. Penggabungan sel tabel juga dapat dilakukan bagi tabel data <td> sesuai dengan keperluan.

rowspan

Hasil dari penggabungan ini akan didapatkan sebuah sel tabel dengan ukuran tinggi yang sama dengan jumlah ukuran tinggi baris yang digabungkan. Untuk menggabungkan beberapa buah baris dapat dilakukan dengan menuliskan nilai atribut rowspan="jumlah baris".

Penulisan Syntax:

<th rowspan="jumlah baris">

Berikut ini contoh penggunaan atribut rowspan pada pembuatan sebuah tabel :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>table - atribut rowspan</title>
5.  </head>
6.  <body>
7.     <h4>Tabel dengan atribut rowspan</h4>
8.     <p>Daftar Nilai Mata Pelajaran Matematika</p>
9.     <table border="1">
10.      <tr><th>Kategori</th><th>No.</th><th>Nama Siswa</th><th>Nilai</th></tr>
11.      <tr><td rowspan="3">Murid Laki-laki</td><td>1.</td><td>Farel</td><td>9</td></tr>
12.      <tr><td>2.</td><td>Antonio</td><td>9</td></tr>
13.      <tr><td>3.</td><td>Steven</td><td>8</td></tr>
14.      <tr><td rowspan="3">Murid Perempuan</td><td>1.</td><td>Victoria</td><td>9</td></tr>
15.      <tr><td>2.</td><td>Sarah</td><td>9</td></tr>
16.      <tr><td>3.</td><td>Veronika</td><td>8</td></tr>
17.    </table>
18. </body>
19. </html>
20. 
21. 

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

atribut rowspan tabel

Perhatikan pada hasil kode diatas, pada kolom kategori terdapat 3 buah baris sel yang sudah dirangkap/dimerger menjadi satu. Sebelum dilakukan penggabungan, terdapat 3 buah sel kemudian menghasilkan 1 buah sel karena proses merger dengan memberikan atribut rowspan="3". Sel hasil merger tersebut digunakan sebagai judul pada kategori untuk Murid Laki-laki dan Murid Perempuan.

Browser Pendukung :

Atributcromeinternet explorerfirefoxsafariopera
<rowspan>yayayayaya

noteCatatan : Sebelum adanya penataan gaya dengan CSS, tag <table> digunakan untuk mendesain kerangka halaman web. Hal ini dapat dilakukan dengan mudah melalui penetapan atribut <colspan> ataupun <rowspan> untuk mendapatkan susunan rangka halaman web tersebut. Anda seharusnya tidak menerapkan cara ini, silahkan menggunakan CSS sebagai penggantinya.

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML