Tutorial Belajar Html Tabel

Hal yang paling umum digunakan dalam html adalah pembuatan tabel. Kali ini, kegiatan belajar html akan berfokus pada tutorial untuk memahami dan membuat tabel tersebut.

Elemen <table> dalam HTML digunakan untuk menampilkan data tabular. Anda dapat menganggapnya sebagai cara untuk mendeskripsikan dan menampilkan data yang masuk akal dalam perangkat lunak spreadsheet. Pada dasarnya: kolom dan baris.

Head dan Body

Seluruh baris pertama tidak berisi data, itu hanya judul kolom. Kita dapat melakukannya dengan elemen <thead>, yang akan membungkus <tr> pertama (ia bisa membungkus sebanyak mungkin baris yang diperlukan yang semuanya informasi header).

Ketika Anda menggunakan <thead>, tidak boleh ada <tr> yang merupakan anak langsung dari <table>. Semua baris harus berada dalam <thead>, <tbody>, atau <tfoot>. Perhatikan bahwa kami juga membungkus semua baris data di <tbody> tersebut.

Foot

Bersama dengan <thead> dan <tbody> ada <tfoot> untuk membungkus baris tabel yang menunjukkan footer tabel. Seperti <thead>, terbaik untuk semantik menunjukkan ini bukan baris data tetapi informasi tambahan.

Apa yang unik tentang <tfoot> adalah penempatan dalam HTML. Itu datang setelah <thead> dan sebelum <tbody>! Anda mungkin berpikir itu akan menjadi hal terakhir sebelum akhir <table>, tetapi tidak demikian dalam kasus ini. Saya percaya ini adalah masalah aksesibilitas, karena footer mungkin berisi informasi yang diperlukan untuk memahami tabel, itu harus sebelum data dalam urutan sumber.

Meskipun datang pertama dalam urutan sumber, <tfoot> memang merender di bagian bawah tabel, menjadikannya elemen HTML yang agak tidak biasa.

Hal ini dapat digunakan, misalnya, untuk mengulangi header dalam kasus tabel yang sangat tinggi / panjang secara visual di mana mungkin lebih mudah untuk melihat judul kolom di bagian bawah daripada bagian atas.

<tfoot> hanya memberikan trik cerdas dengan tata letak di mana posisi elemen melompat dari bawah ke atas tergantung pada kebutuhan. Misalnya bar nav di sepanjang bagian bawah layar, tetapi dengan sumber HTML ke arah awal di mana seharusnya navigasi berfungsi.

Itulah sedikit tutorial belajar html tabel kali ini, semoga Anda bisa memahami dan mulai membuat tabel html pertama Anda.

You may also like...