CSS : Table Style
Anda tau CSS, yap betul CSS singkatan dari Cascading Style Sheet yang merupakan
syntax untuk mempercantik Web Page, syntax dari CSS ini jelas berbeda dari
syntax HTML, PHP, dank ode – kode Web lainnya, syntax ini tidak terlalu rumit.
Nah sekarang saya akan memberikan ilmu tentang CSS, disini saya akan
memodifikasi table yang dibuat dengan kode HTML dan akan saya tambahkan dengan
menggunakan kode CSS. Apa yang terjadi…???? Kita lihat saja kode dibawah ini,
anda tidak perlu mengetik ulang kode tersebut, tinggal copas aja.
<html>
<head>
<title>Table Style : Muhammad Anwari</title>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica,
sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Ubuntu</td>
<td>Afrika</td>
</tr>
<tr class="alt">
<td>2</td>
<td>Fedora</td>
<td>Sweden</td>
</tr>
<tr>
<td>3</td>
<td>OpenSuse</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>4</td>
<td>Mandriva</td>
<td>Austria</td>
</tr>
<tr>
<td>5</td>
<td>ArchLinux</td>
<td>New Zealand</td>
</tr>
<tr class="alt">
<td>6</td>
<td>Backtrack</td>
<td>Canada</td>
</tr>
<tr>
<td>7</td>
<td>Gento</td>
<td>Japan</td>
</tr>
<tr class="alt">
<td>8</td>
<td>Centos</td>
<td>Italy</td>
</tr>
<tr>
<td>9</td>
<td>Mint</td>
<td>Rusia</td>
</tr>
</table>
</body>
</html>
Simpan dengan table.html
Anda bias mengotak – atik syntax tersebut, terserah mau anda
buat apa aja.. yang penting ilmu ini bermanfaat untuk anda ;)
0 Komentar:
Posting Komentar