tableless design

Discussion of non-phpBB related topics with other phpBB.com users.
Forum rules
General Discussion is a bonus forum for discussion of non-phpBB related topics with other phpBB.com users. All site rules apply.
User avatar
santaClause
Registered User
Posts: 32
Joined: Mon Aug 04, 2003 1:41 pm

tableless design

Post by santaClause » Sat Jun 25, 2005 8:32 pm

Hello all,

What are the advantages of having a tableless design? I really have no problems using tables because they are personally much more easier to manipulate, especially with a dynamic script.

Although I believe that having to declare a <table><tr> tags might be a little too much since the contents are really contained within the <td> tags and can all be replaced with a simple <div> tags, I do believe PHP and other dynamic scripting language made designing an HTML table much easier.

But as far as manipulation, wouldn't using tables have much more options compared to div tags? I'm not just talking about <table><tr><td> tags but also an inclusion of <div> tags or any other tags within the table. From my understanding, tableless design must not consist any <table> tags, while designing an HTML table can consist of other combinations tags.

The reason why I'm asking is because I recently decided to go freelance in web designing, but I've seen few employers out there asking for "knowledge of tableless design", but I just fail to see how this is an advantage.

I'd really appreciate your input on this guys.

Thanks

Swizec
Former Team Member
Posts: 1701
Joined: Mon Mar 10, 2003 9:42 pm
Location: Slovenia
Contact:

Post by Swizec » Sat Jun 25, 2005 8:57 pm

tableless desing is really great because you can position elements with a precision of 1px

the problem is that no two browser read it the same

User avatar
MHobbit
Former Team Member
Posts: 4761
Joined: Thu Mar 18, 2004 5:32 pm
Location: There and Back Again

Post by MHobbit » Sat Jun 25, 2005 9:00 pm

Learn CSS, then you'll know more reasons why.
Former phpBB MOD Team member
No private support is offered.
"There’s too many things to get done, and I’m running out of days..."

User avatar
santaClause
Registered User
Posts: 32
Joined: Mon Aug 04, 2003 1:41 pm

Post by santaClause » Sat Jun 25, 2005 9:30 pm

MennoniteHobbit wrote: Learn CSS, then you'll know more reasons why.


I understand where you are comming from with the power CSS. However, that's CSS...which has the same manipulation power on both <table> and <div> tags, but offer more options with the combination of <table> and <div> tags. But that combination disqualifies it as a "tableless" design.

As an example:
Let's pretend that as of today phpBB has just started the development of their great phpBB software. Keeping that in mind, would it be much more efficient not to use <table> tags? If table tags are not used, how would that be an advantage compared to using it? That's really where I'm trying to get at.

User avatar
santaClause
Registered User
Posts: 32
Joined: Mon Aug 04, 2003 1:41 pm

Post by santaClause » Sat Jun 25, 2005 9:31 pm

MennoniteHobbit wrote: Learn CSS, then you'll know more reasons why.


I understand where you are comming from with the power CSS. However, that's CSS...which has the same manipulation power on both <table> and <div> tags, but offer more options with the combination of <table> and <div> tags. But that combination disqualifies it as a "tableless" design.

As an example:
Let's pretend that as of today phpBB has just started the development of their great phpBB software. Keeping that in mind, would it be much more efficient not to use <table> tags? If table tags are not used, how would that be an advantage compared to using it? That's really where I'm trying to get at.

Swizec
Former Team Member
Posts: 1701
Joined: Mon Mar 10, 2003 9:42 pm
Location: Slovenia
Contact:

Post by Swizec » Sat Jun 25, 2005 10:12 pm

nope

tables are more efficient
easier to manipulate, more managable, better supported all over

User avatar
smithy_dll
Former Team Member
Posts: 7630
Joined: Tue Jan 08, 2002 6:27 am
Location: Australia
Name: Lachlan Smith
Contact:

Post by smithy_dll » Sat Jun 25, 2005 10:21 pm

Because tables aren't a design element in the HTML definition.

They are stated as being strictly for tabular data and they cannot force different browsers how to render tables. A text browser may for example render your table like this even though you said it should be borderless.

Code: Select all

+--------------------+---------------+
|                    |               |
+--------------------+---------------+
|                    |               |
+--------------------+---------------+
|                    |               |
+--------------------+---------------+
now nest several tables like that and it cuts off your website from those on small screen devices, text browsers and makes things difficult for the visually impared.

Therefore it is recommended to use tables for tabular datum.

Kazer0
Registered User
Posts: 876
Joined: Sun Nov 10, 2002 2:05 am
Location: {postrow.POSTER_FROM}
Contact:

Post by Kazer0 » Sun Jun 26, 2005 2:32 am

"Knowledge of tableless design" probably includes knowledge of CSS and how it works. If you don't know CSS, then tableless designs are useless.

