Belajar HTML Dasar : Tabel

Pada pertemuan ini kita akan mempelajari Tabel pada HTML. Setelah sebelumnya kita belajar HTML Dasar tentang Gambar, kali ini kita akan belajar HTML Dasar mengenai Tabel. Bagi kalian yang belum bisa sama sekali, jangan khawatir karena Belajar HTML tentang Tabel ini untuk Pemula.

Dan juga bagi kalian yang belum belajar dan membaca materi sebelumnya mengenai HTML Dasar, kalian dapat membaca nya terlebih dahulu.

Baca Juga -> Belajar HTML Dasar : Gambar Background

Apakah penting Tabel pada HTML itu?

Jawabannya Iya. Karena adanya Tabel memungkinkan kita untuk mengatur data yang ada menjadi baris dan kolom.

Mengapa kita memerlukan Tabel untuk mengatur data atau tulisan? karena dengan Tabel pada HTML, data yang ditampilkan akan menjadi lebih rapi dan enak untuk dibaca.

Agar kalian lebih paham, kita lihat saja contoh Tabel di bawah ini.

Contoh

Contoh tabel pada HTML

Dengan tabel seperti diatas, pembaca akan semakin mudah dalam memahami data yang ada. Serta memiliki kesan yang rapi dan dinamis.

Catatan !!! Tabel diatas sudah di beri tambahan CSS, jadi memiliki tampilan yang lebih bagus dari Tabel biasa.

Lalu, bagaimana pembuatan atau pendefinisian Tabel pada HTML?. Kita simak caranya di bawah ini.

Cara Mendefinisikan Tabel pada HTML

Tabel pada HTML didefinisikan dengan tag <table>

Yang mana di dalam tag <table> terdapat beberapa komponen lain seperti <tr>, <td>, dan <th>.

Penjelasan :

1. <tr> merupakan bagian tabel yang mendefiniskan setiap barisnya ( Table Row ).

2. <td> merupakan bagian tabel yang mendefinisikan setiap data nya ( Table Data )

3. <th> merupakan bagian tabel yang mendefinisikan header / judul ( Table Header )

Contoh

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Hasilnya

contoh tabel tanpa border / pembatas

Yang mana tag <th> merupakan judul / header setiap baris yang mana di bawahnya akan terdapat banyak data yang disebut <td>. Sedangkan <tr> berfungsi untuk mengatur barisnya.

Cara Menambahkan Pembatas / Border

Lalu bagaimana cara untuk menambahkan pembatas / border pada tabel tersebut? caranya sangat mudah. Kalian cukup menambahkan properti CSS yang namanya border.

Contoh

table, th, td {
  border: 1px solid black;
}

1 px pada contoh diatas merupakan ketebalan dari Border nya. Dapat kalian ganti sesuai keinginan kalian masing-masing.

Hasilnya

Contoh tabel menggunakan border / pembatas

Atau kalian juga bisa memberikan pembatas / border yang menjadi satu. Tidak banyak seperti tadi. Bagaimana maksudnya? kalian lihat contoh tabel nya saja di bawah ini.

Cara penulisan nya

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Kita cukup menambahkan properti CSS yang lain yaitu, border-collapse: collapse.

Mungkin cukup sekian pembelajaran kita mengenai Belajar HTML Dasar tentang Tabel. Pada artikel selanjutnya kita masih belajar seputar tabel lagi.

Karena jika di lanjutkan di sini akan terlalu panjang hehe. Jadi, materi Tabel pada HTML belum selesai sampai disini ya.

Terima kasih dan sampai jumpa.