Belajar HTML Dasar : Tabel ( Seri Kedua )

Back again at JogjaXploit. Setelah sebelumnya kita sudah belajar HTML Dasar mengenai tabel, kali ini kita akan melanjutkan seri kedua atau lanjutan dari sebelumnya. Jadi, kali ini kita masih belajar mengenai HTML Dasar, tepatnya tentang tabel.

Bagi kalian yang belum mempelajari materi HTML Dasar sebelumnya, kalian dapat mempelajari nya terlebih dahulu.

Sedikit review mengenai materi sebelumnya.

Baca juga -> Belajar HTML Dasar : Tabel ( Seri Pertama )

Jika sudah, sekarang kita mulai saja pembelajarannya.

Tabel pada HTML

Menambahkan Padding Sel pada Tabel

Padding memiliki fungsi untuk mengatur atau memberi jarak antara sel ( cell ) dan batas nya ( border ).

Pemberian padding ini sangat berguna dan penting dilakukan. Mengapa demikian? karena jika tidak memberikan padding maka sel sel pada tabel akan berdempetan sekali.

Untuk memberikan padding, kalian cukup menambahkan properti CSS, yang namanya padding.

Lebih jelasnya, kalian dapat melihat contoh di bawah ini.

th, td {

  padding: 15px;

}

Hasilnya

Kalian dapat merubah jarak padding nya sesuai dengan yang kalian inginkan. 15px menunjukkan jarak padding nya.

Judul Kolom atau Baris Menjadi Rata Kiri

Kita juga bisa membuat judul nya berada pada rata kiri, kanan, dan sebagainya.

Cara nya cukup mudah, kalian cukup menambahkan properti CSS yang namanya text-align.

Contoh

th {
  text-align: left;
}

Kalian juga dapat merubah left nya menjadi right, center, dan sebagainya.

Hasilnya

Menambahkan Spasi Border / batas

Untuk menambahkan spasi antar sel, kita dapat menggunakan properti CSS lagi, yang namanya border-spacing.

Contohnya

table {
  border-spacing: 5px;
}

Sama seperti lainnya, kalian dapat merubah value ( nilai nya ) sesuka yang kalian inginkan. Pada contoh, value nya adalah 5px.

Hasilnya

Menambahkan Caption pada Tabel

Kita bisa juga menambahkan caption atau keterangan pada Tabel.

Caranya cukup mudah, tambahkan tag <caption>.

Contohnya

<table style="width:100%">
  <caption>Tabungan Bulanan JogjaXploit</caption>
  <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>Rp.10.000.000</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>Rp.12.000.000</td>
  </tr>
</table>

Hasilnya

Mungkin itu beberapa pembelajaran mengenai Tabel pada HTML.

Kalian dapat membuat sendiri tabel yang kalian inginkan dan kalian butuhkan.

Ringkasan Materi

1. Tag <table> digunakan untuk mendefinisikan tabel

2. <tr> digunakan untuk mendefiniskan baris pada tabel

3. <td> digunakan untuk mendefiniskan data tabel

4. <th> digunakan untuk mendefiniskan judul pada tabel

5. <caption> elemen untuk mendefinisikan keterangan pada tabel

6. border digunakan untuk memberikan batas

7. padding berfungsi untuk menambahkan padding pada sel

8. text-align digunakan untuk mengatur pemerataan teks

9. border-spacing digunakan untuk memberikan jarak antar sel

Bagaimana, mudah bukan? jika ada kesuilitan silahkan bertanya melalui kolom komentar yang disediakan. Atau kalian ulangi membaca lagi dari awal, pasti bisa. Intinya tetap semangat dan fokus hehe.

Mungkin cukup sekian pembelajaran mengenai Belajar HTML tentang Tabel ini. Terima kasih dan sampai jumpa.