Belajar html : Belajar Membuat Tabel Pada HTML

Belajar html : Membuat tabel

Pada artikel sebelumnya kita sudah belajar tentang struktur dasar serta sudah mencoba membuat paragraf pada html, kini saatnya kita melangkah maju :v dengan mempelajari cara membuat tabel html.

Membuat tabel pada html

Selain menulis kata pada struktur dokumen biasa, adakalanya kita juga menginput kata tersebut pada kolom/tabel.

Tabel adalah komponen dalam dokumen yang berfungsi untuk menampilkan kata/informasi dalam bentuk baris dan kolom. 

Untuk membuat tabel pada html cukup sederhana, minimal kamu hanya membutuhkan 3 jenis Tag, yakni :

• Tag <table>
• Tag <tr>
• Tag <td>

Hanya menggunakan ketiga komponen tersebut, sebenarnya kamu sudah dapat membuat tabel pada html.

Tag <table>

Tag <table> merupakan tag berpasangan, artinya setiap ada Tag <table> pasti (harus) mendapatkan Tag penutup </table>.

Tag <table> digunakan sebagai penanda bahwa struktur yang berada didalam Tag <table> merupakan sebuah tabel dan harus dieksekusi layaknya tabel. 

Tanpa Tag <table> kamu tidak akan bisa membuat struktur dokumen pada html, bahkan Tag pendukung seperti Tag <tr>, <td> dan <th> juga tidak dapat berfungsi dengan baik.

Tag <tr> 

Tag <tr> merupakan singkatan dari table row, yang berarti garis tabel. Sama seperti namanya, Tag <tr> juga berfungsi untuk membuat garis lulus secara horizontal guna melengkapi kolom (Tag <td>). 

Tag <td>

Tag <td> yang berarti table data merupakan sebuah Tag yang berfungsi untuk membuat kolom dalam baris (Tag <tr>). Didalam Tag <td> inilah konten yang akan terlihat oleh user. 

Kamu juga dapat mengatur lebar tabel/seberapa banyak kolom yang akan tampil menggunakan Tag <td>. Semakin banyak Tag <td> yang kamu tulis, maka semakin banyak pula kolom horizontal yang akan terbuat. 

Contoh code tabel html

Untuk membuat struktur tabel pada html, kamu harus menggabungkan ketiga Tag diatas!. Sebagai contoh, kamu dapat melihat script html dibawah ini:

See the Pen Untitled by Agata_desu (@Agata_desu) on CodePen.

Klik Result untuk melihat hasil program.

Itu adalah contoh, tabel html paling sederhana pada html. Kamu dapat melakukan modifikasi, seperti menambahkan warna pada backgroud, mengganti wana text, serta banyak lainya. Meskipun memodifikasi tabel langsung dari Html dapat dilakukan, namun alangkah lebih baik menggunakan CSS dalam urusan modifikasi.

Sebagai contoh tambahan, silahkan lihat script dibawah.

See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.

Klik Result untuk melihat hasil program

Tabel tersebut telah diatur/dimodifikasi menggunakan CSS. 

Itulah sedikit pembahasan mengenai tabel html, apabila ada kesalahan atau kekurangan dalam penyampaian mohon dimaafkan serta dikoreksi dikolom komentar.

Arigatou gozaimasu.

Baca Juga