Are tables a thing of the past? 2

[southbeach]

I have made up my mind about going 100% compliant on all pages I write. While perusing through some of the resulting pages from a google search, it appears that the argument of not using tables is gaining popularity.

I looked at

http://www.w3schools.com/tags/tag_table.asp

and they make no mention of it been deprecated.

So, what is the deal with it? Some of the material I've read say that using tables slows down rendering pages. Personally, I find it virtually impossible to layout a page without the use of tables.

What say you?

 

[vacunita]

Tables are no deprecated, its just their use has been shifted more towards their semantically correct uses.

tables are not meant to be used for page layout, but to present Tabular data such as information from a database. This is the correct and intended usage of tables.

Using tables for layout involves complicated nesting of tables that yes slows down rendering of the page.






----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[southbeach]

I can see the logic on that. I was very fearful on having to change all of my PHP routines where data grid are rendered using tables.

As per laying out pages, I have started to use layers or <div> tag combined with CSS. Now mind you, when I say started this does not mean that I have been doing this for a long time, I am a new comer but learning lots of things and wish to learn the right things thus employ proper development standards.

That said, I find it very cumbersome to get layers to fall where I need them. I am not sure if using absolute is a very good idea ... and relative makes things in places where you may not expect them ... With browsers doing whatever they want (FF vs IE) and monitors offering a variety of resolutions, and people changing properties to suit their personal preferences, makes for a real challenge.

Of course, no one has told me that it would be easy!

I guess that what I am trying to find out is, if not through use of tables, how then can one layout a page?

Any tutorial or reference material you could point me to?

Thanks!

 

[cLFlaVA]

You should develop your content with appropriate HTML elements first, in a logical order (logo, then menu, then title, then content, for example), and then apply style to it all when the content is complete. Your page should look readable if you remove the CSS completely (albeit plain).

Take a look through A List Apart's several layout articles (

http://www.alistapart.com/topics/design/layout/).

If you have specific questions, come back and we'll be glad to help.

You may also want to check out glish and max design.

----

 

[vacunita]

Its a Good practice to stop thinking of cells and columns and start thinking of how the page should look.

Instead of divinding eveyrthing into tiny cells you have boxes or containers for your content. you of course have to logically think the physical order of your page. you wouldn't have a header div at then end of yout html would you?


Think of a page with a header a nav bar and a content area.

You have the header div as probably the first thing. This should require no positioning at all. and actually unless you explicitley need it, relative or absolute positioing should be avoided.

Next would be a Navigation bar either horizontally under
the header or vertically under it as a bar, the basic html is still the same, a single div.

Then you have your content div now depending on where you wanted your navigation div, you could style your content div.

All in all that basic layout is comprised of only 3 div's/

<div id="headerdiv"></div>
<div id="navdiv"></div>
<div id="contentdiv"></div>

That's it.

Instead of having a convoluted set ot tables and cells and what not. its clear and easy to see what each div is for. Also its easy to maintain.

Of course you want to have your Div's be styled. backgrounds, fonts, positions.

As it is with no CSS the divs would be stacked. Just give them widths and maybe a float here and there and you are set.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[cLFlaVA]

I respectfully disagree with vacunita. You don't need to use divs for anything necessarily, unless specific need arises. The same example provided above could just as easily be done as below. This would also be more semantically correct.

<img id="logo" src="../logo.gif" alt="My Logo" ... />
<ul id="nav-menu">
  <li>Home</li>
  <li>Section 1</li>
  <li>Section 2</li>
</ul>
<h1>My Page Title</h1>
<p>first paragraph of content...</p>
<p>second paragraph of content...</p>
<p>third paragraph of content...</p>

----

 

[vacunita]

I never said you "needed" to use them, and of course whatever you put inside can still be any of the things you used.

I agree a list for a nav bar is more semantically correct and you can have one inside the nav bar along with whatever else you may need.

But a paragraph for an entire content section seems a little too limited. I mean you can have any number of things inside a content section, a paragraph by definition alludes to text and being an inline element supports that, but you may want to have other things such as a table there. Putting a table inside a <p> tag would not be semantically correct.
I would consider a paragraph a part of the content area, not the content area itself.







----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BigRed1212]

That said, I find it very cumbersome to get layers to fall where I need them..... With browsers doing whatever they want (FF vs IE) and monitors offering a variety of resolutions, and people changing properties to suit their personal preferences, makes for a real challenge.

I would suggest that perhaps you don't really want the content to fall where you need it to, but where your audience needs it to. People look at Web pages on cell phones and Wii's and iPods and whatever. Some people need big type, some use screen readers. You can't design like one designs for print so that stuff looks/is exactly the same everywhere. It doesn't work that way.

One of the strengths of the whole structural markup and semantic markup and layout without tables idea is that while content may not look exactly the same across everything the content can be accessed across everything elegantly.

Use tables. Use them for tabular data. That is what they are for. The recommendation, however is that tables weren't intended for layout (although I agree they are easy to use that way) and shouldn't be used for it.

 

[southbeach]

In summary:
(1) Use table to render data extracted from database which needs to be displayed in a row + column format - I hope this also includes data entry forms.
(2) Use layers as container for content segments
(3) Use CSS to apply attributes or properties to content
(4) Avoid using relative or absolute positioning - This one confuses me, I thought you had to use one or the other. Relative being a default ...
(5) Think semantically when employing a tag, this may help understand where it is best used.

Care to add anything else?

 

[vacunita]

[quote(4) Avoid using relative or absolute positioning - This one confuses me, I thought you had to use one or the other. Relative being a default ...[/quote]

Actually no. you don't really need to use any positioning on your elements. You can just leave them be positioned with the document flow.

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

Positioning should only be used when absolutely necessary.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.