Cara membuat tabel pada HTML
Anda dapat menggunakan HTML untuk melakukan berbagai hal seperti menampilkan blog, memasukkan gambar ke dalam Blog, atau memasukan audio serta video ke dalam halaman Blog atau website.
Tabel adalah elemen HTML yang digunakan untuk menampilkan data dalam format kolom dan baris. Tabel dapat digunakan untuk berbagai keperluan, seperti menampilkan data statistik, daftar produk, atau informasi lainnya.
Jika diartikan secara umum, pengertian tabel adalah kumpulan elemen data yang diorganisasikan ke dalam bentuk tabular (memiliki kolom vertikal dan horizontal).
Fungsi Tabel
Dalam HTML, tabel memiliki dua fungsi, yaitu:
- Untuk mengatur informasi ke dalam bentuk tabular.
- Untuk mengatur tampilan atau tata-letak (layout) dari suatu halaman atau bagian halaman tertentu.
Sejak kemunculan CSS, fungsi ke-2 di atas menjadi hal yang tidak direkomendasikan karena tabel hanya ditujukan untuk menampilkan data dalam bentuk tabular, sedangkan tampilan (layout) sebaiknya dibuat menggunakan CSS. Oleh karena itu, dalam blog ini tidak akan dibahas mengenai penggunaan tabel yang ditujukan untuk membuat tampilan layar.
Elemen-elemen Tabel HTML
Sebelum beralih ke pembahasan tentang pembuatan tabel, Anda perlu mengenal dan memahami bagian-bagian yang terdapat di dalam suatu tabel. Ini akan mempermudah Anda dalam bekerja dengan tabel. tabel memiliki bagian-bagian yang disebut kolom, baris dan sel.
Berikut ini gambar yang akan menunjukkan letak atau posisi dari masing-masing bagian tabel.
- Kolom merupakan atribut tabel. setiap tabel dapat memiliki beberapa kolom.
- Baris merupakan isi sebuah record dari tabel bersangkutan.
- Sel adalah bagian terkecil dari suatu tabel yang berisi, data atau nilai dari kolom dan baris tertentu.
Untuk keperluan pembuatan tabel di dalam dokumen, HTML menyediakan beberapa tag yang telah memiliki beberapa fungsi khusus. Semua tag yang disediakan tersebut memiliki tag pasangan, misalnya <table> akan berpasangan dengan </table>. Tabel berikut ini akan menunjukkan daftar tag yang dimaksud.
Struktur Dasar HTML
Sebelum kita membuat tabel, mari review struktur dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Implementasi Unicode dalam HTML</title>
</head>
<!--[ <body> open ]-->
<body>
<!-- Konten halaman web akan ditulis di sini -->
</body>
<!--[ </body> close ]-->
</html>
Membuat Tabel dalam HTML
Gunakan elemen <table> untuk memulai tabel. Setiap baris ditandai dengan <tr> dan sel dalam baris tersebut menggunakan <td> (data sel) atau <th> (header sel).
...
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
...
Contoh Praktikum Tabel
Praktikum membuat tabel dengan HTML dalam halaman web.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
</head>
<!--[ <body> open ]-->
<body>
<table>
<h2>Demo Membuat Tabel</h2>
<caption>Daftar Harga Emas Antam</caption>
<tr>
<th>No</th>
<th>Seri/Model</th>
<th>Ukuran (Gram)</th>
<th>Harga (±)</th>
</tr>
<tr>
<td>1</td>
<td>Emas Batangan Antam - 2020</td>
<td>1 gr</td>
<td>Rp. 799,000 ,-</td>
</tr>
<tr>
<td>2</td>
<td>Emas Batangan Antam - 2020</td>
<td>2 gr</td>
<td>Rp. 1,547,000 ,-</td>
</tr>
<tr>
<td>3</td>
<td>Emas Batangan Antam - 2020</td>
<td>10 gr</td>
<td>Rp. 7,763,000 ,-</td>
</tr>
</table>
</body>
<!--[ </body> close ]-->
</html>
Anda dapat mencoba dan memahami bagaimana tabel terbentuk.
Pada hasil di atas tampak tampilan tabel yang belum memiliki bingkai atau garis tabel. Tabel dengan bentuk seperti ini masih agak susah untuk dibaca karena lebar dan pemisahnya belum begitu jelas. Untuk itu, agar tabel dapat lebih menarik dan mudah dibaca, kita perlu sedikit memodifikasi beberapa atribut dari tabel tersebut dengan cara memberi bingkai pada tabel.
Orang lain juga bertanya (FAQ)
Berikut adalah beberapa pertanyaan yang mungkin sering diajukan pengguna saat mencari tentang dasar-dasar Tabel:
Dasar membuat tabel
Kuasai dasar membuat tabel dengan mudah dan efektif untuk meningkatkan produktivitas Anda dengan panduan dasar membuat tabel.
Cara membuat bingkai atau border tabel
Tambahkan sentuhan profesional pada tabel Anda dengan cara mudah membuat bingkai atau border pada tabel yang elegan.
Mengatur tinggi dan lebar sel tabel
Optimalkan tata letak tabel Anda dengan mempelajari cara mudah mengatur tinggi dan lebar sel tabel untuk presentasi data yang lebih menarik dan informatif.
Memberi warna background sel tabel
Berikan sentuhan visual yang menakjubkan pada tabel Anda dengan tutorial lengkap tentang cara memberi warna latar belakang sel tabel untuk meningkatkan daya tarik dan keterbacaan sekarang.
Memasukan gambar ke dalam tabel
Tambahkan dimensi visual yang mengesankan ke dalam tabel Anda dengan panduan lengkap memasukkan gambar ke dalam sel tabel agar dapat menjadi lebih menarik.
Mengatur jarak antar sel pada tabel
Perfeksionis tabel Anda dengan mudah! Pelajari trik pintar mengatur jarak antar sel pada tabel untuk tampilan yang rapi dan terorganisir dalam sekejap.
Mengatur jarak teks dengan border tabel
Desain profesional tabel untuk tampilan yang presisi dan elegan dengan mempelajari cara mengatur jarak teks dengan border tabel.
Membentangkan sel menjadi beberapa baris
Pelajari bagaimana cara membentangkan sel menjadi beberapa baris untuk presentasi data yang lebih terperinci dan menarik.
Membentangkan sel menjadi beberapa kolom
Kembangkan fleksibilitas tampilan tabel Anda dengan mempelajari cara membentangkan sel menjadi beberapa kolom untuk visualisasi data yang lebih dinamis dan informatif.
Selain beberapa pertanyaan diatas, ada beberapa pertanyaan lain yang mungkin ingin Anda tahu mengenai materi pemprograman web.
Bagaimana cara menjadikan gambar sebagai link?
Bergaya dan efektif: temukan cara mudah menjadikan gambar sebagai link untuk meningkatkan interaktivitas halaman web Anda!.
Teks Alignment (left, right, center & justify)
Persembahkan tampilan yang rapi dan profesional dengan panduan lengkap tentang teks alignment (kiri, kanan, tengah, dan rata kanan-kiri) - pelajari rahasia tata letak yang sesuai dengan gaya Anda!
Format teks (Bold, Italic, Underline)
Untuk memberi tampilan yang menarik pada konten Anda, pelajari cara membuat teks bold, italic, dan underline dengan tutorial praktis.
Membuat & menampilkan karakter Copyright (©) pada halaman web
Tambahkan sentuhan hukum ke situs web Anda: pelajari cara membuat dan menampilkan karakter copyright untuk melindungi karya dan memberi identitas pada halaman web Anda!