Tutorial Belajar Border dan Spacing di HTML
Sunday, May 14, 2017
Add Comment
Saat kita membuat table dengan menambahkan atribut
border, kita akan mendapatkan table dengan border dan spasi antar garis bordernya seperti ini:| Tanggal | Hari Besar | |
|---|---|---|
| Juni | 1 | Hari Pancasila |
| Juni | 8 | Hari Laut Sedunia |
| Juli | 12 | Hari Koperasi |
| Juli | 23 | Hari Anak Nasional |
Kita akan ingin mengubah tampilan border bawaan table ini dengan garis yang lebih tegas. Untuk itu kita harus mereset style bawaan table ini dengan style berikut:
table {
border-spacing: 0;
border-collapse: collapse;
}
| Tanggal | Hari Besar | |
|---|---|---|
| Juni | 1 | Hari Pancasila |
| Juni | 8 | Hari Laut Sedunia |
| Juli | 12 | Hari Koperasi |
| Juli | 23 | Hari Anak Nasional |
Setelah ini kita dapat mengatur spasi pada
<td> dan <th> menggunakan property padding.PRAKTEK
- Pada editor terdapat table yang sudah kita buat pada step terdahulu. Jalankan dan lihat hasilnya.
- Tambahkan style untuk table di dalam tag
<style>sehingga table tampil dengan border yang lebih tegas.
<style>table {
border-spacing: 0;
border-collapse: collapse;
</style>
} - Tambahkan style padding pada
<td>dan<th>sebesar 5px sehingga ada jarak antara border dengan teks di dalamnya.
<style>table {
border-spacing: 0;
border-collapse: collapse;
</style>
}
td, th {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<style>
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Tanggal</th>
<th>Hari Besar</th>
</tr>
<tr>
<td>Juni</td>
<td>1</td>
<td>Hari Pancasila</td>
</tr>
<tr>
<td>Juni</td>
<td>8</td>
<td>Hari Laut Sedunia</td>
</tr>
<tr>
<td>Juli</td>
<td>12</td>
<td>Hari Koperasi</td>
</tr>
<tr>
<td>Juli</td>
<td>23</td>
<td>Hari Anak Nasional</td>
</tr>
</table>
</body>
</html>
Hasilnya:
| Tanggal | Hari Besar | |
|---|---|---|
| Juni | 1 | Hari Pancasila |
| Juni | 8 | Hari Laut Sedunia |
| Juli | 12 | Hari Koperasi |
| Juli | 23 | Hari Anak Nasional |
0 Response to "Tutorial Belajar Border dan Spacing di HTML"
Post a Comment