Pengertian Table dan penerapannya dalam HTML

Pengertian Table dan penerapannya dalam HTML

 

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell. 

Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.

Seringkali table digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai diterapkan pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama yang mempelopori penggunaan table).

Dari masing-masing tag tersebut, tiap tag mempunyai tag penutup yaitu:

Tag <table> mempunyai tag penutup </table>

Tag <tr> mempunyai tag penutup </tr>

Tag <td> mempunyai tag penutup </td>

Ketiga tag di atas adalah tag-tag yang harus ada dalam tag Table. Bisa dikatakan tag tersebut merupakan tag dasar pembuatan table. Berikut penerapan dari masing masing bagian tag dalam Table:

Tag <table> adalah pembuka daripada pembuatan table, di dalam table ada baris yang dimulai dengan <tr>. Jika ada satu <tr> maka akan ada satu baris, begitupun selanjutnya. Di dalam baris ada cell-cell yang sering disebut kolom, yang biasanya kita isi dengan berbagai bentuk data. Cell atau kolom ini dibuka atau dimulai dengan <td>. Tag <td> ini diakhiri dengan </td> sebagai penutup kolom. Data-data yang berada dalam tag <td>...</td> akan berada dalam satu kolom. Jika ingin membuat 3 kolom dalam satu baris, maka di dalam <tr>...</tr> kita inputkan tiga <td>...</td>. Begitupun pada <tr>, jika kita ingin membuat tiga baris table maka kita harus ketikkan tiga <tr>...</tr> di dalam <table>...</table>.

Untuk lebih mengenal dan mengerti daripada tag dasar Table, berikut saya berikan penjelasan dari masing masing tag :

Tag <table> </table>

Tag <table> adalah tag pembuka sebuah table, dimana tag <table> ini adalah tag awal yang kita pakai dalam mengawali pembuatan table. Setelah tag <table> ada tag </table> yang merupakan tag penutup atau akhir dari tabel yang sedang di buat.

Tag<tr></tr>

Tag <tr> atau Table Row adalah tag yang berfungsi untuk membuat baris dalam sebuah tabel. Tidak lepas dari tag-tag yang lain, tag ini berisi tag penutup yaitu </tr>.

Tag <tr> memiliki atribut ALIGN untuk mengatur alignment horizontal dan VALIGN untuk mengatur alignment vertical.

Tag<td></td>

Tag <td> atau Table data berfungsi untuk menampilkan data pada setiap sel tabel. Secara umum dapat dikatakan bahwa table data atau <td> ini digunakan untuk membuat kolom dalam baris table. Untuk mengakhiri kolom tersebut digunakan </td>.

Berikut saya berikan contoh penerapan tag table:

yang menghasilkan tampilan seperti di bawah ini:

Di dalam perkembangannya, struktur tabel mengalami perubahan. Perubahan ini berbentuk pengelompokan bagian tabel yang meliputi thead, tbody, dan tfoot, dimana tujuannya yaitu untuk mempermudah mengatur tampilan tabel apabila data yang disajikan di dalam tabel sangat kompleks terutama dalam hal mengatur css.

Tag thead akan menjadi tag judul yang berada paling atas, kemudian diikuti dengan tag tbody yang digunakan untuk menampilkan data tabel, dan yang terakhir ditutup dengan tag tfoot sebagai footer dari tabel.

Adapaun struktur codingnya yaitu sebagai berikut: