Membuat Tabel Pada HTML
Tabel berguna untuk menampilkan data dalam bentuk baris dan kolom. Biasanya tabel pada website digunakan untuk menampilkan data produk, data pelanggan, data barang, data laporan keuangan dan data-data lainnya.
Kelebihan menggunakan tabel adalah data lebih mudah dilihat karena tersusun rapi sesuai posisinya.
Membuat Tabel Pada HTML
Untuk membuat table pada HTML, kita bisa menggunakan element yang sudah disediakan pada HTML. Yaitu elemen <table> .. </table>
.
Didalam element <table>
kita bisa menambahkan barisnya dengan menggunakan elemen <tr>
.
Kemudian kita bisa membuat kolomnya dengan menggunakan elemen <td>
. dan gunakan elemen <th>
untuk membuat kolom pada kepala tabel.
Contoh
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Cahyo</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>Dodi</td>
<td>29</td>
</tr>
</table>
Perbedaan dari elemen <td>
dan <th>
adalah kolom <th>
ditampilkan menggunakan tulisan tebal atau bold.
Bawaan element tabel tidak menampilkan garis pada tabel, jadi kita perlu menambahkan atribut border="1"
pada tag pembuka <table>
. Agar tabel yang kita buat memiliki garis.
Menggabungkan Kolom Tabel
HTML juga memungkinkan kita untuk menggabungkan kolom pada tabel.
Untuk menggabungkan kolom pada tabel HTML, kita bisa menambahkan atribut colspan=""
pada tag <td>
atau <th>
.
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th colspan="2">Nomor HP</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>081234564</td>
<td>081234575</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>081234566</td>
<td>081234576</td>
</tr>
<tr>
<td>3</td>
<td>Cahyo</td>
<td>081234569</td>
<td>081234579</td>
</tr>
</table>
Perhatikan contoh colspan
di atas, Kita menuliskan atribut colspan
pada tag <th>
(kolom Nomor HP), dan memerintahkan untuk menggabungkan 2 kolom.
Maka HTML akan menggabungkan 2 kolom di sampingnya.
Menggabungkan Baris Tabel
Jika kamu ingin menggabungkan baris pada tabel, kamu bisa menggunakan atribut rowspan=""
. dan isi jumlah baris yang ingin digabung.
Contoh
<table border="1">
<tr>
<th>TIM</th>
<th>Nama</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Andi</td>
</tr>
<tr>
<td>Budi</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>Cahyo</td>
</tr>
<tr>
<td>Dodi</td>
</tr>
</table>
Perhatikan pada contoh di atas, kita menggunakan atribut rowspan untuk menggabungkan baris 1 dan baris 2. dan menggabungkan baris 3 dan baris 4.
Menulis Caption Pada Tabel
Kita juga bisa menulis caption atau keterangan tabel. yaitu dengan cara menambahkan elemen <caption>
.
<caption>Isi keterangan tabel di sini</caption>
Letakkan elemen <caption>
pada di bawah tag <table>
pembuka.
Contoh
<h1>Contoh caption yang terletak di atas</h1>
<table border="1">
<caption>Data warga desa</caption>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>34</td>
</tr>
</table>
Contoh Latihan
Jika atribut rowspan
dan colspan
agak sulit untuk dipahami, silahkan memperbanyak latihan dengan cara bereksperimen dengan membuat berbagai bentuk tabel.
Misalnya seperti contoh tabel laporan keuangan sederhana di bawah ini.
<h1>Contoh tabel laporan keuangan</h1>
<table border="1">
<caption>Data laporan keuangan</caption>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Tanggal</th>
<th colspan="2">Transaksi</th>
</tr>
<tr>
<th>Pemasukan</th>
<th>Pengeluaran</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>25.000</td>
<td>10.000</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>1.000.000</td>
<td>0</td>
</tr>
<tr>
<th colspan="2">TOTAL</th>
<th>1.025.000</th>
<th>10.000</th>
</tr>
</table>
Sekian tutorial cara membuat tabel pada HTML. Jika teman-teman telah berhasil membuat tabel dan sudah paham tentang materi tabel HTML, selanjutnya silahkan lanjut ke tutorial HTML selanjutnya. Yaitu tentang membuat list pada HTML.