Penggunaan Tag Tbody pada HTML
Tag Tbody pada HTML digunakan untuk membuat kelompok dari tipe data yang sama dari konten elemen Body. Tag tersebut digunakan pada tabel dengan header dan footer yang lebih dikenal dengan istilah thead dan tfoot. Tag tbody merupakan tag child dari tag parent tr dan td.
Sintak: <tbody> Konten tabel... </tbody>
Sebelum memahami lebih dalam materi tentang Penggunaan Tag Tbody pada HTML, terlebih dahulu pelajari materi tentang: Membuat Tabel HTML Menggunakan Tag Table, Membuat Rumus Pangkat Matematika pada HTML, dan Memodifikasi Tampilan HTML Menggunakan Tag Style.
Atribut: beberapa atribut penggunaannya didukung oleh tbody pada HTML4.1, tetapi tidak didukung oleh HTML5. Berikut daftar atribut yang diberikan:
- align: mengatur perataan dari konten.
- valign: mengatur perataan secara vertikal dari konten.
- char: mengatur perataan dari dalam tag Thead untuk tipe karakter.
- charoff: digunakan untuk mengatur karakter perataan konten di dalam tag Thead dari karakter yang didtentukan oleh atribut char.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Tag Tbody
</title>
<style>
body
{
text-align:center;}
h1
{
color:green;}
th
{
color:blue;}
table, tbody, td
{
border: 1px solid black;
border-collapse: collapse;}
</style>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<h2>
Tag Tbody
</h2>
<table>
<thead>
<tr>
<th>Nama</th>
<th>User Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kingkong</td>
<td>@gondola</td>
</tr>
<tr>
<td>Malta</td>
<td>@nuke</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:Blog Elfan
Tag Tbody
| Nama | User Id |
|---|---|
| Kingkong | @gondola |
| Malta | @nuke |
Penggunaan tag tbody pada HTML memiliki peran penting dalam mengelola struktur tabel yang sering digunakan dalam penyusunan halaman web. Sebagai elemen dalam tabel, tbody berfungsi untuk mengelompokkan baris-baris yang ada di dalam sebuah tabel, terutama baris yang merupakan bagian dari isi utama tabel tersebut. Dalam proses pengembangan halaman web, penggunaan tabel sangat berguna untuk menampilkan data yang terstruktur seperti data perhitungan, data laporan, dan lain sebagainya. Oleh karena itu, penting untuk memahami bagaimana tag tbody dapat memengaruhi susunan data dalam sebuah tabel dan bagaimana penggunaannya dapat memberikan dampak pada kinerja serta penataan halaman web.
Secara umum, tabel pada HTML tersusun dari beberapa bagian utama, yaitu thead, tbody, dan tfoot. Thead digunakan untuk mendefinisikan bagian kepala tabel yang biasanya berisi judul kolom, sedangkan tfoot digunakan untuk mendefinisikan bagian bawah tabel yang sering kali digunakan untuk merangkum data atau menampilkan informasi tambahan seperti total atau ringkasan dari data yang ditampilkan. Tbody sendiri digunakan untuk menampung seluruh data yang ada di antara thead dan tfoot. Penempatan data pada tag tbody ini memberikan struktur yang lebih terorganisir sehingga memudahkan pengelolaan data serta membantu mesin peramban dalam menampilkan tabel dengan lebih efisien.
Salah satu manfaat utama dari penggunaan tbody adalah kemampuannya untuk memisahkan antara data isi tabel dengan bagian lain seperti kepala atau kaki tabel. Dengan memisahkan isi tabel ke dalam tbody, pengembang dapat lebih mudah mengatur tampilan dan melakukan pemrosesan data tanpa mengubah struktur keseluruhan tabel. Misalnya, ketika menggunakan fitur pengguliran pada tabel yang sangat panjang, hanya bagian tbody yang akan digulir, sedangkan bagian kepala dan kaki tabel dapat tetap terlihat. Hal ini memberikan pengalaman pengguna yang lebih baik karena judul kolom tetap terlihat meskipun pengguna menggulir tabel untuk melihat data di baris bawah.
Baca Juga:
Selain itu, tbody juga berperan penting dalam interaksi dengan berbagai teknologi berbasis web seperti CSS dan JavaScript. Ketika ingin mengatur tampilan tabel, pengembang dapat dengan mudah menetapkan gaya khusus untuk tbody agar tampilannya berbeda dari bagian lain seperti kepala atau kaki tabel. Misalnya, pengembang dapat mengatur warna latar belakang atau gaya huruf pada isi tabel secara terpisah dari judul kolom. Hal ini membantu dalam memperjelas perbedaan antara bagian kepala dan isi tabel sehingga pembaca dapat lebih mudah memahami data yang ditampilkan.
Pada interaksi dengan JavaScript, tbody juga memberikan kemudahan dalam manipulasi data secara dinamis. Pengembang dapat menambahkan, menghapus, atau mengubah baris pada bagian isi tabel tanpa mempengaruhi bagian lain seperti kepala atau kaki tabel. Hal ini sangat berguna dalam situasi dimana data dalam tabel perlu diubah secara real-time, misalnya dalam aplikasi yang menampilkan data statistik yang terus diperbarui atau dalam tabel perhitungan yang memerlukan pembaruan data secara langsung tanpa perlu memuat ulang seluruh halaman.
Penggunaan tbody juga berdampak pada kinerja halaman web, terutama ketika berhadapan dengan tabel yang sangat besar dan berisi ribuan baris data. Dengan memisahkan isi tabel ke dalam tbody, mesin peramban dapat memproses data lebih efisien karena hanya fokus pada bagian isi tabel saat melakukan pembaruan atau manipulasi data. Ini membantu mengurangi beban kinerja halaman, terutama ketika terjadi interaksi dengan tabel seperti pengguliran atau pengurutan data. Dengan demikian, halaman web dapat tetap responsif meskipun tabel berisi banyak data.
Pengelolaan tabel yang baik juga berperan dalam meningkatkan aksesibilitas halaman web. Penggunaan tag seperti tbody membantu mesin pencari atau perangkat pembaca layar dalam memahami struktur tabel dengan lebih baik, sehingga informasi yang ada dalam tabel dapat diinterpretasikan dan disampaikan dengan lebih jelas kepada pengguna. Hal ini sangat penting bagi pengguna dengan keterbatasan penglihatan yang mengandalkan perangkat pembaca layar untuk mengakses konten halaman web. Dengan struktur tabel yang jelas, informasi yang disampaikan juga menjadi lebih mudah diakses oleh semua pengguna.
Pada praktik pengembangan web yang melibatkan banyak data dalam tabel, penggunaan tbody sering kali diabaikan karena fungsinya mungkin dianggap tidak terlalu penting. Namun, pada kenyataannya, tag ini memiliki peran yang signifikan dalam memastikan bahwa tabel dapat diatur dengan baik dan mudah dimanipulasi saat diperlukan. Dalam situasi dimana tabel memiliki struktur yang kompleks atau membutuhkan pengelolaan data secara dinamis, tbody menjadi elemen yang sangat membantu dalam menjaga kejelasan dan keteraturan data yang ditampilkan.
Ketika membuat tabel yang interaktif, seperti tabel yang dapat diurutkan atau difilter berdasarkan nilai tertentu, tbody juga menjadi elemen yang penting dalam memisahkan data yang berubah dari struktur tetap seperti judul kolom. Dengan memanfaatkan tbody, pengembang dapat dengan mudah melakukan pengurutan data tanpa mempengaruhi bagian kepala tabel yang biasanya berisi judul kolom. Selain itu, dalam hal pengurutan dan pemfilteran data, tbody memberikan fleksibilitas bagi pengembang untuk memproses data tanpa harus merombak seluruh tabel, sehingga menjaga konsistensi dan keteraturan tampilan.
Dalam dunia pengembangan web modern, dimana performa dan pengalaman pengguna menjadi faktor yang sangat diperhatikan, penggunaan tbody pada tabel menjadi lebih relevan. Selain membantu dalam mengatur struktur tabel yang besar, tbody juga memberikan solusi praktis untuk kebutuhan manipulasi data yang dinamis dan tampilan yang interaktif. Oleh karena itu, meskipun mungkin terlihat sebagai elemen sederhana, tbody memiliki peran yang signifikan dalam memastikan bahwa tabel yang dibuat dapat berfungsi dengan baik dan memberikan pengalaman pengguna yang optimal.
Pada akhirnya, penting untuk memahami dan menggunakan tbody dengan benar dalam pengembangan tabel pada halaman web. Dengan memahami fungsinya, pengembang dapat menciptakan tabel yang tidak hanya terstruktur dengan baik, tetapi juga efisien dalam hal performa dan mudah diakses oleh berbagai teknologi dan perangkat. Penggunaan tbody yang tepat juga membantu dalam memastikan bahwa tabel dapat dengan mudah dimanipulasi dan diatur ulang sesuai kebutuhan tanpa merusak struktur keseluruhan tabel.
Referensi Tambahan:
- Cara Mudah Mengatur dan Menampilkan Waktu Menggunakan Tag Time HTML
- Cara Mudah Membuat Judul pada Dokumen HTML Menggunakan Tag Title
- Cara Membuat Teletype Teks pada HTML Menggunakan Tag TT
- 2 Contoh Pembuatan Garis Bawah pada Teks Menggunakan Tag U HTML
- Penggunaan Tag Var untuk Membuat Variabel pada HTML
- Cara Menentukan Tipe File yang Diterima Server Atribut Accept HTML
- Cara Mendefinisikan Karakter Encoding Menggunakan Accept-charset HTML
Artikel ini akan dibaca oleh: Vivi Khoriyah, Wina Nisrina Nalini, Yoga Sakti Kurniawan, Afifa Eka Kencana, dan Agus Rifangga.
6 komentar untuk "Penggunaan Tag Tbody pada HTML"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan tbody pada dokumen HTML?
BalasHapusTag Tbody pada dokumen html merupakan singkatan dari Table Body Element atau elemen badan tabel. Tag ini merangkum satu set baris tabel berupa elemen TR, yang menunjukkan bahwa tabel tersebut teridir dari tubuh atau body table.
HapusKapan harus menggunakan tag tbody pada tag table dalam dokumen HTML?
BalasHapusTidak ada standar kapan harus menggunakan tag tbody pada sebuah tabel dalam dokumen HTML. Dengan menggunakan beberapa elemen lain seperti Tbody, Thead, Tfoot, maka sebuah tabel dapat dikelompokkan tanpa perlu menggunakan ID atau class dan dapat memberikan lebih banyak izin penyesuaian style, seperti fixed header dan scroll pada bagian body table.
HapusAtribut apa saja yang digunakan dalam tag tbody?
BalasHapus1. align = atribut ini digunakan untuk perataan posisi teks baik itu rata kiri, rata kanan, rata tengah, ataupun rata kiri kanan (justify).
Hapus2. char = atribut ini berisi nilai karakter pada valuenya.
3. charoff = atribut ini memiliki nilai dalam satu pixel atau %.
4. valign = atribut ini digunakan untuk melakukan perataan posisi teks yang berada dibagian atas, bawah, dan tengah.