Halooo teman-teman terimakasih telah mengunjungi blog saya, Saya akan memosting cara membuat table menggunakan HTML dan css:
Dibawah ini adalah table yang sudah jadi:
Dan ini Script HTML:
<html>
<head>
<title="Web Notepad"></title>
<style>
</style>
<link rel="stylesheet" href="css/style.css" />
</head>
<Body>
<table width="800px" height="auto" border="1" cellspacing="0" align="center" >
<CAPTION>
<marquee>
<center> <font face="chlorinar" color="red" font size="20" style="background:auto">WEB NOTEPAD </font>
</marquee>
</CAPTION>
<tr height="200px" class="atas">
<td colspan="3"><center>Header</td>
</tr>
<tr>
<td class="tengah"><center>kolom 1 baris 1</td>
<td class="tengah"><center>kolom 2 baris 2</td>
<td class="tengah"><center>kolom 3 baris 3</td>
</tr>
<tr>
<td height="500"><center>kolom 1 baris 1 Kiri</td>
<td><center>kolom 2 baris 2 Tengah</td>
<td><center>kolom 3 baris 3 Kanan</td>
</tr>
<tr id="bawah">
<td width="150" height="100" colspan="3" align="center">Bawah</td>
</tr>
</table>
</body>
</html>
Dan ini CSS stylenya:
body{
/*background-color:#FF99CC;*/
background-image:url('../images/iron.jpg');
/*position:fixed;*/
/*background:-webkit-linear-gradient(#99FF00, #99FFFF);
background: -moz-linear-gradient(#99FF00, #99FFFF);
background: -ms-linear-gradient(#99FF00, #99FFFF);
background: -o-linear-gradient(#99FF00, #99FFFF);
background: linear-gradient(#99FF00, #99FFFF);*/
/*background-position: center;
background-repeat:no-repeat;
background-size:cover*/
/*background-clip:border-box;
background-break:bounding-box;*/
background-attachment:fixed;
overflow-style:auto;
}
table{
color:#9900FF;
border:5px solid #FF99CC;
border-radius:5px;
/*border-bottom-color:#66FF00;
border-bottom-style:groove;
border-bottom-width:5px;*/
box-shadow: 10px 10px 10px 5px #888888;
}
.atas {/*ini dipanggil di html dengan atribut class*/
background-color:#FFFF99;
}
#bawah{/*ini di panggil di html dengan atribut id*/
background-color:#00ffff;
}
.Tengah{/*ini dipanggil di html dengan atribut class*/
Background-color:#00FF00;
}
Terima kasih telah berkunjung di Blog Kami ^_^
Terima kasih telah berkunjung di Blog Kami ^_^
Tidak ada komentar:
Posting Komentar