Yuniza

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 TagDeskripsi 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 AtributNilai AtributDeskripsi Atribut
alignleft
right
center
Tidak didukung oleh HTML5
Mengatur teks atau objek yang ada dalam cell, row, atau tabel.
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Tidak didukung oleh HTML5
Memberi warna latar belakang pada cell, row, atau tabel.
bordernumericTidak didukung oleh HTML5
Mengatur ketebalan garis pada setiap cell, row dan tabel.
cellpaddingpixel numericTidak didukung oleh HTML5
Mengatur ruang antara cell dan konten yang ada di dalam cell. Nilai harus diisi oleh nomor.
cellspacingpixel numericTidak didukung oleh HTML5
Mengatur ruang antara cell. Tidak berefek pada konten dalam cell.
framevoid
above
below
hsides
lhs
rhs
vsides
box
border
Tidak didukung oleh HTML5
Mengatur tata letak garis pada tabel.
rulesnone
groups
rows
cols
all
Tidak didukung oleh HTML5
Mengatur bagian khusus cell yang harus ada dalam border.
summarytextTidak didukung oleh HTML5
Mendefinisikan penjelasan ringkas tentang tabel.
widthpixels
% (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/52 ratings

What's Your Reaction?

SebelSebel
0
Sebel
PusingPusing
1
Pusing
SedihSedih
0
Sedih
KocakKocak
0
Kocak
Terkesan!Terkesan!
0
Terkesan!
KecewaKecewa
0
Kecewa
Zapra Gartiast

Perkenalkan, nama saya adalah Zapra Gartiast dan saya salah satu penulis di website Yuniza. Telah berpengalaman dalam internet dan pengembangan website sejak tahun 2009. Bukan ahli teknologi, namun tertarik dengan berbagai hal menarik dalam teknologi.

Berikan Komentar

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