Tutorial HTML: Bagaimana Cara Membuat Tabel di HTML

3 min


bagaimana cara membuat tabel di html

Tabel merupakan salah satu tag HTML yang berfungsi untuk menampilkan daftar data dengan detail dan rinci. Biasanya, daftar data yang ditampilkan dalam tabel berupa data penduduk atau data lainnya.

Saat ini masih sangat jarang sekali penggunaan tabel di HTML. Padahal, penggunaan tabel sangat bermanfaat apabila kamu ingin menjadi back-end developer.

Membuat sebuah tabel tidak harus menulis kode dari awal, kamu bisa menggunakan HTML Table Generator yang banyak disediakan di internet, contohnya adalah divtable.com.

Namun, jika kamu tidak ingin menggunakan HTML Table Generator dan ingin lebih rinci mengetahui kode dari tag <table>, maka kamu harus meneruskan bacaan dalam tulisan ini…

Apa itu tabel dalam HTML?

Tabel dalam HTML sebenarnya sama saja seperti tabel di Microsoft Excel, yang berbeda hanya proses pembuatannya.

Jika di Microsoft Excel kamu tinggal klik, seret, selesai. Tapi, jika di HTML kamu harus menulis kode untuk membuatnya.

Contoh kode dari tabel adalah seperti berikut…

Tabel dalam HTML memiliki atribut local (local attributes) dan tag lokal (local tags) yang hanya bisa digunakan di antara kode <table> dan </table>. Untuk lebih jelasnya lihat tag dan atribut yang didukung oleh <table>.

Tag yang didukung oleh <table>

Berikut ini adalah daftar tag yang didukung oleh <table>:

Nama Tag Deskripsi Tag
<th> Mendefinsikan header dalam cell tabel
<tr> Mendefinisikan row tabel
<td> Mendefinisikan cell data dalam tabel
<thead> Mengelompokan grup head dalam tabel
<tbody> Mengelompokan grup body dalam tabel
<tfoot> Mengelompokan grup footer dalam tabel
<caption> Mendefiniskan caption (keterangan) pada tabel
<colgroup> Mengelompokan kolom untuk pemformatan tabel
<col> Mengelompokan properti di setiap kolom di dalam <colgroup>

Selain dari tag di atas, <table> juga mendukung tag global pada HTML.

Atribut yang didukung oleh <table>

Selain dari tag, <table> juga mendukung beberapa atribut. Berikut ini adalah atribut yang didukung oleh <table>:

Nama Atribut Nilai Atribut Deskripsi Atribut
align left
right
center
Tidak didukung oleh HTML5
Mengatur teks atau objek yang ada dalam cell, row, atau tabel.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Tidak didukung oleh HTML5
Memberi warna latar belakang pada cell, row, atau tabel.
border numeric Tidak didukung oleh HTML5
Mengatur ketebalan garis pada setiap cell, row dan tabel.
cellpadding pixel numeric Tidak didukung oleh HTML5
Mengatur ruang antara cell dan konten yang ada di dalam cell. Nilai harus diisi oleh nomor.
cellspacing pixel numeric Tidak didukung oleh HTML5
Mengatur ruang antara cell. Tidak berefek pada konten dalam cell.
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Tidak didukung oleh HTML5
Mengatur tata letak garis pada tabel.
rules none
groups
rows
cols
all
Tidak didukung oleh HTML5
Mengatur bagian khusus cell yang harus ada dalam border.
summary text Tidak didukung oleh HTML5
Mendefinisikan penjelasan ringkas tentang tabel.
width pixels
% (percent)
Tidak didukung pada HTML5
Mengatur lebar tabel secara horizontal.

Agar kamu lebih memahami setiap efek tampilan dari tag dan attribute yang telah dijelaskan di atas, ada baiknya kamu melihat contoh kode yang ada di bawah ini.

Contoh kode tag <table>

Pastikan kamu melakukan uji coba terhadap kode-kode yang ada di bawah ini. Saya tidak akan menampilkan hasil dari kode yang ada di bawah ini, atau lebih jelasnya saya hanya menampilkan kode saja tanpa hasil. Kamu sendiri yang harus melihat hasil dari setiap kode yang ada di bawah ini.

Tabel dengan caption

Di bawah ini adalah contoh tabel dengan tag <caption>.

Tabel dengan colgroup dan col

Di bawah ini adalah contoh tabel dengan tag <colgroup> dan <col>.

Tabel dengan thead, tbody, dan tfoot

Di bawah ini adalah contoh tabel dengan tag <thead>, <tbody>, dan <tfoot>.

Sebagai catatan. Hasil (tampilan) dari tag <thead>, <tbody>, dan <tfoot> tidak akan berubah sekalipun penulisannya tidak berurutan.

Contoh kode attribute <table>

Selain dari contoh kode tag <table>, kamu juga bisa mengetahui cara untuk memasukan attribute ke dalam tag <table>. Di bawah ini adalah contoh penempatan attribute pada tag <table>.

Tabel dengan attribute align

Di bawah ini adalah contoh penempatan attribute align pada tag <table>.

Tabel dengan attribute bgcolor

Di bawah ini adalah contoh penempatan attribute bgcolor pada tag <table>.

Tabel dengan attribute border

Di bawah ini adalah contoh penempatan attribute border pada tag <table>.

Apabila kamu ingin mempelajari lebih lanjut tentang penempatan attribute pada tag <table>, kamu bisa mempelajarinya dengan lengkap di https://www.w3schools.com/tags/tag_table.asp.

Melalui link tersebut kamu akan mendapatkan hasil dari setiap attribute yang didukung oleh tag <table>.


Kesimpulan

Untuk memudahkan pembuatan tabel pada HTML tanpa harus mencontek kode. Hal utama yang harus kamu perhatikan ketika membuat tabel adalah tag berikut:

  1. <table>
  2. <tr>
  3. <th>
  4. <td>

Selain itu, kamu juga harus ingat bahwa <tr> selalu ada di bawah <table>, atau lebih jelasnya, tag <tr> selalu ada di urutan kedua setelah <table>.

Apabila kamu memiliki pertanyaan atau saran dengan tulisan ini, jangan lupa untuk meninggalkan komentar melalui form yang ada di bagian bawah tulisan.

5/5 2 ratings

What's Your Reaction?

Sebel Sebel
0
Sebel
Pusing Pusing
1
Pusing
Sedih Sedih
0
Sedih
Kocak Kocak
0
Kocak
Terkesan! Terkesan!
0
Terkesan!
Kecewa Kecewa
0
Kecewa
Zapra Gartiast

Hay! Saya Zapra Gartiast, calon Wali Kota Bandung tahun 2024 - 2034. Mohon do'a dari kalian yang membaca :D

Berikan Komentar

avatar
  Subscribe  
Notify of
Choose A Format
Story
Formatted Text with Embeds and Visuals