HTML and CSS

HTML Tables vs CSS & divs - examples/help

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2009

Posts: 23

Reputation: FeralReason is an unknown quantity at this point

Solved Threads: 0

FeralReason FeralReason is offline

Offline

Newbie Poster

HTML Tables vs CSS & divs - examples/help

Jul 2nd, 2009

Admittedly, I'm new to CSS but I am having some difficulty converting tables to CSS. Here is a CSS example for a simple 4 cell table that works fine -- but only without the DOCTYPE declaration (any DOCTYPE declaration)!

Does anyone know what, if anything, I am doing wrong ? Any help would be appreciated.

(Also I would like to see any successful examples anyone would like to post.)

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<style type="text/css">
	.TblContainer {
		width:400px;
		font-family:Arial,Helvetica,sans-serif;
		background-color:yellow; 
		border:1px solid #CCCCCC;
		margin:3px 3px 3px 3px;
	}
 
	.Row {
		margin:3px 3px 3px 3px;
	}
 
	.Cell {
		color:#000000;
		border:1px solid #CCCCCC;
		float:left;
		font-size:16px;
		text-align:center;
		width:49%;
	}
</style>
</head>
<body>
<div class="TblContainer">
	<div class="Row">
		<div class="Cell">Cell 1</div>
		<div class="Cell">Cell 2</div>
	</div>
	<div class="Row">
		<div class="Cell">Cell 3</div>
		<div class="Cell">Cell 4</div>
	</div>
</div>  
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
	.TblContainer {
		width:400px;
		font-family:Arial,Helvetica,sans-serif;
		background-color:yellow; 
		border:1px solid #CCCCCC;
		margin:3px 3px 3px 3px;
	}
	
	.Row {
		margin:3px 3px 3px 3px;
	}
	
	.Cell {
		color:#000000;
		border:1px solid #CCCCCC;
		float:left;
		font-size:16px;
		text-align:center;
		width:49%;
	}
</style>
</head>
<body>
<div class="TblContainer">
	<div class="Row">
		<div class="Cell">Cell 1</div>
		<div class="Cell">Cell 2</div>
	</div>
	<div class="Row">
		<div class="Cell">Cell 3</div>
		<div class="Cell">Cell 4</div>
	</div>
</div>  
</body>
</html>

•

Join Date: May 2007

Posts: 11

Reputation: siji44 is an unknown quantity at this point

Solved Threads: 1

siji44

Offline

Newbie Poster

Re: HTML Tables vs CSS & divs - examples/help

Jul 2nd, 2009

HTML tables are used for displaying tabular data on the page.
Div's are used to build the entire layout of the page. It gives more layout control using CSS.

And i dont see any thing wrong with your above code and it works fine with my browser . But i recommend you should use Html tables itself as you want just tabluar data.

•

Join Date: May 2009

Posts: 23

Reputation: FeralReason is an unknown quantity at this point

Solved Threads: 0

FeralReason FeralReason is offline

Offline

Newbie Poster

Re: HTML Tables vs CSS & divs - examples/help

Jul 2nd, 2009

•

Originally Posted by siji44

HTML tables are used for displaying tabular data on the page.
Div's are used to build the entire layout of the page. It gives more layout control using CSS.

And i dont see any thing wrong with your above code and it works fine with my browser . But i recommend you should use Html tables itself as you want just tabluar data.

Thanx for the reply. I understand (and actually agree with) the argument but (call it self-education) I am still interested in determining to what extent css can do tables without using table tags.

In the code shown, the background should be yellow -- showing that the TblContainer div is in fact containing everything. It only shows up as a yellow band at the top of the cells in IE, FF and Chrome when I load it -- unless I delete the DOCTYPE. Are you seeing something different ?

Thanx for your help.

•

Join Date: May 2007

Posts: 11

Reputation: siji44 is an unknown quantity at this point

Solved Threads: 1

siji44

Offline

Newbie Poster

Re: HTML Tables vs CSS & divs - examples/help

