Setelah kemarin membuat tabel dengan html biasa. Sekarang
tampilan tabel akan di percantik dengan tambahan aplikasi css. Pertama buat
script dalam notepad rapid css.
Berikut contoh scripnya :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Grid Table</title>
<link rel="stylesheet"
href="grid.css"/>
</head>
<body>
<table id="tabelwarna"
cellspacing="0" width="150px">
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
</tr>
<tr
class="alts"><td>1</td><td>Andi</td></tr>
<tr
class="alt"><td>2</td><td>Marina</td></tr>
<tr
class="alts"><td>3</td><td>Firaz</td></tr>
</table>
</body>
</html>
Simpan dengan nama grid.html
Keterangan : script <link
rel="stylesheet" href="grid.css"/> adalah untuk
menghubungkan ke link grid.css
Kemudian buat document dengan format.(dot)css
Skript grid.css :
#tabelwarna { width: 250px;}
th {
font: bold 10px
"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px
solid #C1DAD7;
border-bottom: 1px
solid #C1DAD7;
border-top: 1px
solid #C1DAD7;
letter-spacing:
2px;
text-transform:
uppercase;
text-align: left;
padding: 6px 6px
6px 6px;
background:
#CAE8EA url(images/bg_header.jpg) no-repeat;
}
td {
font: bold 11px
"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
border-right: 1px
solid #C1DAD7;
border-bottom: 1px
solid #C1DAD7;
border-left: 1px
solid #C1DAD7;
padding: 6px 6px
6px 6px;
}
tr.alt {
background:
#F5FAFA;
color: #797268;
}
tr.alts {
background:#FFF;
color: #797268;
}
* html .threepxfix{
margin-left: 3px;
}
hasil :
0 comments:
Post a Comment