...

Visit www.murdansianturi.NET

Monday, December 26, 2011

Resep cara membuat tabel selang seling warna, menggunakan HTML dan 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;
}
margin-left: 3px;
}
-----------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid Table | Blog.tri-hartanto.comtitle>
<link rel="stylesheet" href="grid-table.css"/>
head>
<body>
<table id="tabelwarna" cellspacing="0" width="150px">
<tr>
<th scope="col">Noth>
<th scope="col">Namath>
tr>
<tr class="alts"><td>1td><td>Anditd>tr>
<tr class="alt"><td>2td><td>Marinatd>tr>
<tr class="alts"><td>3td><td>Firaztd>tr>
table>
body>
html>
Contoh:

Grid Table | Blog.tri-hartanto.com


No Nama
1Andi
2Marina
3Firaz

No comments: