Tutorial Belajar Border dan Spacing di HTML

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>

<tr>

<th colspan="2">Tanggal</th>

<th>Hari Besar</th>

</tr>

<tr>

<td>Hari Pancasila</td>

</tr>

<tr>

<td>Hari Laut Sedunia</td>

</tr>

<tr>

<td>Hari Koperasi</td>

</tr>

<tr>

<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

Tutorial Belajar Border dan Spacing di HTML

PRAKTEK

0 Response to "Tutorial Belajar Border dan Spacing di HTML"

Posting Komentar