I'm trying to re-create the attached image in html tables. Anyone have suggestions?
HTML Tables Question
2 posts
• Page 1 of 1
- ISU_95
- Posts: 0
- Joined: February 3rd, 2006, 9:06 am
HTML Tables Question
by ISU_95 » August 5th, 2009, 6:57 am
Hello;
I'm trying to re-create the attached image in html tables. Anyone have suggestions?
I'm trying to re-create the attached image in html tables. Anyone have suggestions?
-
Ampersand - Posts: 55
- Joined: January 14th, 2011, 6:50 am
Re: HTML Tables Question
by Ampersand » September 10th, 2012, 3:13 pm
The following will get you most of the way there. It's a combination of tables and CSS. Every browser treats the way it collapses table TDs a little differently, so the exact widths are going to vary some from browser to browser. As for the circle, it likely won't work in Internet Explorer and will appear as a square instead.
- Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style type="text/css">
.grey {background-color: #d6d8d7; border: solid 1px #d6d8d7; height:90px;}
.blue {background-color: #69a3d8; border: solid 1px #d6d8d7; height:90px;}
.white {background-color: #fff; border: solid 1px #d6d8d7; height:90px;}
.one {width: 90px; min-height: 90px;}
.two {width: 180px; min-height: 90px;}
.three {width: 270px; min-height 90px;}
.four {width: 360px; min-height: 90px;}
.four {width: 450px; min-height: 90px;}
.six {width: 540px; min-height: 90px;}
.bigtable {
background-color: #d6d8d7;
border: solid 1px #d6d8d7;
}
.circle {
background-color: #fff;
width: 56px;
height: 56px;
margin-bottom: 30px;
-moz-border-radius:28px;
border-radius: 28px;
}
</style>
</head>
<body>
<table class="bigtable">
<tr>
<td colspan="1" class="blue two"> </td>
<td colspan="2" class="grey two"> </td>
<td colspan="4" class="blue three"> </td>
<td colspan="1" class="grey one"> </td>
<td colspan="1" class="blue one"> </td>
</tr>
<tr>
<td colspan="3" class="blue four"> </td>
<td colspan="3" class="blue three"> </td>
<td colspan="1" rowspan="2" class="white one"> </td>
<td colspan="2" rowspan="5" class="blue two">
<div class="circle"> </div>
</td>
</tr>
<tr>
<td colspan="1" rowspan="2" class="grey two"> </td>
<td colspan="3" class="blue three"> </td>
<td colspan="2" class="grey two"> </td>
</tr>
<tr>
<td colspan="2" class="blue two"> </td>
<td colspan="2" class="grey two"> </td>
<td colspan="2" class="blue two"> </td>
</tr>
<tr>
<td colspan="1" class="blue two"> </td>
<td colspan="6" class="white six"> </td>
</tr>
<tr>
<td colspan="1" rowspan="3" class="grey two"> </td>
<td colspan="6" class="blue six"> </td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="blue two"> </td>
<td colspan="6" class="grey six"> </td>
</tr>
<tr>
<td colspan="3" class="blue three"> </td>
<td colspan="3" class="grey three"> </td>
</tr>
<tr>
<td colspan="1" class="blue two"> </td>
<td colspan="2" class="grey two"> </td>
<td colspan="4" class="blue four"> </td>
</tr>
<tr>
<td colspan="2" class="grey three"> </td>
<td colspan="3" class="blue three"> </td>
<td colspan="1" class="grey one"> </td>
<td colspan="3" class="blue three"> </td>
</tr>
</table>
</body>
</html>
2 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 10 guests