Jul 3rd, 2009

I have checked your code. The problem is with the positiong of floated div's in a nested div. Please add these css:-

Help with Code Tags

(Toggle Plain Text)

.Row{
margin:3px 3px 3px 3px;
clear: both;
}


.Cell {
	color:#000000;
		border:1px solid #CCCCCC;
		float:left;
		font-size:16px;
		text-align:center;
		width:49%;
                   margin-right:3px;	}

I hope this will help you and for detailed explanation please go through this site:
http://www.positioniseverything.net/easyclearing.html

Last edited by peter_budo; Jul 6th, 2009 at 11:09 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: May 2009

Posts: 23

Reputation: FeralReason is an unknown quantity at this point

Solved Threads: 0

FeralReason FeralReason is offline

Offline

Newbie Poster

Re: HTML Tables vs CSS & divs - examples/help

Jul 3rd, 2009

•

Originally Posted by siji44

I have checked your code. The problem is with the positiong of floated div's in a nested div. Please add these css:-

.Row{
margin:3px 3px 3px 3px;
clear: both;
}

.Cell {
color:#000000;
border:1px solid #CCCCCC;
float:left;
font-size:16px;
text-align:center;
width:49%;
margin-right:3px; }

I hope this will help you and for detailed explanation please go through this site:
http://www.positioniseverything.net/easyclearing.html

Thanks much for your replay. When I add the "clear:both" line the lower edge of the container moves down to contain the first row but not the second. Adding the "margin-right:3px" statement causes all 4 cells to stack vertically rather than appear 2 to a row horizontally. However, your reference was golden !

The reference has a link to a more recent article on this problem, offering up several solutions. The most elegant is to place an "overflow:auto" in the container. This works perfectly without any other changes.

One other solution that came from my son in San Francisco is to simple set the height of the row. Apparently floating the cells causes the container to lose track of the height of what it is enclosing.

All-in-all: "overflow:auto" seems to be the best solution.

Thanx much.

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: HTML Tables vs CSS & divs - examples/help

Jul 8th, 2009

You are designing for the quirks mode of the browsers without the doctype. If you are in quirks mode, the browsers do weird things.

Standard mode puts the surrounding styles (margin, border, padding) OUTSIDE the width and height declarations, so you have to leave extra space for them.

Don't use pixels and points. Use percents and em, so the page is compatible with multiple screen resolutions.

Last edited by MidiMagic; Jul 8th, 2009 at 2:26 am.

Daylight-saving time uses more gasoline

•

Join Date: May 2009

Posts: 23

Reputation: FeralReason is an unknown quantity at this point

Solved Threads: 0

FeralReason FeralReason is offline

Offline

Newbie Poster

Re: HTML Tables vs CSS & divs - examples/help

Jul 8th, 2009

Very good! Never heard of quirks mode but (after a short search for my education) this certainly explains the problem. (http://www.quirksmode.org/css/quirksmode.html - section on overflow:visible)

Thanx for the advice !

•

Join Date: Jan 2007

Posts: 276

Reputation: kanaku is on a distinguished road

Solved Threads: 15

kanaku

Offline

Posting Whiz in Training

Re: HTML Tables vs CSS & divs - examples/help

Jul 11th, 2009

When you 'float' an element, it's like you're taking it on a higher plane. (think of the page as the airport and the floated div an... err... flying airplane)
Since the elements contained by the main div are all floated, the main div, in effect, has no 'content'. So all you see is its borders (the small band at the top).

The overflow: auto is a good solution... provided the 'overflowed' div doesn't span 100% of the page width.
If your overflowed div has 100% width, and the page exceeds one 'page length', the scrollbar that appears on the right causes the div have a less than 100% displaying area. So some browsers will display a horizontal scrollbar. Which is ugly. =(
I've had to reduce the width of my main container divs due to that problem.
And I'm still waiting for the table-cell, table-row, etc. values for the display property to be supported by all browsers.

If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.

Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.