PayneLess Designs - Table Example #005

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Table Example #005</title>
<meta name="created" content="Wed, 01 Sep 2010 02:10:08 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="copyright" content="PayneLess Designs">
<meta name="author" content="Ron">

<style>
div#table_wrap {
width: 900px;
height: 622px;
margin: 0 auto;
/* background: url(images/table.jpg) no-repeat center scroll; */
}

table#top {
width: 100%;
height: 280px;
border-collapse: collapse;
background: #a5fffb;
}

table#top td#top_left {
width: 50%;
}

table#top td#top_right {
width: 50%;
}

table#top #top_left , table#top #top_right {
height: 88px;
border: 0 solid #f00; /* Used for layout only */
}

table#top td#second_row {
width: 100%;
height: 48px;
border: 0 solid #f00; /* Used for layout only */
border-top: 1px solid #c0c0c0; /* Used for layout only */
}

table#top td#third_row_left {
width: 50%;
}

table#top td#third_row_right {
width: 50%;
}

table#top td#third_row_left, table#top td#third_row_right {
height: 145px;
border: 0 solid #f00; /* Used for layout only */
background: #f6ff98;
}
/* ======================================================== */
table#second {
width: 100%;
height: 292px;
border-collapse: collapse;
}

table#second td#fourth_row_left {
width: 140px;
background: #8b8a00;
}

table#second td#fourth_row_middle {
width: 530px;
background: #908a9b;
}

table#second td#fourth_row_right {
width: 228px;
background: #8a4413;
}

table#second td#fourth_row_left, table#second td#fourth_row_middle, table#second td#fourth_row_right {
height: 290px;
border: 0 solid #f00; /* Used for layout only */
}
/* ======================================================== */
table#third {
width: 100%;
height: 48px;
border-collapse: collapse;
}

table#third td#fifth_row_left {
width: 140px;
background: #23009f;
}

table#third td#fifth_row_middle {
width: 530px;
background: #8f00a0;
}

table#third td#fifth_row_right {
width: 228px;
background: #8a4413;
}

table#third td#fifth_row_left, table#third td#fifth_row_middle, table#third td#fifth_row_right {
height: 48px;
border: 0 solid #f00; /* Used for layout only */
}
</style>

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css_styles_ie.css">

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="table_wrap">

<table id="top">
<tr>
<td id="top_left">top row, left</td><td id="top_right">top row, right</td>
</tr>

<tr>
<td id="second_row" colspan="2">second row</td>
</tr>

<tr>
<td id="third_row_left">third row, left</td><td id="third_row_right">third row, right</td>
</tr>
</table>

<table id="second">
<tr>
<td id="fourth_row_left">fourth row, left</td><td id="fourth_row_middle">fourth row, middle</td><td id="fourth_row_right">fourth row, right</td>
</tr>
</table>

<table id="third">
<tr>
<td id="fifth_row_left">fifth row, left</td><td id="fifth_row_middle">fifth row, middle</td><td id="fifth_row_right">fifth row, right</td>
</tr>
</table>
</div>

</body></html>