Pendahuluan
Dalam pengembangan web, penggunaan tabel HTML masih sering ditemui untuk menyusun dan menampilkan data secara terstruktur. Pada kesempatan ini, kita akan membahas cara mengatur tinggi dan lebar sel tabel dalam HTML agar tampilan halaman web lebih terorganisir dan responsif.
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.
Mengatur Lebar Sel Tabel
Penggunaan atribut width
<td width="150">Isi Sel Tabel</td>
Anda dapat mengatur lebar sel tabel dengan menggunakan atribut width pada tag <td> atau <th>.
Penggunaan atribut style
<td style="width:20%">Isi Sel Tabel</td>
Anda juga dapat menggunakan atribut style untuk mengatur lebar sel tabel dengan satuan piksel atau persentase.
Mengatur Tinggi Sel Tabel
Penggunaan atribut height
<td height="50">Isi Sel Tabel</td>
Anda dapat mengatur tinggi sel tabel dengan menggunakan atribut height pada tag <td> atau <th>.
Penggunaan atribut style
<td style="height:30px">Isi Sel Tabel</td>
Anda juga dapat menggunakan atribut style untuk mengatur tinggi sel tabel dengan satuan piksel.
Penggunaan CSS Eksternal
Anda dapat memisahkan gaya dari struktur HTML dengan menggunakan CSS eksternal. Ini membuat pengaturan lebih terorganisir dan mudah dikelola. Contoh CSS:
<style>
td {
width: 150px;
height: 50px;
}
</style>
Contoh Penggunaan Kode
...
<table border="1" >
<tr>
<th width="150" height="50">Kolom 1</th>
<th width="200" height="50">Kolom 2</th>
</tr>
<tr>
<td width="150" height="50">Baris 1, Sel 1</td>
<td width="200" height="50">Baris 1, Sel 2</td>
</tr>
<tr>
<td width="150" height="50">Baris 2, Sel 1</td>
<td width="200" height="50">Baris 2, Sel 2</td>
</tr>
</table>
...
Dengan mengikuti panduan ini, Anda dapat dengan mudah mengatur tinggi dan lebar sel tabel dalam HTML untuk menciptakan tampilan halaman web yang terstruktur dan responsif. Pastikan juga untuk menerapkan SEO keywords agar konten Anda lebih mudah ditemukan oleh mesin pencari.
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>Tinggi dan Lebar Suatu Sel Tabel</title>
</head>
<!--[ <body> open ]-->
<body>
<table border="1" >
<h2>Demo Mengatur Tinggi dan Lebar Suatu Sel</h2>
<caption>Daftar Harga Emas Antam</caption>
<tr>
<th height="50">No</th>
<th width="150">Seri/Model</th>
<th width="100">Ukuran (Gram)</th>
<th width="100">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 contoh di atas, kita mengubah nilai atribut HEIGHT pada baris pertama tabel tersebut (yaitu baris judul) menjadi 50. Hal ini menjadikan baris tersebut tampil lebih tinggi dari baris lainnya. Selain itu, kita juga melakukan perubahan terhadap atribut WIDTH dengan nilai:
- Kolom 1: tidak diubah nilainya
- Kolom 2: lebarnya diubah menjadi 250
- Kolom 3: lebarnya diubah menjadi 100
- Kolom 4: lebarnya diubah menjadi 100
Perlu Anda perhatikan bahwa pada saat kolom <th> diubah lebarnya, maka kolom <td> juga akan berubah atau menyesuaikan.
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!