HTML Layout: Table vs DIV

2,066 · April 29, 2014

Okay, before you start yelling on how stupid it is to use a table for a layout, let me state that I know better. (of at least I believe I do)

I have a simple situation where I need a "table" with 7 rows and 3 columns. This will NEVER EVER EVER change (yea, I know, that's been said before) and while I have been looking for a more correct solution, eg: http://alistapart.com/article/holygrail It's having some issues with what I want to do.

So, I thought I'd bring this up here so everyone can berate me and say how stupid the idea of using a simple table for a simple situation and maybe give some advice on a better solution that allows rows. The above solution does not... and while I can work it out... I thought I'd ask in case I'm missing something.

Have a great evening.

James

April 29, 2014

<style>
	.tbl{width:100%;float:left;}
	.tblRow{width:100%;float:left;}
	.tblCell{width:33%;border:1px solid;float:left;}
</style>
<div class="tbl">
	<div class="tblRow">
		<div class="tblCell">
			COL1_ROW1
		</div>
		<div class="tblCell">
			COL2_ROW1
		</div>
		<div class="tblCell">
			COL3_ROW1
		</div>
	</div>
	<div class="tblRow">
		<div class="tblCell">
			COL1_ROW2
		</div>
		<div class="tblCell">
			COL2_ROW2
		</div>
		<div class="tblCell">
			COL3_ROW2
		</div>
	</div>
	<div class="tblRow">
		<div class="tblCell">
			COL1_ROW3
		</div>
		<div class="tblCell">
			COL2_ROW3
		</div>
		<div class="tblCell">
			COL3_ROW3
		</div>
	</div>
</div>

Here is a very basic example. Driven by CSS.

4,367 · April 29, 2014

I think using tables for tabular data like you want is Ok. I think tables to construct a layout instead of a div is where the above harassment would come from

45,087 · April 29, 2014

Tables for site layout = No

Tables for tabular data = Very much yes 100% still valid and recommended

It's what makes semantic sense.

2,066 · April 29, 2014

On 29/04/2014 at 21:33, Sikh said:
I think using tables for tabular data like you want is Ok. I think tables to construct a layout instead of a div is where the above harassment would come from

Sorry, I thought I was clearer... but obviously I was not. The columns will hold a few images and some Range objects. Not tab data.... hence the reason i am experiencing the doubt.

My base issue is trying to avoid too many DIV tags to accomplish what I want, but I think I can create a simple DIV called "ROW" before each object... I'm just checking to see if there are other thoughts. Thanks again for your reply

45,087 · April 29, 2014

Quote
My base issue is trying to avoid too many DIV tags to accomplish what I want

Then I suggest your HTML and styling is wrong. Maybe sketch out what you want?

Tables for layout "break" semantic markup

2,066 · April 29, 2014

On 29/04/2014 at 21:40, Nik L said:
Tables for layout "break" semantic markup

Yea... I know, <sigh> I'm just looking for an "out" and I know better.

4,367 · April 29, 2014

Tabular data could be images too. If your constructing a layout with them then no. But if your constructing a visual representation of data then your fine

So what I mean is overall website shouldn't be a table but you could have tables on an individual page. For example Wikipedia

2,066 · April 29, 2014

On 29/04/2014 at 21:50, kkick said:

<style>
	.tbl{width:100%;float:left;}
	.tblRow{width:100%;float:left;}
	.tblCell{width:33%;border:1px solid;float:left;}
</style>
<div class="tbl">
	<div class="tblRow">
		<div class="tblCell">
			COL1_ROW1
		</div>
		<div class="tblCell">
			COL2_ROW1
		</div>
		<div class="tblCell">
			COL3_ROW1
		</div>
	</div>
	<div class="tblRow">
		<div class="tblCell">
			COL1_ROW2
		</div>
		<div class="tblCell">
			COL2_ROW2
		</div>
		<div class="tblCell">
			COL3_ROW2
		</div>
	</div>
	<div class="tblRow">
		<div class="tblCell">
			COL1_ROW3
		</div>
		<div class="tblCell">
			COL2_ROW3
		</div>
		<div class="tblCell">
			COL3_ROW3
		</div>
	</div>
</div>

Here is a very basic example. Driven by CSS.

Thanks Kristopher, I was working on something that worked with the original post, but this is a much better answer.

April 30, 2014

It's my pleasure James. Reply or PM me if there is anything else that you need.

July 29, 2014

Not to troll, but these forums use tables for layout. Having tried to style forums for both desktop and mobile browsers responsively, I'm also leaning towards a table layout solution for coding simplicity.

11,194 · July 29, 2014

<table> should always be used for tabular data. Trying to replicate a table using divs is as bad as using a table to lay out the structure of a site.

2,549 · July 29, 2014

On 29/07/2014 at 19:32, JoeFuture said:
Not to troll, but these forums use tables for layout. Having tried to style forums for both desktop and mobile browsers responsively, I'm also leaning towards a table layout solution for coding simplicity.

That's because IPB was made that way to support older browsers better.

And you guys are bumping a few months old thread btw...

2,549 · August 7, 2014

On 07/08/2014 at 02:26, sushirox said:
I've using tables in email templates btw... :)

Emails are a exception, most email clients have crap html support which makes the use of tables a must :/

8,943 · August 7, 2014

On 29/07/2014 at 19:32, JoeFuture said:
Not to troll, but these forums use tables for layout. Having tried to style forums for both desktop and mobile browsers responsively, I'm also leaning towards a table layout solution for coding simplicity.

Tables layout is awful for maintenance.

I've seen tables layout that was so totally ****** ** that it was almost impossible to maintaint without a wysiwyg editor.

css done right is far easier to maintain cause you'll have less tags. The content will be the focus.

Also tags semantic should not be ignored. A table is for tabular date.

19,560 · August 7, 2014

On 29/07/2014 at 19:32, JoeFuture said:
Not to troll, but these forums use tables for layout. Having tried to style forums for both desktop and mobile browsers responsively, I'm also leaning towards a table layout solution for coding simplicity.

There is no table tags on this forum.. Neowin uses div and css for layout.

2,549 · August 7, 2014

On 07/08/2014 at 15:29, shozilla said:
There is no table tags on this forum.. Neowin uses div and css for layout.

Seems like it yeah, I thought IPB was still using tables :P

Though the comment inputbox is inside a table ;)

August 31, 2014

Hi,

Looks good for grid layouts and I have a suggestion: bootstrap will handle a lot of this for you.

HTML for structure

CSS for styles

TABLES for tabular data.

Sign In

HTML Layout: Table vs DIV

Question

James Rose

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

kkick

Link to comment

Share on other sites

Sikh

Link to comment

Share on other sites

+Nik Louch Subscriber²

Link to comment

Share on other sites

James Rose

Link to comment

Share on other sites

+Nik Louch Subscriber²

Link to comment

Share on other sites

James Rose

Link to comment

Share on other sites

Sikh

Link to comment

Share on other sites

James Rose

Link to comment

Share on other sites

kkick

Link to comment

Share on other sites

JoeFuture

Link to comment

Share on other sites

MikeChipshop Member

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

LaP

Link to comment

Share on other sites

TAZMINATOR

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

tim_s

Link to comment

Share on other sites

Recently Browsing 0 members

Similar Content

Posts

Recent Achievements

Popular Contributors

Tell a friend