24 replies [Last post]
bharanidharanit
bharanidharanit's picture
Offline
Regular
India
Last seen: 9 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2010-02-11
Posts: 18
Points: 25

Hi,
I am new in HTML and CSS. I want to know while designing a website, which one provides the best layout. DIV Layout or Table Layout? Also for Cross-Browser Design, which one gives the best design?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

there is no such thing as a

there is no such thing as a div layout. divs do not replace tables. start thinking with this mind-set; style the html tags themselves to form the page structure. sometimes you will need containers to hold similar content, thats where divs come into play. click the below link for some good education
http://www.htmldog.com

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 10 years 27 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

To actually answer your question

To actually answer your question, it is much better practice to use divs to style a page than to use tabular design. Divs replace tables in terms of design, yes. People used to design with tables, but now they don't(or at least shouldn't), meaning from a design context the practice of using tables has depreciated...they've been replaced. Look past little semantics and actually answer the core of the question.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

If you want a layout, try

If you want a layout, try this as a starting point http://csscreator.com/version2/pagelayout.php

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

josephbm91 wrote: ... Look

josephbm91 wrote:

... Look past little semantics and actually answer the core of the question.

I've found that not understanding terminology is the biggest roadblock to any form of programming. Whether it's concerning simple HTML markup or complex object oriented programming. Pointing out mistakes in simple semantics or improperly defined concepts can only be helpful.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 39 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

josephbm91 wrote: To actually

josephbm91 wrote:

To actually answer your question, it is much better practice to use divs to style a page than to use tabular design. Divs replace tables in terms of design, yes. People used to design with tables, but now they don't(or at least shouldn't), meaning from a design context the practice of using tables has depreciated...they've been replaced. Look past little semantics and actually answer the core of the question.

This is the wrong answer. Cupid gave the correct one previously.

"Divs vs. table" is the wrong question and misses the point entirely. It's actually "semantic vs. unsemantic" that's the real dichotomy. We should use valid and semantic html to mark up the meaning of the content, and CSS to style the visual presentation. Ideally the two concerns are kept entirely separate, although in practice this is rarely completely possible.

I suggest a careful read of the seminal article "A Tao of Web Design" at the "List apart" site.

As long as you are stuck in the "DIV vs TABLE" mentality web design will be much harder for you than it needs to be.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 10 years 27 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

You guys are being silly,

You guys are being silly, honestly. Even though pointing out semantics is important, it bears no usefulness to the inquirer if you don't put it in the context of his rationale. It's obvious what he's referring to when he says "div layout". Styling divs to create the illusion of a print layout.

He asks "Do I use A or B?"
You say "B doesn't exist"
But you want him to use the processes entailed by B. Totally makes sense, right?

TABULAR DESIGN = BAD
Using XHTML to establish content and CSS to style it using div ids as the medium = GOOD.

Christ.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

josephbm91 wrote:... Styling

josephbm91 wrote:

... Styling divs to create the illusion of a print layout. ...

The web is not print and doesn't behave like print. To create the illusion of a print layout on a browser is quite frankly an exercise in futility.

Personally, I believe it is wrong to know someone's on the wrong path and not warn them. They can still do what they want but then my conscience is clear. Correction or admonishment should not be taken as belittling.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You are correct to a degree,

@ josephbm91 You are correct to a degree, but also it IS important to stress the correct semantics.

Whenever the statement 'replacing tables with divs' or similar might arise it is important to stress that divs DO NOT replace tables and that is regardless of whether the statement might be qualified by the word or phrase 'for design' as that phrase can be open to misunderstanding by newbies.

I'm tempted to close the thread to further comments as it's veering off on a path full of brambles and thorns Puzzled but I'll leave it for now but can we steer away from further argument and simply keep to the OP initial question if we feel it hasn't been fully responded to.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I vote to just delete the

I vote to just delete the whole thing and ban everyone involved. Party

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Banned my self and whole

Banned my self and whole primary blog on a WPMU live site the other day, I was so mad with the Sploggers that I didn't notice I was banning the spammer and ALL blogs subscribed to. Didn't I panic when I tried to return to the frontend only to be told it didn't exist Big smile I love those moments of cold panic and of riffling through live databases looking for any sign of possible salvation.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 10 years 27 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

My apologies for my attitude

My apologies for my attitude :\ I vote close the thread, OP hasn't even responded, lol.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

josephbm91 wrote: My

josephbm91 wrote:

My apologies for my attitude :\ I vote close the thread, OP hasn't even responded, lol.

Don't sweat the attitude, we tend to be a bit pedantic about semantics and structure, and about separation of structure and presentation.

As for the OP, the question was posted on Friday. Allow for the weekend; some people actually have a life. Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bharanidharanit
bharanidharanit's picture
Offline
Regular
India
Last seen: 9 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2010-02-11
Posts: 18
Points: 25

Please stop arguments

Hello friends,
Thankyou all for the reply. Please stop these arguments, and can anyone finally conclude to use which one, also the best one?

  1. Table layout
  2. Div Layout
  3. or using Both
Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