Tables are meant for data, as was said before, and nothing else. Design using tables is a big frown from the upper web design community. As well as not using CSS; CSS is required to maintain standards, and tag elements are also frowned upon.
Andrew Charron || alexis support forum || Specializing in phpBB website template integration
Hurry up, my feash is siek.
AndrewCharron.com version 5 released!

romans1423
Registered User
Posts: 1552
Joined: Sat Nov 02, 2002 4:44 pm
Location: Connersville, IN
Name: Rick Beckman
Contact:

Post by romans1423 » Sun Jun 26, 2005 2:34 am

Further, using DIVs rather than TABLEs for regular data (as opposed to the tabular data previously referred to) increases accessibility quite a bit. It may not make creating a consistent design easier, but it does allow more browsers to access the site and make sense out of the context. In that way, DIVs are more semantic, making machines better understand the content. Screen readers come to mind.

However, it would be quite difficult to create a TABLE design (especially using nested TABLEs) and still have a screen reader make sense of the content and read it in a manner which makes sense to the listener.

Silverhawk060
Registered User
Posts: 237
Joined: Mon Jun 16, 2003 4:40 am
Contact:

Post by Silverhawk060 » Sun Jun 26, 2005 3:31 am

If you do your tableless xhtml properly, in the future you only need to change the CSS file to change its looks. This is one major advantage compared to using a table design where if you want to change its looks.. you have to change all the html files involved.

Using CSS and tableless design also allows you to create a version of your site for different viewers. People with smaller screens will load the CSS that displays your site in such a way that it is compatible with the smaller screen. You can even define a css for print, so when a user chooses to print your site, a printer friendly format will be used.

Its not going to be easy to learn... but its very worth it :).

On the side note...very soon i'm going to change my site to be tableless design. I'm using phpBB to power the site, so that means the forums will be changed too... i'm wondering should the list of topics be done in tables?

Graham
Former Team Member
Posts: 8462
Joined: Tue Mar 19, 2002 7:11 pm
Location: UK
Contact:

Post by Graham » Sun Jun 26, 2005 10:43 am

That depends on your view of the semantics of whether it is tabular data or not :)

In my opinion, yes that page should be rendered in a table since the information is tabular data, although some people would disagree with that opinion.

The memberlist is something that is clearly tabular, the viewtopic page probably not.
"So Long, and Thanks for All the Fish"

phpBB Useful Links: Knowledge Base | Userguide | Forum Search | MOD Database | Styles Database
My Links: Blog!

Signature
Registered User
Posts: 5
Joined: Sun Jun 26, 2005 11:29 am
Location: Germany
Contact:

Post by Signature » Sun Jun 26, 2005 11:37 am

Just take a look at that page:
http://www.csszengarden.com/
(The same html code and just different CSS files.)

You change one CSS file and all the html files are changed along with it.
If you work with tables you have to change all the html files.

A lot of things related to skins could be done without templates.
The downside is that nesting div tags is a real pain in t.. a...TM.

Or maybe I just haven't figured out how to do it properly yet.

Rabidus_Lupus
Registered User
Posts: 120
Joined: Thu May 19, 2005 11:26 pm
Location: Belgium
Contact:

Post by Rabidus_Lupus » Sun Jun 26, 2005 2:50 pm

Signature wrote: Just take a look at that page:
http://www.csszengarden.com/
(The same html code and just different CSS files.)

You change one CSS file and all the html files are changed along with it.
If you work with tables you have to change all the html files.

A lot of things related to skins could be done without templates.
The downside is that nesting div tags is a real pain in t.. a...TM.

Or maybe I just haven't figured out how to do it properly yet.

You're example is great. I see now how much power CSS has over layouts compared to the way I used to do it, mostly tables.
If there is only one God, and he is the top of the chain of command in life, where did he come from?

User avatar
santaClause
Registered User
Posts: 32
Joined: Mon Aug 04, 2003 1:41 pm

Post by santaClause » Sun Jun 26, 2005 11:49 pm

I agree. That example is really great. I see now the advantages of tableless design. The list of examples they have are awesome.

One of the advantages that's apparent is definitely the cut down of seprate template files. All you have to do is create a new directory and just place the CSS and images it will use...and that's it; a new style is born. And as usual this is not the only way of organizing things.

I give you props Siganature for registering just to share this info.

I have definitely bookmarked that site for reference.

User avatar
Zhayena
Registered User
Posts: 3
Joined: Mon Nov 03, 2003 6:39 am
Location: Norway

Post by Zhayena » Wed Jun 29, 2005 9:26 am

Just a note:
If you create a template that uses <div>'s for layout, you can still use <table> for the forum overview, member list and similar. But you have to set the table up properly to make it accessible. A great turtorial on the basics:
http://www.456bereastreet.com/archive/2 ... he_tables/

Post Reply

Return to “General Discussion”