Membuat bingkai 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.
Bingkai atau garis tepi pada tabel sangatlah penting bagi pembacanya, karena jika tidak ada akan membuat pembacanya kesulitan. oleh karena itu, Pandue akan membahas bagaimana cara membuat garis tepi atau bingkai tabel menggunakan HTML.
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
Pada hasil yang diberikan oleh contoh kode HTML pada sub-modul membuat tabel, tampak bahwa tabel tidak memiliki border (bingkai). Hal ini disebabkan kita tidak menyertakan atribut border pada tag <table>, yang berarti nilai dari atribut tersebut secara default akan diisi dengan nilai 0 (nol). Agar border terlihat pada masing-masing sel tabel, kita perlu mengisi atribut border dengan nilai yang lebih besar dari 0. Semakin tinggi nilai yang kita masukkan, akan semakin tebal pula border dari tabel bersangkutan. Jika Anda ingin membuat tabel tanpa garis/border tentu sangat bisa, namun tidak disarankan.
Sejak kemunculan CSS, funsi 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 tabelyang ditujukan untuk membuat tampilan layar.
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
Tabel pada HTML dibuat menggunakan elemen <table>. Setiap tabel terdiri dari baris (<tr>) dan sel (<td> atau <th>).
...
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
...
Menambahkan Bingkai pada Tabel
Untuk menentukan bingkai pada tabel, kita menggunakan atribut border. Nilai atribut ini menentukan tebalnya bingkai tabel.
... <table border="1"> <!-- Konten Tabel --> </table> ...
Atribut border berfungsi untuk menampilkan serta mengatur bingkai tabel dan angka 1 berfungsi untuk mengatur ketebalan bingkai tabel.
Penggunaan CSS untuk Bingkai yang Lebih Lanjut
Selain atribut border, Anda dapat menggunakan CSS untuk mengontrol lebih banyak properti bingkai, seperti warna, jenis garis, dan lainnya.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
Mengatur Warna Bingkai
Anda dapat menentukan warna bingkai menggunakan atribut bordercolor pada elemen tabel atau menggunakan CSS.
Menggunakan HTML
... <!-- Menggunakan atribut bordercolor --> <table border="1" bordercolor="#336699"> <!-- Konten Tabel --> </table> ...
Menggunakan CSS
<!-- Menggunakan CSS -->
<style>
table {
border: 1px solid #336699;
}
</style>
Dengan memahami cara membuat dan menentukan bingkai tabel pada HTML, Anda dapat meningkatkan kualitas tata letak halaman web Anda. Gunakan contoh kode dan panduan ini untuk memperkaya pengalaman desain web Anda.
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>Bingkai Tabel</title>
</head>
<!--[ <body> open ]-->
<body>
<table border="1" >
<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 memiliki bingkai atau garis tabel. Tabel dengan bentuk seperti ini sudah cukup mudah untuk dibaca karena lebar dan pemisahnya sudah terdapat garis atau border. Untuk itu, agar tabel dapat lebih menaarik dan mudah dibaca, kita perlu sedikit memodifikasi beberapa atribut dari tabel tersebut seperti mengatur tinggi dan lebar sel tabel pada halaman web. Namun, jika Anda ingin membuat tabel tanpa garis/border tentu sangat bisa, namun tidak disarankan.
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!