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.
Hasilnya
Cara nya cukup mudah, kalian cukup menambahkan properti CSS yang namanya text-align.
Hasilnya
Sama seperti lainnya, kalian dapat merubah value ( nilai nya ) sesuka yang kalian inginkan. Pada contoh, value nya adalah 5px.
Hasilnya
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;
}
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.
Menambahkan Spasi Border / batas
Untuk menambahkan spasi antar sel, kita dapat menggunakan properti CSS lagi, yang namanya border-spacing.
Contohnya
table {
border-spacing: 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>
Mungkin itu beberapa pembelajaran mengenai Tabel pada HTML.
Kalian dapat membuat sendiri tabel yang kalian inginkan dan kalian butuhkan.
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.
Posting Komentar
Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih