1)
Konsep dasar model box
Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini
digunakan pada saat membahas
desain dan layout. Model box memungkinkan
untuk membuat border disekeliling elemen dan space elemen yang saling
berhubungan. Model box pada elemen HTML dapat digambar sebagai berikut
:
Gambar
6.1
konsep model box
Keterangan gambar
Margin
Daerah paling diluar yang membatasi dengan elemen HTML
yang lainnya dan tidak berwarna
Border
Border mengelilingi padding dan content. Garis yang mempunyai
warna dan ketebalan
Pemrograman Web
Page |
88
Padding
Area yang mengelilingi content. Warna padding dipengaruhu oleh
background dari box
Content
Isi dari box, bisa berupa teks maupun gambar
Ketika menentukan width dan height dari properti elemen dengan menerapkan
CSS, sebenarnya itu hanya mendefiniskan area content saja sehingga jika
menginginkan keseluruhan eleme box
maka harus diperhitungkan juga margin
-
border
-
padding
2)
Pengaturan border tabel
CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah
tabel. Format yang dapat dilakukan meliputi jenis garis (dotted, solid, dan lain
-
lain), warna border,
ketebalan garis tepi dan sebagainya. Demikian pula warna
dari sebuah sel, dapat diatur dengan CSS.
Berikut adalah contoh penerapan style border pada tabel dengan style sebagai
berikut {border:1px solid black;} dan listing kode lengkapnya seperti dibawah
ini
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
Pemrograman Web
Page |
89
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<
td>Dayandra</td>
</tr>
</table>
</body>
</html>
Jika listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai
berikut
:
Gambar
6.2 penerapan style border pada tabel
Berikut ini contoh pengaturan property
border
-
collapse:collapse;
yang
menghasilkan tampilan garis single pada tabel
<html>
<head>
<style>
table
{
border
-
collapse:collapse;
}
Pemrograman Web
Page |
90
table, td, th
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>
Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
