[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

table design, html

Posted on 2014-07-15
12
Medium Priority
?
202 Views
Last Modified: 2014-07-15
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
0
Comment
Question by:Mike Eghtebas
12 Comments
 
LVL 21

Expert Comment

by:Randy Poole
ID: 40196775
You can do this with either divs or tables by setting their widths.  Am I missing something?
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40196791
I want the html code. This is why I have posed this question.
0
 
LVL 5

Expert Comment

by:rkeith2412
ID: 40196876
These will build a table for you and give you the code.

HTML Table Generator
CSS Table Generator
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 21

Accepted Solution

by:
Randy Poole earned 1400 total points
ID: 40196879
<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
 
LVL 16

Assisted Solution

by:rbudj
rbudj earned 600 total points
ID: 40196960
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40197565
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
 
LVL 21

Expert Comment

by:Randy Poole
ID: 40197609
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40197630
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
 
LVL 21

Expert Comment

by:Randy Poole
ID: 40197640
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40197709
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
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40197770
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
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 40197842
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question