Table style
<!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=utf-8" />
<style type='text/css'>
body {
background: #F0E7AC url(images/bg.jpg) repeat-x center top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
* {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#wrap {
width: 940px;
margin: auto;
}
#top {
height: 45px;
}
#header {
background: url(images/header.jpg) no-repeat center;
height: 228px;
}
#header .description {
display: block;
color: #FFFFCC;
font-size: 24px;
padding: 55px 25px 25px 300px;
}
.description span {
display: block;
color: #99CC33;
font-size: 28px;
text-align: center;
}
h1,h2,h3,h4,h5 {
font-family: "Trebuchet MS", Arial, Verdana;
}
#sitename {
display: block;
float: left;
font-size: 28px;
padding-top: 5px;
}
#sitename a span {
color: #999900;
}
#sitename a,#sitename a:visited,#sitename a:active {
color: #993300;
text-decoration: none;
}
#topmenu {
list-style: none;
display: block;
float: right;
padding-top: 11px;
min-width: 400px;
}
#topmenu li {
display: inline;
}
#topmenu a {
display: block;
float: left;
height: 27px;
padding: 7px 18px 0px 18px;
text-align: center;
font: "Trebuchet MS", Arial, Verdana;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
margin-right: 1px;
}
#topmenu a {
background: url(images/menu1.jpg) repeat-x;
color: #C8BEAC;
}
#topmenu a:visited {
background: url(images/menu1.jpg) repeat-x;
color: #C8BEAC;
}
,
#topmenu a:active {
background: url(images/menu1.jpg) repeat-x;
color: #C8BEAC;
}
#topmenu a:hover {
background: url(images/menu2.jpg) repeat-x;
color: #CC0000;
}
#topmenu .active a,#topmenu .active a:visited,#topmenu .active a:active
{
background: url(images/menu2.jpg) repeat-x;
color: #CC0000;
}
#footer {
background: url(images/footertop.jpg) repeat-x center top;
padding-top: 40px;
}
#footercontents {
background: url(images/footer.jpg) repeat center top;
padding: 10px 25px 10px 25px;
text-align: center;
}
#main {
padding: 10px;
}
#main p {
line-height: 22px;
color: #333333;
margin-bottom: 20px;
}
#main .col {
width: 32%;
padding: 5px;
float: left;
}
#main h1,#main h2,#main h3,#main h4,#main h5 {
color: #999900;
}
#main h1 {
font-size: 28px;
}
#main h2 {
font-size: 24px;
}
#main h3 {
font-size: 20px;
}
#main h4 {
font-size: 18px;
}
#main h5 {
font-size: 16px;
}
.seo {
color: #CAA72F;
display: block;
font-size: 11px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
.col img {
padding: 3px;
background: #efefef;
border: solid 1px #C8BEAC;
}
#main a {
color: #CC3300;
}
#main a:visited,active {
color: #990000;
}
#main a:hover {
color: #999900;
text-decoration: none;
}
#footer a {
color: #CC3300;
}
#footer a:visited,active {
color: #990000;
}
#footer a:hover {
color: #999900;
text-decoration: none;
}
.align_c {
margin: auto;
display: block;
}
.align_l {
float: left;
margin: 5px;
}
.gallery img {
margin: 5px;
}
#credits {
background: #FFFFCC;
padding: 10px;
text-align: center;
font-size: 10px;
}
#content {
width: 65%;
float: left;
padding: 5px;
}
#sidebar {
width: 32%;
float: right;
padding: 5px;
}
#sidebar ul {
list-style: none;
}
#sidebar li {
display: block;
height: 25px;
}
#sidebar a {
display: block;
height: 20px;
margin: 5px 5px 0px 5px;
}
h1 a,h2 a,h3 a,h4 a,h5 a {
color: #999900;
text-decoration: none;
}
#wrap #main #content .postinfo {
background-color: #FFFFCC;
padding: 5px;
}
h2 a:visited,active {
color: #999900;
text-decoration: none;
}
#content ol,#content ul {
margin: 10px 10px 10px 25px;
}
#content ol li {
padding: 5px 5px 5px 20px;
}
#content ul li {
padding: 5px 5px 5px 20px;
}
.nocomments {
color: #999999;
font-size: 10px;
display: block;
}
.commentlist {
background: #F5F3E9;
list-style-type: decimal;
list-style-position: inside;
}
.commentlist li {
border-bottom: solid 2px #FDFCE1;
padding: 5px;
}
.commentlist cite {
display: block;
color: #669900;
font-weight: bold;
padding: 0px 3px 3px 20px;
}
.commentmeta {
display: block;
font-size: 10px;
padding: 3px;
color: #999999;
}
.commenttxt {
display: block;
padding: 5px 5px 5px 15px;
}
form {
margin: 0;
padding: 0;
}
.textfield {
width: 190px;
background-color: #F3F4E8;
margin: 0px;
border: 1px solid #D6D9AE;
}
.button {
display: block;
padding: 0px;
background-color: #E3E6C8;
margin: 3px;
border: 2px solid #efefef;
color: #999933;
}
.textfield:hover {
background: #FBFCF8;
}
.textfield:focus {
background: #ffffff;
}
table {
width: 90%;
border: 1px solid #EBD696;
background-color: #FFFFFF;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
th {
padding: 3px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
background-color: #EBD696;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 16px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #EBD696;
}
td {
padding: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBD696;
border-bottom-color: #EBD696;
}
form {
margin: 0;
padding: 0;
}
.textfield {
display: block;
float: left;
width: 190px;
background-color: #F3F4E8;
margin: 3px;
border: 1px solid #D6D9AE;
font-size: 12px;
padding: 5px;
}
label {
display: block;
float: left;
text-align: right;
font-weight: bold;
width: 150px;
margin: 3px;
padding: 5px;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
.button {
display: block;
float: left;
padding: 0px;
background-color: #FFFF99;
margin: 3px;
border: 2px solid #FFCC66;
color: #6C0B02;
}
#wrap #main #content .contactform .hide {
display: none;
}
.textfield:hover {
background: #FBFCF8;
}
.textfield:focus {
background: #ffffff;
}
.clear2 {
clear: left;
height: 1px;
font-size: 1px;
margin: 0;
padding: 0;
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<h1 id="sitename"><a href="#">Happy<span> Holidays</span></a></h1>
<ul id="topmenu">
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="active"><a href="tables.html">Tables</a></li>
<li><a href="forms.html">Forms</a></li>
</ul>
</div>
<div id="header">
<h2 class="description">A Free CSS Template by Ramblingsoul <span>Happy Holidays!</span></h2>
</div>
<div id="main">
<div id="content">
<h2>Table Example <span class="seo">Posted on 20 December 2007</span></h2>
<table cellspacing="0" cellpadding="0">
<tr>
<th scope="col"> </th>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
</tr>
<tr>
<th scope="row">Dolor</th>
<td>Maecenas</td>
<td>1500</td>
</tr>
<tr>
<th scope="row">Sit</th>
<td>Risus neque</td>
<td>2500</td>
</tr>
<tr>
<th scope="row">Amet</th>
<td>pharetra sit amet</td>
<td>3500</td>
</tr>
</table>
<h1>Another Table <span class="seo">Short Diescription</span></h1>
<table cellspacing="0" cellpadding="0">
<tr>
<th scope="row">Lorem</th>
<td>Maecenas</td>
<td>1500</td>
</tr>
<tr>
<th scope="row">Ipsum</th>
<td>Risus Neque</td>
<td>2500</td>
</tr>
<tr>
<th scope="row">Sit</th>
<td>Pharetra Sit Amet</td>
<td>3500</td>
</tr>
<tr>
<th scope="row">Amet</th>
<td>Total</td>
<td>8000</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
</tr>
<tr>
<td>Sit</td>
<td>Ipsum</td>
<td>Consectetuer</td>
</tr>
<tr>
<td>Adipiscing elit</td>
<td>Aliquam Negue mi</td>
<td>Euismond vitae</td>
</tr>
<tr>
<td>Morbi elit nulla</td>
<td>Laoreet Vel</td>
<td>Posuere et</td>
</tr>
<tr>
<td>Sit</td>
<td>Ipsum</td>
<td>Consectetuer</td>
</tr>
<tr>
<td>Adipiscing elit</td>
<td>Aliquam Negue mi</td>
<td>Euismond vitae</td>
</tr>
<tr>
<td>Morbi elit nulla</td>
<td>Laoreet Vel</td>
<td>Posuere et</td>
</tr>
</table>
<h1>One more Table</h1>
<table cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
</tr>
<tr>
<td>Sit</td>
<td>Ipsum</td>
<th scope="row">Consectetuer</th>
</tr>
<tr>
<td>Adipiscing elit</td>
<td>Aliquam Negue mi</td>
<th scope="row">Euismond vitae</th>
</tr>
<tr>
<td>Morbi elit nulla</td>
<td>Laoreet Vel</td>
<th scope="row">Posuere et</th>
</tr>
<tr>
<td>Sit</td>
<td>Ipsum</td>
<th scope="row">Consectetuer</th>
</tr>
<tr>
<td>Adipiscing elit</td>
<td>Aliquam Negue mi</td>
<th scope="row">Euismond vitae</th>
</tr>
<tr>
<td>Morbi elit nulla</td>
<td>Laoreet Vel</td>
<th scope="row">Posuere et</th>
</tr>
</table>
</div>
<div id="sidebar">
<h2>Recent Posts</h2>
<ul>
<li>
<a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#"> consectetuer adipiscing elit.</a></li>
<li><a href="#"> Integer ultricies massa in mauris.</a></li>
<li><a href="#"> Sed gravida iaculis urna. </a></li>
<li><a href="#">Suspendisse rhoncus, </a></li>
<li><a href="#">ante nec porta adipiscing, elit nisl aliquet </a></li>
<li><a href="#">lectus, a cursus leo ante ut lacus. </a></li>
<li><a href="#">In dignissim viverra neque. Vestibulum </a></li>
<li><a href="#">at tortor sodales tellus semper aliquam.</a></li>
<li><a href="#"> Pellentesque vel lacus.</a></li>
<li><a href="#"> Vestibulum luctus aliquet ante. </a></li>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#"> et magnis dis parturient montes, </a></li>
<li><a href="#">nascetur ridiculus mus. </a></li>
<li><a href="#">Morbi non metus id enim feugiat facilisis.</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footercontents">
Copyright © Information Goes Here
| <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Goes</a> | <a href="#">Here</a></div>
<div id="credits">
<a href="http://ramblingsoul.com">CSS Template</a> by Rambling Soul</div>
</div>
</body>
</html>
Related examples in the same category