/    Sign up×
Community /Pin to ProfileBookmark

When to Use Tables

I’ve heard a lot of developers before that recommend against using tables. However, forums such as vBulletin use tables to format output, as well as many other example scripts I’ve looked at. When is it considered taboo to use tables and when is it not?

to post a comment
HTML

12 Comments(s)

Copy linkTweet thisAlerts:
@cfajohnsonMar 07.2010 — [indent]

Tables are for tabular matter: information where there is a relationship between the columns and the rows.

vBulletin is a one of the best forum systems, but there are problems caused by its use of tables.

[/indent]
Copy linkTweet thisAlerts:
@WebnerdMar 07.2010 — I use them for tabular data and laying out form elements. I feel CSS is way to taxing lining up form labels and inputs. Disagree if you must, I don't care.
Copy linkTweet thisAlerts:
@cfajohnsonMar 07.2010 — [indent]

Since (it can be argued) labels and input elements have such a relationship, a TABLE is appropriate in that instance.

[/indent]
Copy linkTweet thisAlerts:
@RobbeMar 08.2010 — I've been a webdesigner for many years and use both tables and divs. If you know what you're doing tables can be used with success, but with the use of tables it's important to make your site XHTML valid for SEO purposes.

The rule number one for using tables: Always use css for styling.
Copy linkTweet thisAlerts:
@cfajohnsonMar 08.2010 — ...

with the use of tables it's important to make your site XHTML valid for SEO purposes.
[/QUOTE]

[indent]

It is always important to make your site valid HTML (XHTML is a dead

issue; use HTML 4.01 strict) whether you use tables or not.

[/indent]

The rule number one for using tables: Always use css for styling.[/QUOTE]

[indent]

The rule number one: [i]always[/i] use CSS for styling, everywhere.

[/indent]
Copy linkTweet thisAlerts:
@rproctor83Mar 08.2010 — I also use a variation between divs and tables for layout. In reality, tables are much easier to create simple layouts compared to css/divs. For small sites that have short turnaround times with small amounts of traffic we generally use a simple table layout. Usually 1 or two tables max.

For big sites with heavy traffic we will generally use css and divs. These sites generally take longer to design and create due to small nuances on how different browsers render css.

For example in IE divs render borders on the outside of divs where in FF they render on the inside. However, both IE and FF render borders on the inside of table cells. I might have that backwards, but I am just trying to illustrate an example.

I know that many developers say that tables are a horrible way to layout content, but really for some of these sites using a table is not that bad.
Copy linkTweet thisAlerts:
@cfajohnsonMar 08.2010 — I also use a variation between divs and tables for layout. In reality, tables are much easier to create simple layouts compared to css/divs.[/QUOTE]
[indent]

When I first started using DIVs and CSS for layout, I would have agreed with you. After a little practice, I find they are much faster to create than TABLE-based layouts. Not to mention requiring much less bloated HTML.

[/indent]

I know that many developers say that tables are a horrible way to layout content, but really for some of these sites using a table is not that bad.[/QUOTE]

[indent]

A table containing material that is too wide for a page will overflow the page. Unlike DIVs, you cannot apply 'overflow: auto' to a table or table cell.

[/indent]
Copy linkTweet thisAlerts:
@rproctor83Mar 08.2010 — I think you are mistaken. There are cases where no matter how you boil it down, table layout is easier than div layout. While I can whip out a div layout fairly quickly, there are still some aspects of page layout that are simpler to achieve by using tables compared to divs. The easiest solution though would be to just modify the design to alleviate these instances.

And, as far as content overflow, that is not really a problem in the terms of the sites I am referring to. Content that would exceed the width of the page would never be put into these pages, and generally even a css layout which has content that overflows outside of the template bounds would still cause a strange layout in one way or another. Maybe not break the template, but cause issues. The best solution would be to prevent content being inserted into the site that is too wide.

I think css fan boys are really too strict on their use of css and divs. Sure they are great, but that does not mean tables don't have their place in web design layout. Essentially, the end result is the same thing, especially to the user.
Copy linkTweet thisAlerts:
@ScriptageMar 09.2010 — I think css fan boys are really too strict on their use of css and divs.[/quote]

Actually I think you will find it is the W3C who create the standards and they do so for good reason.

Essentially, the end result is the same thing, especially to the user.[/quote]

As long as the table makes sense when linearised it will be accessible to a point. Don't forget that screen readers will announce to the user that they are "viewing" a table which could cause the user confusion if there is no tabular data.

XHTML is a dead

issue; use HTML 4.01 strict[/quote]


There are times when XHTML and its ilk are a necessity.
Copy linkTweet thisAlerts:
@svidgenMar 09.2010 — The single most important rule in all fields of development and design: eschew obfuscation. i.e., use TABLEs when it is [B]more simple[/B] to do so, unless it [B]complicates[/B] the user experience.

Of course, if it [B]complicates[/B] the user experience, it's not more simple, [I]now is it![/I]


To expand a [tiny,] tiny bit ...

The idea behind avoiding tables is to provide a broader sense of simplicity to a page. Representing things in a more philosophically true manner is really the most simple way to do things. But, if you're attempting to [B]style[/B] a document, philosophical truth becomes less important. Find the balance that your site needs--avoid tables when you [B]can[/B] (they're complicated), but use them when it's simpler to do so.
Copy linkTweet thisAlerts:
@svidgenMar 09.2010 — Sorry, I missed a point ...

A philosophically true representation of the data is simpler because it is more closely related to the data it represents: there are very [B]few[/B] steps between the raw data or "reality" and the representation. Search engines and screen readers "praise" this. So, it's good for you and good for the site.

Of course, if you want the site to look pretty, as I already mentioned, the simplicity of philosophical purity can--and [B]should[/B]--often be replaced with other forms of simplicity, presuming they're [B]really[/B] more simple.
Copy linkTweet thisAlerts:
@Robert_WellockMar 10.2010 — This forum would be correct in using tables for the forum itself (as for that advert junk, etc that is added fluff). Although the tables themselves may not always be used correctly - and certainly aren't here.

As CSS is for positioning; thus a form would be positioned via CSS and appropriately wrapped in semantic (x)html such as fieldset, etc.
×

Success!

Help @Joseph_Witchard spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...