Tabel HTML


HTML menyediakan tabel untuk menampilkan data agar terkesan lebih nyaman dilihat. Tabel pada HTML didefinisikan dengan tag <table>. Untuk baris didefinisikan dengan <tr>. Sedangkan kolom, biasanya dibagi menjadi dua, pertama untuk menampilkan nama/judul kolom disarankan menggunakan <th> dan untuk isi umumnya menggunakan <td>. Contoh tabel.

Nama Tempat Lahir Tanggal Lahir
Budi Santoso Surabaya 01 Januari 1992
Andi Mukhlis Surabaya 20 April 1993
Siti Khoiro Surabaya 15 Februari 1993

Atribut Colspan dan Rowspan Pada Tabel


Terdapat 2 atribut pada elemen tabel yang sering digunakan untuk mendesain sel dari tabel. Kedua atribut ini digunakan untuk merentangkan atau memperlebar atau bisa juga untuk menggabungkan sel. Sehingga membuat suatu baris atau kolom terlihat lebih lebar.

Atribut colspan HTML

Atribut colspan digunakan untuk merentangkan atau melebarkan sel kolom. Kepanjangan dari colspan adalah column span yang dapat diartikan rentang kolom.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Nama</th>
      <th colspan="2">Tempat dan Tanggal Lahir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi Santoso</td>
      <td>Surabaya</td> 
      <td>01 Januari 1992</td>
    </tr>
    <tr>
      <td>Andi Mukhlis</td>
      <td>Surabaya</td>
      <td>20 April 1993</td>
    </tr>
    <tr>
      <td>Siti Khoiro</td>
      <td>Surabaya</td> 
      <td>15 Februari 1993</td>
    </tr>
  </tbody>
</table>
Nama Tempat dan Tanggal Lahir
Budi Santoso Surabaya 01 Januari 1992
Andi Mukhlis Tuban 20 April 1993
Siti Khoiro Tuban 15 Februari 1993

Atribut rowspan HTML

Atribut colspan digunakan untuk merentangkan atau melebarkan sel baris, Maka dari itu disebut rowspan atau rentang baris.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Tempat Lahir</th>
      <th>Tanggal Lahir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi Santoso</td>
      <td rowspan="3">Surabaya</td> 
      <td>01 Januari 1992</td>
    </tr>
    <tr>
      <td>Andi Mukhlis</td>
      <td>20 April 1993</td>
    </tr>
    <tr>
      <td>Siti Khoiro</td>
      <td>15 Februari 1993</td>
    </tr>
  </tbody>
</table>
Nama Tempat Lahir Tanggal Lahir
Budi Santoso Surabaya 01 Januari 1992
Andi Mukhlis 20 April 1993
Siti Khoiro 15 Februari 1993