table design, html

Please see the attached image for the table I want to create.

Question: How this could be done?

If this could be done using CSS, please let me know so I can post a new question for this.

Thank you.
table.png
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Randy PooleCommented:
You can do this with either divs or tables by setting their widths.  Am I missing something?
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I want the html code. This is why I have posed this question.
0
rkeith2412Commented:
These will build a table for you and give you the code.

HTML Table Generator
CSS Table Generator
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Randy PooleCommented:
<html>
<head>
<style>
	.cellb
	{
		border:1px solid #000000;
	}
	.cellbrd
	{
		border-right:5px dashed #CCCCCC;
	}
	.cellwv
	{
		width:183px;
	}
	.cellbrs
	{
		border-right:5px solid #000000;
	}
	.cellh
	{
		height:82px;
	}	
	.cellw1
	{
		width:632px;
	}
	.cellw2
	{
		width:38px;
	}
</style>
</head>
<body>
<div>
	<table style="width:1360px" class="cellb">
		<tr class="cellh" style="margin:5px">
			<td class="cellb cellw1"></td>
			<td class="cellb cellw2"></td>
			<td class="cellb cellw1"></td>
			<td class="cellb cellw2"></td>
		</tr>
		<tr>
			<td colspan="3" class="cellb cellh">
				<table>
					<tr>
						<td class="cellwv cellbrd cellh"></td>
						<td class="cellwv cellbrd cellh"></td>
						<td class="cellwv cellbrs cellh"></td>
						<td class="cellwv cellbrd cellh"></td>
						<td class="cellwv cellbrs cellh"></td>
						<td class="cellwv cellbrd cellh"></td>
						<td class="cellwv cellbrd cellh"></td>
						<td class="cellwv cellh"></td>
					</tr>
				</table>
			</td>
			<td class="cellh cellw2"></td>
		</tr>
	</table>
</div> 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rbudjCommented:
With CSS:
<!doctype html>
<head>
<title>CSS Layout</title>
<style type="text/css">
body {
	text-align:center;
}
#main-wrapper {
	width:1044px;
	min-height:100px;
	border:solid #000000 1px;
	overflow:hidden;
	margin:1px 1px 1px 1px;
}
.box-large {
	width:496px;
	min-height:100px;
	background-color:#cccccc;
	border:solid #000000 1px;
	margin:1px 1px 1px 1px;
}	
.box-small {
	width:18px;
	min-height:100px;
	background-color:#999999;
	border:solid #000000 1px;
	margin:1px 1px 1px 1px;
}
.boxes {
	width:123.5px;
	min-height:100px;
	background-color:#cc22cc;
	border:solid #000000 1px;
	margin:1px 1px 1px 1px;
}
.right {
	float:right;
}
.left {
	float:left;
}

</style>
<head>
<body>
<div id="main-wrapper">
	<div class="box-small right">4</div>
	<div class="box-large right">3</div>
	<div class="box-small right">2</div>
	<div class="box-large left">1</div>
	
	<div class="box-small right">8</div>
	<div class="boxes right">7-3</div>
	<div class="boxes right">7-2</div>
	<div class="boxes right">7-1</div>
	<div class="boxes right">6-2</div>
	<div class="boxes right">6-1</div>
	<div class="boxes right">5-3</div>
	<div class="boxes right">5-2</div>
	<div class="boxes right">5-1</div>
</div><!--end of main-wrapper-->

</body>
</html>

Open in new window

0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi rbudj,

This is amazing solution. I will post shortly a new question for <div>, css solution of this post as discussed before. I will include a new image which explains my intention a bit better:

- There are total of 8 sections only. Box 5 doesn't include 3 subsections.
- The vertical dash lines are to help to see box 5 x 2/3 = box 6
- Box 6 is smaller than box 5 in the proportion shown.
- Center-line of box 2 and the center-line of box 6 must match.

This post will be a good leaning post for me. In the new image I have included user-friendly names for each section. I appreciate if you could use them as well adding any required format names you need. This will be help me to follow your code better.

here is the link for the new question:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28476411.html
-----------------------------
Randy Poole,

One important part of this post is:
- Center-line of box 2 and the center-line of box 6 must match.

I don't know how you have those vertical grayed-out lines placed there. I will look more to it until I get it. BTW, those lines are not necessary. If you wish, you could add border lines to separate 5-6 and 6-7.

Could you possibly use names for each section as shown on the new image. This will help me greatly to understand your code.

Regards,

Mike
table.png
0
Randy PooleCommented:
In my example they do match.  So do you only want 3 sections in the bottom?  I currently have border lines seperating all 8 cells in the bottom the vertcal grey dashed are also borders.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
is
cellb cell border and
cellh cell height?

And

cellbrd  also cell border for the grayed out dashed lines?

Your post is full of good details. Please comment on the following line:

It is better not to use user-friendly names as I have in the image because using generic names makes use of css more powerful with little code; do you agree with this?

Thank you,

Mike
0
Randy PooleCommented:
Those are correct for the declarations.  user-friendly names allows not only your self but future developers the ability to maintain your code much easier.  Going back in 6 months or years down the line, you will spend time trying to figure out what is going on if you do not.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I thought you maybe suggesting against use of user names. I will try to modify your code to to include user names on the attached image to see if I can put it together.

Any help on that will be appreciated.

Thanks,

Mike
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Randy,

Also, when I tried, I see there is a major problem with the code as shown on the attached image. How can I correct this?

section 2 (gap) is one &nbsp while section 6 (middleButton) is much wider.

section
1  40%
2 &nbsp
3 40%
4 15%
5 30%
6 ~20%
7 30%
8 15%
Thanks.
table2.png
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you rbudj, see you in the linked post if you have some time for it.

Thank you Randy for your great input. I will post a followup question to continue with the remaining part.

Regards,

Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.