/    Sign up×
Community /Pin to ProfileBookmark

To table or not to table?

Copy linkTweet thisAlerts:
Nov 17.2006

I know everyone has a different opinion on when it’s ok to use tables and not. What I’m trying to do is the typical e-commerce product preview with an image in the left block and the list product details in the right block.

Should I use a <ul> to create the 2 inline blocks with image in left, attributes in right? Or 2 div’s floated left? or is this an acceptable table situation?

Or if anyone has a better suggestion, i’d love to hear it.

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@saeNov 17.2006 — Tables should not be used for laying out your website. They should only be used to show tabular data. i.e:

Name | Age | Gender

billy | 5 | male

sally | 10 | female
Copy linkTweet thisAlerts:
@ssettlemyreauthorNov 17.2006 — Right, I understand that, but any insight into my suggested methods?
Copy linkTweet thisAlerts:
@felgallNov 17.2006 — Floating divs is usually the easiest way to create columns.

In working out whether to use a table you need to ask yourself what caption you are going to use to describe the table and what headings are appropriate for the <thead> that displays at the top of the table. You also need to consider whether to use one pixel bordersa on the table cells or something larger. If you don't want any of these then it isn't a table and shouldn't be coded as one.
Copy linkTweet thisAlerts:
@saeNov 17.2006 — This website helped me out a lot

http://www.mardiros.net/liquid-css-layouts.html
Copy linkTweet thisAlerts:
@Paul_JrNov 17.2006 — A definition list might be suitable. I stumbled across [url=http://www.maxdesign.com.au/presentation/definition/]this website[/url] in my searching for a suitable link. Looks like it's got loads of good info there.
×

Success!

Help @ssettlemyre 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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