Thursday, April 19, 2007

css for table

Here is the HTML for table

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< title>CSS Tables< /title>
< link href="styles.css" rel="stylesheet" type="text/css" />
< /head>
< body>
< table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
< caption>Table 1: Power Mac G5 tech specs < /caption>
< tr>
< th scope="col" abbr="Configurations" class="nobg">Configurations< /th>

< th scope="col" abbr="Dual 1.8">Dual 1.8GHz< /th>
< th scope="col" abbr="Dual 2">Dual 2GHz< /th>
< th scope="col" abbr="Dual 2.5">Dual 2.5GHz< /th>
< /tr>
< tr>
< th scope="row" abbr="Model" class="spec">Model< /th>
< td>M9454LL/A< /td>

< td>M9455LL/A< /td>
< td>M9457LL/A< /td>
< /tr>
< tr>
< th scope="row" abbr="G5 Processor" class="specalt">G5 Processor< /th>
< td class="alt">Dual 1.8GHz PowerPC G5< /td>
< td class="alt">Dual 2GHz PowerPC G5< /td>

< td class="alt">Dual 2.5GHz PowerPC G5< /td>
< /tr>
< tr>
< th scope="row" abbr="Frontside bus" class="spec">Frontside bus< /th>
< td>900MHz per processor< /td>
< td>1GHz per processor< /td>
< td>1.25GHz per processor< /td>

< /tr>
< tr>
< th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache< /th>
< td class="alt">512K per processor< /td>
< td class="alt">512K per processor< /td>
< td class="alt">512K per processor< /td>
< /tr>

< /table>

< p>< a href="styles.css">→ download stylesheet< /a>< /p>
< /body>
< /html>

And this is the CSS



body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

#mytable {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "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 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}


td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}



No comments: