Cara-Membuat-Tabel-HTML-5-Dengan-CSS-Nyekrip

Halo Nyekripper! Pada kesempatan kali ini kita akan membahas cara membuat tabel HTML 5 dengan CSS, membuat tabel di HTML5 menjadi lebih populer karena munculnya beberapa tag tabel baru dalam HTML5 dan elemen lain yang tersedia di HTML5. Pada tutorial ini akan menunjukkan cara untuk membuat dan format tabel menggunakan tag tabel dan elemen HTML5.

Berikut adalah tampilan tabel dari tutorial ini.

Hasil_Akhir_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip

Hasil Akhir

Untuk mengetahui cara membuat tabel HTML5 dengan CSS, silahkan ikuti langkah-langkah berikut.

Tabel HTML 5

Tabel bukanlah hal yang baru dalam HTML, tetapi ada beberapa tag baru yang tersedia di HTML5. Untuk menentukan tabel di HTML, kita perlu menggunakan tag <table>. Tabel dibagi menjadi baris dengan menggunakan tag <tr> dan kolom dengan menggunakan tag <td>.

Tabel dapat mengandung elemen kolom, elemen baris, header, footer dan elemen lainnya. Pada Tutorial ini akan menunjukkan cara untuk menggunakan berbagai tag tabel tersebut dan bagaimana untuk format elemen-elemen tersebut menggunakan CSS (style sheet).

Cara Membuat Tabel HTML 5

Berikut adalah standar kode yang diperlukan untuk membuat tabel:

Jika skrip diatas dijalankan, maka akan tampil seperti gambar berikut.

Tampilan_Standar_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip

Tampilan Standar

Perlu diperhatikan bahwa secara default HTML tidak menerapkan border. Untuk menerapkan border pada tabel, kita harus menambahkan atribut border pada tag tabel.

Setelah menambahkan atribut border, maka tabel akan terlihat seperti berikut.

Tabel_Dengan_Border_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip

Tabel Dengan Border

Membuat Tabel HTML 5: Menambahkan Header dan Footer

Kita dapat menggunakan tag berikut untuk membuat dan format header dan footer untuk tabel:

  • <th> – digunakan untuk menunjukkan header tabel- th singkatan “table header”
  • <thead> – tag ini dapat digunakan untuk mengelompokkan header dan format konten sebagai kesatuan header (kepala) dari tabel.
  • <tbody> –  tag ini dapat digunakan untuk mengelompokkan isi tabel dan format konten sebagai body (tubuh) dari tabel.
  • <tfoot> –  tag ini dapat digunakan untuk mengelompokkan bagian isi tabel yang dijadikan footer .

Tiap teks yang berada dalam sel yang telah di-format menggunakan tag <th> secara otomatis akan ditengah-kan dan di buat tebal. Sedangkan teks yang berada dalam elemen tabel yang telah didefinisikan dengan menggunakan tag body <td> akan di-setting rata kiri (left aligned) dan tidak ada perubahan dalam tampilan teks.

Semua atribut HTML5 dapat digunakan untuk memformat tabel menggunakan tag <thead>, <tbody> dan <tfoot>. Dalam tutorial ini, kita akan menggunakan atribut warna untuk format berbagai elemen tabel dalam warna yang berbeda. Kita akan mengatur header dengan warna hijau, tubuh dengan warna biru dan footer dengan warna merah.

Lebih dalam dengan atribut kunjungi artikel ” ATRIBUT DALAM ELEMEN HTML “.

Oke langsung saja ketik-kan skrip berikut.

Jika skrip diatas dijalankan, maka akan tampil seperti gambar berikut.

Penambahan_Header_Footer_Tabel_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip

Penambahan Header Footer Tabel

Tabel dengan HTML 5: Memformat Kolom

Tag kelompok kolom memungkinkan kita untuk menentukan format untuk satu atau lebih kolom dalam tabel. Jika kita ingin menambahkan format khusus untuk kolom di tabel, maka kita dapat menentukan elemen dan format menggunakan tag <colgroup>.

Atribut span dalam tag <colgroup> dapat digunakan untuk menentukan style pada beberapa kolom, jika atribut ini tidak didefinisikan maka style akan diterapkan hanya pada satu kolom. Tag ini berguna untuk menerapkan style untuk sebagian atau seluruh kolom, sangat merepotkan jika harus mengulangi dalam penerapan style untuk setiap kolom.

Dalam tutorial ini kita akan membuat background pada kolom ke-satu dan ke-dua berwarna hijau, dan kolom ketiga berwarna merah.

Mari ketik-kan skrip berikut untuk mencoba menggunakan tag <colgroup>.

Perlu diperhatikan bahwa penggunaan  tag <colgroup> harus menjadi anak dari elemen <table>, penempatan-nya setelah setiap elemen <caption> dan sebelum elemen <thead>, <tbody>, <tfoot>, dan <tr>. Sedangkan untuk menentukan properti yang berbeda untuk kolom dalam <colgroup>, gunakan tag <col> dalam tag <colgroup>.

Dengan memahami cara membuat tabel, mungkin anda ingin mempelajari bagaimana cara membuat website sederhana dengan HTML5 dengan mengunjungi artikel ” Cara Membuat Website Sederhana dengan HTML 5 “.

Jika skrip diatas dijalankan, maka akan nampak seperti gambar berikut.

Hasil_Akhir_Cara_Membuat_Tabel_HTML_5_Dengan_CSS_Nyekrip

Hasil Akhir

Sekian tutorial cara membuat tabel HTML 5 dengan CSS, penggunaan tabel merupakan cara yang bagus untuk menyajikan data. Tag HTML5 menghadirkan kesederhanaan dalam membuat dan format tabel.

Happy Nyekrip!

About The Author

Comments

    1. Admin Article Author

      Banyak keuntungannya gan, salah satunya adalah lebih menambah makna semantik pada tiap bagian dalam tabel. 🙂

    1. Admin Article Author

      namanya juga HTML5 menambah fitur dan tag.. pasti tambah banyak yang harus dipelajari hehe…

    1. Admin Article Author

      pada tutorial ini memang belum responsive, supaya bisa responsive ya harus bermain dengan css gan.. 🙂

  1. ASKEP

    makasih banyak tutorialnya membuat tabel mas, ijin praktekkan dulu,maklum masih newbi perlu belajar banyak nih

  2. karimunjawa

    bagaimana kalau membuat table berbeda beda mas, misal atas ada 2 kolom bawahnya 1 kolom trus bawahnya lagi 2 kolom

    1. Admin Article Author

      tabel tidak bisa responsive, cara mengakalinya dengan cara hide beberapa kolom, lalu atur agar ketika klik tombol tertentu maka akan memunculkan kolom yang dihide tersebut.

    1. Admin Article Author

      kalau mau responsive mesti diakalin gan, selain dibuat width = 100%, ada kolom yang di hide ketika bentuk layar semakin mengecil, coba cari di google banyak yang bahas gan. maaf blum bisa kasih tutorial

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *