Jumat, 22 April 2011

Membuat Tabel Dengan CSS

Pembuatan tabel dengan CSS menggunakan html.

Coding CSS
body{
background:#d4d0c8;
margin: opx;
}
h4.as_external{
color:red;
font-family: tahoma, verdana, geneva, lucida,'lucida grande', arial, helvetica, sans serif;
font-size: 14px; font weight:bold;
}
a:link, a:visited{
font-size: 14px;
color:#333333;
text-decoration:bold;
font-family:tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans serif;
}
a:hover{
color:#ff0000;text decoration: bold, underline;
}
hr{
background:#0000ff; height: 15px; border: 1px solid #000000;
}
.button{
font-family: verdana, arial, helvetica, sans serif;
font-style: normal;
font-size: 12px;
border-style:solid;

padding:1;
height: 16px;
border: 1px solid #999;
color: #30348d;
cursor: hand;
}
.inputbox{
font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans serif;
font-size: x-small;
color: #333333;
background: #ffffff;
border: 1px solid;
height:18px;
line-height:13px;
}
td.as_external{
background-color:#edf5fe;
}

Coding html.


<html>
<head>
<title>Penggunaan CSS</title>
<style type="text/css">
h4.as_internal{
color:white; font-family:tahoma, verdana, geneva, lucida,
'lucida-grande',arial, helvetica, sans-serif; font-size:14px; font-weight:bold;}
td.as_internal{
background-color:green;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table width="780" border="5" align="center">
<tr>
<td class="as_external" colspan="3" align="center"><h4 class="as_external">Penggunaan Style Sheet Extenal</h4></td>
</tr>
<tr>
<td class="as_internal" colspan="3" align="center"><h4 class="as_external">Penggunaan Style Sheet Internal</h4></td>
</tr>
</tr>
<td style="background-color:lightskyblue;" colspan="3" align="center"><h4 style="color:blue;
font-family:tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,san serif; font-size:
14px; font-weight:bold;">Penggunaan Style Sheet Inline</h4></td>
</tr>
<tr>
<td colspan="3"align="center"><h4>Tanpa Penggunaan Style Sheet</h4></td>
</tr>
<tr align="as_internal">
<td class="as_internal" colspan="3" align="center"><a href="album.html"><b>Album</b></a></td>
</tr>
<tr>
<td colspan="3"<hr></td>
<tr>
<td>Nama</td>
<td colspan="2"><input type="text" name="text1" class="inputbox" value="" size="100"></td>
</tr>
<tr>
<td>Alamat</td>
<td colspan="2"><input type="text" name="text2" class="inputbox" value="" size="100"></td>
</tr>
<tr><td colspan="3"><hr></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" class="button" value="submit">&nbsp;
<input type="reset" class="button" value="reset"></td>
</tr>
</table>
</body>
 </html>


Maka hasil dari coding diatas akan tampak seperti dibawah ini.

Tidak ada komentar:

Poskan Komentar