Ilustrasi membuat tabel di HTML. Foto: Lukas/Pexels
Pada artikel ini How To Tekno akan membagikan tutorial cara membuat tabel di HTML. Berbeda dengan membuat tabel di Microsoft Word atau aplikasi lainnya, lewat HTML membuat tabel menjadi lebih rumit karena menggunakan formula.
Tabel dipakai jika pengguna ingin mendapatkan tampilan data dalam bentuk baris dan kolom, sehingga data yang ingin ditunjukkan pada pembaca bisa lebih mudah untuk dipahami.
Membuat tabel di HTML umumnya menggunakan tiga tag, yaitu Tabel, TR, dan TD. Ketiga tag tersebut wajib dipakai untuk pembuatan tabel yang memiliki fungsi berikut:
<table>: tag untuk membuat tabel.
<tr>: tag untuk membuat baris, TR adalah kepanjangan dari Table Rows.
<td>: tag untuk untuk membuat kolom pada tabel, TD memiliki kepanjangan Table Data.
Supaya lebih jelas, simak artikel mengenai cara membuat tabel di HTML berwarna berikut.
Cara Membuat Tabel di HTML dan CSS
Ilustrasi membuat tabel di HTML. Foto: Digital Buggu/Pexels
Mengutip Modul Membuat Tabel Pada HTML, berikut ini adalah tutorial cara membuat tabel di tengah HTML yang disertai dengan contoh kueri yang digunakan:
1. Menampilkan Tabel
Langkah pertama adalah menampilkan tabel. Perintah dasar HTML yang dipakai adalah <table></table>. Sekarang, simak contoh rumus coding yang dipakai untuk membuat tabel 2 x 2.
<html>
<head>
<title>Data Kelas A</title>
</head>
<body>
<h2>Data Kelas A</h2>
<table border="1">
<tr>
<td>Andi</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>Putri</td>
<td>Perempuan</td>
</tr>
</table>
</body>
</html>
Perhatikan pada perintah <table border="1">, maksudnya adalah tebal garis tabel yang digunakan adalah 1 pixel. Kamu bisa menggantinya sesuai dengan keinginan.
2. Memberi Warna pada Tabel HTML
Ilustrasi membuat tabel di HTML. Foto: Negative/Pexels
Agar tabel yang kamu buat terlihat lebih menarik, kamu bisa memberi warna pada tabel HTML dengan memasukkan tambahan kueri di bagian <tr> menjadi <tr bgcolor=warna yang dipilih>. Misalnya:
3. Menggabungkan Kolom dan Baris di Tabel HTML
Selanjutnya adalah bagaimana cara menggabungkan kolom dan baris di table HTML, seperti fitur merger ketika kamu membuat tabel di lembar kerja Microsoft Word.
Kamu bisa menggunakan perintah <td colspan=n> jika ingin merger kolom dan perintah <td rowspan=n> jika ingin merger baris.
Pada perintah di atas, ubah n dengan jumlah kolom atau baris yang akan digabungkan. Bisa lihat contoh perintah di bawah ini:
<td rowspan=2>NO.</td>
<td rowspan=2>NAMA BARANG </td>
<td colspan=3><center>UKURAN</td>
<td rowspan=2><center>PRODUSEN</td>
Dari contoh perintah di atas, maka kamu akan mendapatkan tabel dengan dua baris di-merger untuk kolom pertama, kedua, dan keenam.
Sementara itu, kamu juga akan mendapatkan kolom tiga, empat, lima yang sudah digabungkan.
Itulah beberapa tutorial cara membuat tabel di HTML. Sebenarnya belajar HTML tidaklah sulit jika kamu mengetahui struktur dasarnya, kemudian hanya perlu mengubah sesuai dengan keinginan dan kebutuhanmu.