Element Tabel HTML

Tabel adalah salah satu elemen HTML yang digunakan untuk menampilkan data dalam bentuk tabel. Tabel terdiri dari baris dan kolom. Setiap baris dalam tabel terdiri dari satu atau lebih sel. Sedangkan setiap kolom dalam tabel terdiri dari satu atau lebih sel.

A. Struktur Tabel

Struktur tabel terdiri dari beberapa elemen, yaitu :

Elemen	Deskripsi
<table>	Elemen yang digunakan untuk membuat tabel
<tr>	Elemen yang digunakan untuk membuat baris dalam tabel
<th>	Elemen yang digunakan untuk membuat header dalam tabel
<td>	Elemen yang digunakan untuk membuat sel dalam tabel

Contoh :

<table>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
    </tr>
</table>

Output :

Nama	Umur
Andi	20
Budi	25

Penjelasan :

Pada contoh di atas, kita membuat sebuah tabel dengan 3 baris dan 2 kolom. Baris pertama digunakan untuk menampilkan header tabel, sedangkan baris kedua dan ketiga digunakan untuk menampilkan data.

B. Atribut Tabel

Atribut tabel adalah bagian yang memberikan informasi tambahan pada tabel. Atribut tabel terdiri dari beberapa atribut, yaitu :

Atribut	Deskripsi	Contoh
border	Menentukan lebar border tabel	<table border="1">
cellpadding	Menentukan jarak antara isi sel dengan batas sel	<table cellpadding="10">
cellspacing	Menentukan jarak antara sel satu dengan sel lainnya	<table cellspacing="0">
width	Menentukan lebar tabel	<table width="100%">
colspan	Menggabungkan beberapa sel pada kolom	<th colspan="2">
rowspan	Menggabungkan beberapa sel pada baris	<td rowspan="2">

Contoh :

<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
    </tr>
</table>

Output :

Penjelasan :

Pada contoh di atas, kita menambahkan beberapa atribut pada tabel. Atribut border digunakan untuk menentukan lebar border tabel, atribut cellpadding digunakan untuk menentukan jarak antara isi sel dengan batas sel, atribut cellspacing digunakan untuk menentukan jarak antara sel satu dengan sel lainnya, dan atribut width digunakan untuk menentukan lebar tabel.

C. Menggabungkan Sel

Kita bisa menggabungkan beberapa sel dalam tabel. Hal ini berguna ketika kita ingin membuat tabel dengan struktur yang lebih kompleks.

Contoh :

<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <tr>
     <th colspan="2" align="center">Daftar Siswa</th>
    </tr>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
    </tr>
</table>

Output :

Penjelasan :

Pada contoh di atas, kita menggabungkan dua sel pada baris pertama. Kita menggunakan atribut colspan untuk menggabungkan dua sel. Atribut colspan digunakan untuk menentukan jumlah kolom yang akan digabungkan.

D. Menggabungkan Baris

Kita juga bisa menggabungkan beberapa baris dalam tabel. Hal ini berguna ketika kita ingin membuat tabel dengan struktur yang lebih kompleks.

Contoh :

<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td rowspan="2">Andi</td>
        <td>20</td>
    </tr>
    <tr>
        <td>25</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>30</td>
    </tr>
</table>

Output :

Penjelasan :

Pada contoh di atas, kita menggabungkan dua baris pada kolom pertama. Kita menggunakan atribut rowspan untuk menggabungkan dua baris. Atribut rowspan digunakan untuk menentukan jumlah baris yang akan digabungkan.