Use DIVs or TABLES for creating tables?

Hi,

I am going to create some complex tables with plenty of asymmetric cells and I'm not sure whether to do it with DIV classes or use TABLES?

In the past I used tables, but I can do the same work with less code if I use DIVs.

From experience I felt that DIVs load faster than tables.
Plus: I would have the 50-60 % the same classes repeating over and over again.

Which way would you recommend?

Would it be "bad"/wrong to go with DIVs? I'd personally build a table DIV.

It is for creating a facts/contents table (similar to what you see on medication bottles), like this one here:
http://www.opurity.com/store/skin/frontend/default/opurity/images/img-table.gif

 

DIV doesn't have any drawbacks as far as I know. It is a good practice to use DIV.I would use DIV for a style like the one in your link.

 

I normally used tables for tables, if it has to be displayed like a traditional table. If you prefer using Divs, go right ahead. It is better to use Divs anyway. I remember when I just started creating websites many yrs ago, everything was in a table. Talking about 10 or so nested tables or even more. Thank god for Divs.

 

Yes, I used tables back in the past as well, but they slowed sites down dreadfully.
Even today, I've seen "professionals" putting everything inside a table...

 

I would suggest to use a div. It will be easier for you to manage this in the future, if you request the make any changes. Tables go out of use and in my opinion is becoming less relevant.

 

If you're using tables to stylize a layout, no.
If the content is data like someone said above then yes.

But I'd use div because I hate tables. Tables has a lot of codes needed and divs are just simple and clean.

 

This is an instance where using an actual HTML table would be the correct method. However, if you feel that you can create it more efficiently and faster with divs, then that is a choice you are definitely free to make. The only problem you might run into is if another person will work on the code in the future. Since tabular data belongs in a table, working with it in divs could be cumbersome for many coders. Other than that, I think you should be fine.

 

Tabular data should be displayed in.... you guessed it... a table. That is what they are there for, it isn't wrong to use them. It is wrong to use they as a layout tool.

 

Div is bested instead of the Table. You can save loading and CSS loading as well. Also, do no needs to many classes etc.

 

THAT IS TABULAR DATA.... you have headings, you have columns of the same type of data, you have related rows. TABULAR DATA. The Semantically correct markup is therein a TABLE. Preferably with SCOPE, so you can maintain your semantic relationships between the TH and their columns... and the TH and their rows since those would be in there too. This is NOT a situation for using/abusing/DIV since DIV provide no semantic meaning or relationships. That's why using Tables around non-tabular data is wrong (applying the wrong meaning) and why using DIV or span around elements that should have meanings (headings, tabular data, flow text) is wrong.

No matter what the "DIV can haz ares better" retards might mimic from the "tables are evil" nutjobs. Abusing DIV, or nested lists, or any other such idiocy on obviously tabular data is JUST AS BAD and even MORE IDIOTIC than using tables for layout.

<table class="healthInfo">
	<caption>
		Supplement Facts<br />
		<small>Serving Size: 1 Tablet</small>
	</caption>
	<thead>
		<tr>
			<td></td>
			<th scope="col">Amount Per Serving</th>
			<th scope="col">% Daily Value</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">Vitamin A<br />(50% as beta carotene)</th>
			<td>3500 IU</td>
			<td>70%</td>
		</tr><tr>
			<th scope="row">Vitamin C</th>
			<td>50 mg</td>
			<td>100%</td>
		</tr><tr>
			<th scope="row">Vitamin D</th>
			<td>400 IU</td>
			<td>100%</td>
		</tr><tr>
			<th scope="row">Vitamin E</th>
			<td>30 IU</td>
			<td>100%</td>
		</tr>
	</tbody>
</table>
<ul class="healthInfoDisclaimers">
	<li>+Daily Value not established</li>
</ul>

Code (markup):

or some such is SEMANTICALLY correct and using table for what the tag exists FOR! This is NOT tables for layout, it's tables for meaning. The only time to use DIV instead of tables is when the data is not TABULAR and does not have row/column relationships.

But of course with most of the ninnies out there using tables AND the ones ranting and raving against tables being blissfully unaware of tags like TH, THEAD, TBODY, CAPTION, or more importantly attributes like SCOPE and AXIS -- It's hardly surprising you get jokers from both sides of the fence running their mouths about **** they don't understand. See 90% of the respondents in this thread so far; which to be frank, people are DUMBER for having been exposed to.

Of course you'll notice by using TH, TBODY, THEAD above as I did, there is NO need for any extra classes in there either. Any hooks to style it how you want are already there, just inherit off the TABLE's class.

 

I'm not that good at DIVs so I'd immediately use tables (and have done exactly the same nutritional table.

 

You should go with div, it's the best ever solution to design any web page.

 

I would use tables for data and DIVs for styling.

 

I chalk these types of statements up to ignorance or just people being outside their comfort zone -- the people who have only ever used DIV are just as flawed in their thinking as the people who only use tables; as Dan said sometime before his passing: The people who used to endlessly and pointlessly wrap table around table for nothing, today just wrap endless nested DIV around each-other for no good reason.

But in most cases it really just comes down to HTML being too 'hard' for people to bother using properly -- in which case they probably need to back away from the keyboard and take up something a bit less detail oriented, and leave the actual development of websites to people who are willing to take the time to learn all the HTML tags, what they are FOR, and how to use them PROPERLY -- instead of the idiotic "let's use 20 tables where even as tables for layout we only need one" or the equally idiotic "Let's use 30 DIV where even as DIV for layout we only need one".

See ALL the dumbasses out there who make tables that only have one TD per TR, and all the dumbasses who wrap DIV around perfectly good block level containers like their main menu UL and page H1 and/or headings for no good reason either. The people who use dozens of DIV with hundreds of classes per page -- like the idiots at turdpress with their default skins and stuff you cannot control from the skinning system, who wouldn't know semantics or minimalist code from the hole in their backside.

Or just the absolute dipshits making skins for things like vBulletin with their nested list abuse and 20:1 code to content ratio on obviously tabular data, that could be conveyed in a tenth the code if they bothered rubbing a few brain cells together and used TH, THEAD, TBODY, SCOPE, AXIS and CAPTION for what they are FOR.

Sorry if I'm being insulting to certain groups, but it IS warranted - one look at their work is proof enough of that! How the blue blazes most of these dimwitted fools even have jobs is beyond me -- though again, never underestimate the stupidity of the suits writing paychecks for vague promises; since that's the folks who think they can get sound technical advice from the pages of Forbes, which is akin to taking financial advice from the pages of Popular Electronics.

Which is also how we have people out there DUMB ENOUGH to actually see merit or a legitimate reason to be embracing the steaming train wreck of garbage known as HTML 5.

But of course, the re-re's saying "use DIV" and "tables are evil" will continue to flap their gums about things they don't understand, as I'm sure at least two-thirds of the responses who don't even bother to read the thread before responding after this post will prove. Same type of ignorant illiterate twits who will see this post and go "TLDR". Oh but for the days when you had to be "at least this smart" to ride the Internet.

 

div tag is always good to use than tables. Tables can only be used for some comparison box or stuffs like that.

Div tag always support multiple browser and will be flexible with faster loading time.

 

... and thank you karthimx for proving my point.

 

@deathshadow:


g

 

For your needs i think its better to go ahead with div tag. Its flexible for you to design table as you need