Membuat tabel di HTML tidaklah sesulit yang dibayangkan, bahkan bagi pemula. Dengan menguasai cara membuat tabel, Anda dapat menyusun data agar lebih rapi dan mudah dibaca.
Dalam artikel ini, kita akan membahas cara membuat tabel HTML dengan sederhana serta beberapa fitur menarik yang bisa diterapkan. Mari simak langkah-langkahnya berikut ini!
Cara Membuat Tabel Sederhana
Langkah pertama yang harus diingat dari cara membuat tabel HTML adalah memahami tag dasar dan kegunaannya, seperti <table>, <tr>, <td>, dan <th>, di mana:
- Tag <table> digunakan untuk mendefinisikan tabel
- Tag <tr> untuk membuat baris
- Tag <td> untuk sel data
- Tag <th> untuk header tabel.
Contoh sederhana dari tabel adalah sebagai berikut:
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>Kode di atas akan menghasilkan tabel dengan dua kolom, yaitu “Nama” dan “Umur”, serta dua baris data. Hasilnya akan seperti berikut ini.
Cara Membuat Tabel yang Dikotakin
Agar tabel terlihat lebih rapi dengan garis atau kotak yang mengelilingi setiap sel, kita bisa menambahkan atribut border pada tag <table>.
Contohnya:
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>Dengan menambahkan border=”1″, setiap sel dalam tabel akan dikelilingi garis. Anda juga bisa menyesuaikan ketebalan garis dengan mengganti nilai “1” pada border. Berikut ini hasilnya:
Cara Atur Jarak Teks dan Garis Tabel
Untuk mengatur jarak antara teks dan garis batas sel, kita bisa menggunakan atribut cellpadding dan cellspacing.
Atribut cellpadding berfungsi untuk menambahkan ruang di dalam sel, sementara cellspacing menambahkan jarak antar sel.
Berikut contohnya:
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
</table>Dengan cellpadding=”10″ dan cellspacing=”5″, tampilan tabel akan lebih lebar dan tidak terlihat terlalu rapat. Berikut ini hasilnya:
Cara Menambahkan Warna pada Background Kolom
HTML juga memungkinkan kita untuk memberikan warna latar belakang pada kolom atau baris tertentu. Hal ini bisa dilakukan dengan menambahkan atribut style pada tag <th> atau <td>.
Contoh:
<table border="1">
<tr>
<th style="background-color: lightblue;">Nama</th>
<th style="background-color: lightgreen;">Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
</table>Dengan menggunakan style=”background-color: …;”, kolom atau sel akan memiliki warna sesuai dengan keinginan kita. Berikut ini hasilnya:
Cara Merge Cell Tabel
Menggabungkan dua atau lebih sel (merge cell) bisa dilakukan dengan atribut colspan dan rowspan. Atribut colspan berfungsi untuk menggabungkan sel dalam satu baris, sementara rowspan untuk menggabungkan sel di satu kolom.
Contoh:
<table border="1">
<tr>
<th colspan="2">Data Pribadi</th>
</tr>
<tr>
<td>Nama</td>
<td>Andi</td>
</tr>
</table>Dengan colspan=”2″, header “Data Pribadi” akan menggabungkan dua kolom. Berikut ini hasilnya:
Cara Sisipkan Gambar di Tabel
Anda juga dapat menambahkan gambar dalam tabel dengan menggunakan tag <img> di dalam <td>.
Berikut contohnya:
<table border="1">
<tr>
<th>Nama</th>
<th>Foto</th>
</tr>
<tr>
<td>Andi</td>
<td><img src="foto_andi.jpg" alt="Foto Andi" width="50"></td>
</tr>
</table>Untuk menempatkan gambar di dalam tabel, anda perlu memiliki file gambarnya di satu folder yang sama dengan file HTML-nya. Dalam hal ini, kita memiliki foto dengan nama file foto_andi yang memiliki format jpg.
Dengan menempatkan tag <img> dalam <td>, Anda bisa menampilkan gambar sesuai ukuran yang diinginkan di dalam tabel. Berikut ini hasilnya:
Dengan mengikuti tips dan kiat dari cara membuat tabel HTML di atas, Anda dapat membuat berbagai model tabel sesuai dengan kebutuhan masing-masing. Semoga membantu!
Baca juga: Cara Menyimpan HTML di Notepad yang Benar
