DaniWeb IT Discussion Community - HTML Tables vs CSS & divs

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- HTML and CSS (http://www.daniweb.com/forums/forum143.html)

- - HTML Tables vs CSS & divs - examples/help (http://www.daniweb.com/forums/thread201120.html)

FeralReason

Jul 2nd, 2009 1:50 am

HTML Tables vs CSS & divs - examples/help

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.)

<!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>

siji44

Jul 2nd, 2009 3:14 am

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

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.

FeralReason

Jul 2nd, 2009 10:02 am

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

Quote:

Originally Posted by siji44 (Post 906055)

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.

siji44

Jul 3rd, 2009 5:48 am

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

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

FeralReason

Jul 3rd, 2009 9:42 am

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

Quote:

Originally Posted by siji44 (Post 907261)

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.

MidiMagic

Jul 8th, 2009 2:25 am

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

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.

FeralReason

Jul 8th, 2009 10:19 am

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

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 !

kanaku

Jul 11th, 2009 7:14 am

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

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.

All times are GMT -4. The time now is 7:15 pm.