HTML

Cara Membuat Tabel Menggunakan HTML5 Dan CSS

Cara Membuat Tabel Menggunakan HTML5 Dan CSS

Cara Membuat Tabel Menggunakan HTML5 Dan CSS

Pada kesempatan kali ini saya akan membagikan tutorial tentang cara membuat tabel menggunakan HTML5 dan CSS. Tabel bukanlah hal baru di dalam HTML, tetapi dalam HTML5 ada bebrapa tag baru yang tersedia.

Cara Membuat Tabel Menggunakan HTML5 Dan CSS

 

Untuk membuat tabel di HTML, kita perlu menggunakan tag <table>. Tabel dibagi menjadi baris dengan menggunakan tag <tr> dan kolom dengan menggunakan tag <td>. Tabel terdapat elemen kolom, baris, header, footer, dan elemen lainnya.

Cara Membuat Tabel

Berikut tutorial membuat tabel menggunakan HTML :

Script di atas adalah contoh tabel sederhana tanpa menggunakan CSS, apabila dijalankan maka hasilnya akan seperti berikut:

Cara Membuat Tabel Menggunakan HTML5 Dan CSS

Fungsi Border pada script adalah mengatur tebal garis, sedangkan width berfungsi mengatur lebar tabel.

Menambahkan Header dan Footer Pada Tabel

Untuk menambahkan header dan footer pada tabel, kita memerlukan tag sebagai berikut:

  • <th> – digunakan untuk menunjukkan header tabel
  • <thead> – tag ini dapat digunakan untuk mengelompokkan header dan format konten dari tabel.
  • <tbody> –  tag ini dapat digunakan untuk mengelompokkan isi tabel dan format konten sebagai body dari tabel.
  • <tfoot> –  tag ini dapat digunakan untuk mengelompokkan bagian isi tabel yang dijadikan footer.

Atribut HTML5 dapat digunakan untuk mengatur tabel menggunakan tag <thead>, tag <tbody>, dan tag <tfoot>. Kita akan mencoba mengatur warna background dan text dengan CSS inline.

Berikut scriptnya :

Dengan menjalankan script di atas maka hasilnya akan seperti gambar ini :

Cara Membuat Tabel Menggunakan HTML5 Dan CSS

Fungsi col span dalam script di atas adalah menentukan kolom mana saja yang akan diberi warna backgroundnya. Jika ingin menambahkan format khusus untuk kolom di tabel, maka kalian dapat menentukan elemen dan format menggunakan tag <colgroup>.

Sekian tutorial cara membuat tabel menggunakan HTML5 dan CSS yang bisa saya sampaikan pada kalian. Semoga tutorial ini bisa bermanfaat buat kalian semua.

Baca Juga :

Advertisements

Leave a Reply

%d blogger menyukai ini: