Menentukan Garis Dengan Border Style

Pada postingan kali ini,saya akan membahas tentang cara memanfaatkan style untuk mengatur garis border.Style bisa kita satukan ke dalam tag<table> dan <td>.Contohnya adalah sebagai berikut :



  • Border-width berfungsi untuk mengontrol ketebalan garis border.Satuannya adalah pixel
  • Border-color berfungsi untuk mengontrol warna garis border.Isilah dengan nama warna yang ingin dipakai atau dengan kode hexadecimal atau RGB
  • Border-style berfungsi untuk mengontrol jenis garis border.Jenis-jenis garisnya adalah dotted,dashed,double,groove,ridge,inset,outser dan none
Berikut contoh sederhana pembuatan tabel menggunakan ketiga atribut di atas :


<!DOCTYPE HTML>

<html>
</head>
<title>HTML TABEL BORDER</title>
</head>

<body>

<h1>Cara Menentukan Garis Menggunakan Style</h1>

<table style="border-style: dashed; border-color: black"; border ="1">

<tr>
<td colspan="3" style="border-style: dotted; border-color: red">
<p style="text-align: center">JUDUL TABEL</p>
</td>

<tr>
<td width = "1000px">Sel Nomor 1</td>
<td width = "500px">Sel Nomor 2</td>
<td width = "100px">Sel Nomor 3</td>
</tr>

<tr>
<td>Sel Nomor 4</td>
<td> Sel Nomor 5</td>
<td>Sel Nomor 6</td>
</tr>

</table>

</body>
</html>

Hasilnya akan menjadi seperti gambar di bawah (Gambar bisa diklik untuk lebih jelas) :


Sekarang kita sudah bisa berkreasi dengan border yang memanfaatkan style!Jika ada script yang kurang jelas atau belum diketahui fungsinya,anda dapat melihat di postngan saya sebelumnya di label HTML Dan CSS.Atau bisa bertanya di kolom komentar ^ ^.Terima Kasih !

Comments