bharanidharanit wrote: Hello

bharanidharanit wrote:

Hello friends,
Thankyou all for the reply. Please stop these arguments, and can anyone finally conclude to use which one, also the best one?

  1. Table layout
  2. Div Layout
  3. or using Both

It's in the first reply: go to http://htmldog.com and do the tutorials. It will be clear after that.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 39 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

bharanidharanit wrote: Hello

bharanidharanit wrote:

Hello friends,
Thankyou all for the reply. Please stop these arguments, and can anyone finally conclude to use which one, also the best one?

  1. Table layout
  2. Div Layout
  3. or using Both

None of the above. You are asking the wrong question, so there is no "correct" answer to it. You might as well be asking "which is better, blue or red?"

To put it another way, either answer is "not even wrong".

Spend a little time on the "Tao of Web Design" article I referenced above and maybe you will begin to understand what I am trying to say. And as Cupid says, a read through of the "HTML Dog" site will also be worth your while.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi bharanidharanit, The easy

Hi bharanidharanit,
The easy answer is 2.
For the page structure in HTML4 or XHTML using div is the best choice.
Tables should only be used for tabular data not layout.
HTML5 will provide other semantic elements once it is finalized.
There's plenty of resources on the web to explain this for you such as the link provided above.
You could also search here for tables and you should find some interesting reading http://csscreator.com/search/content/tables

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Tony wrote: The easy answer

Tony wrote:

The easy answer is 2.

Why wouldn't it be 3? Tables still have their place!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Because we are talking page

Because we are talking page layout and tables still have no place in page layout.
They can be used to display tabular data.
Tables confuse page navigation for disadvantaged users by implying the wrong semantics and grouping elements that have no relationship.

bharanidharanit
bharanidharanit's picture
Offline
Regular
India
Last seen: 9 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2010-02-11
Posts: 18
Points: 25

Thankyou friends, i follow

Thankyou friends, i follow these...

bharanidharanit
bharanidharanit's picture
Offline
Regular
India
Last seen: 9 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2010-02-11
Posts: 18
Points: 25

How about this layout?

How about this layout?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Layout</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="container">
	<div id="header"><h1>Mywebsite</h1></div>
	<div id="content">
		<div id="login">&nbsp;</div>
	</div>
	<div id="footer">
		<ul id="navlinks">
		 	<li><a href="">About</a></li>
			<li>-<a href="">Advert</a></li>
			<li>-<a href="">Contact</a></li>
			<li>-<a href="">Feedback</a></li>
		</ul>
	</div>
</div>
</body>
</html>

body
{
	padding: 0;
	margin: 0;
	word-spacing: 0.2em;
	letter-spacing: 0.1em;
}
#container
{
	width: 100%;
	height: 100%;
	margin: auto;
}
#header
{
	position: absolute;
	background-color: #000;
	color: #FFF;
	width: 100%;
	height: 5em;
}
#content
{
	position: absolute;
	top: 5em;
	margin: 0;
	background-color: #FFF;
	border: solid 2px red;
	width: 100%;
}
#login
{
	float: right;
	margin: auto;
	background-color: #3399cc;
	border:solid 3px green;
	width: 300px;
	height: 100%;
}
#footer
{
	position: absolute;
	bottom: 0;
	background-color: #000;
	color: #FFF;
	width: 100%;
	height: 1.5em;
}
#navlinks
{
	font-size: 12px;
	padding:0;
	margin:0;	
	border: solid 2px yellow;
	text-align: center;
}
#navlinks li
{
	display: inline;
}
#navlinks a
{
	color: #FFF;
	text-decoration: none;
	padding-left: 5px;
}
#navlinks a:hover
{
	background-color: #FFF;
	color: #000;
}

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Why are you using the

Why are you using the absolute positioning?

bharanidharanit
bharanidharanit's picture
Offline
Regular
India
Last seen: 9 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2010-02-11
Posts: 18
Points: 25

Verschwindende wrote: Why are

Verschwindende wrote:

Why are you using the absolute positioning?

I am not sure. I try changing absolute and relative, and absolute only satisfies my desired output? Anything wrong in using absolute?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

bharanidharanit wrote:I am

bharanidharanit wrote:

I am not sure. I try changing absolute and relative, and absolute only satisfies my desired output? Anything wrong in using absolute?

There's nothing inherently wrong with using absolute positioning. The problem is you say you're not sure why you're using it and that's what I expected the answer to be. I'm not sure the use of AP is appropriate in this case.

I know this all sounds like a bunch of philosophical hooey but it's worth looking into. There is a post here called something like "absolute positioning pitfalls" that will probably help. You probably want to style with floats instead of absolute positioning.

Check out the layout generator in the tools section of this site and try to make what you want and then tear into the code and see why it works.

bharanidharanit
bharanidharanit's picture
Offline
Regular
India
Last seen: 9 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2010-02-11
Posts: 18
Points: 25

ok i will do, thankyou

ok i will do, thankyou