Hari ini saya ingin menambahkan tabel pada tulisan saya. Saya kebetulan menggunakan html untuk membuat tabel yang saya inginkan. Setelah selesai dan saya lihat / preview ternyata border-nya tidak ada / hilang.
# Ini adalah contoh tabel yang saya tulis
<table style="width:100%">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>Code language: HTML, XML (xml)Ketika saya cek / preview ternyata tidak ada bordernya, seperti tampilan di bawah ini.
| Kolom 1 | Kolom 2 |
|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Saya akhirnya mencoba untuk menelusuri apa yang salah dan apa yang perlu saya tambahkan. Akhirnya saya menemukan cara mengatasi border yang tidak muncul.
Lalu, bagaimana memunculkan / menambahkan border pada tabel html ?
Ternyata, setelah mencari tutorial, saya bertemu dengan salah satu cara. Cara tersebut adalah dengan menambahkan style untuk table, th dan td. Contohnya adalah sebagai berikut.
<style>
table, th, td {
border:1px solid black;
}
</style>Code language: HTML, XML (xml)Setelah saya menambahkan style di atas, tampilan tabel saya menjadi seperti ini.
Border sudah terlihat pada tabel.
Jika ingin border-nya lebih tebal, bisa diatur dengan mengganti nilai border menjadi 2px (misal). Untuk warna juga bisa diubah sesuai keinginan.
Bagaimana dengan tabel pada block html wordpress ?
Wah, saya juga penasaran. Saya mencoba menerapkan style di atas pada block html wordpress, tapi tidak tampak bagus saat preview. Mungkin selanjutnya akan kita kulik dan kita bahas.
Referensi.
Berikut ini adalah referensi untuk bahasan kita kali ini.
- Tutorial tabel pada HTML pada laman w3school.
- Laman editor w3school.
Penutup.
Demikian tadi, cara sederhana memunculkan border untuk tabel pada html. Semoga bisa menjadi referensi sederhana untuk kita semua. Kemungkinan akan masih banyak bahasan seputar html yang akan kita bahas. Jika penasaran boleh komen di bawah ya ? Terima kasih dan sampai berjumpa pada bahasan selanjutnya !
Leave a Reply