HTML Layout: Table vs DIV

[James Rose]

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

[kkick]

<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.

[Sikh]

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

[+Nik Louch Subscriber²]

Tables for site layout = No

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

 

It's what makes semantic sense.

[James Rose]

  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

[+Nik Louch Subscriber²]

  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

[James Rose]

  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.

[Sikh]

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

[James Rose]

  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.

[kkick]

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

[JoeFuture]

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.

[MikeChipshop Member]

<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. 

[Seahorsepip Veteran]

  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...

[Seahorsepip Veteran]

  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 :/

[LaP]

  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.

[TAZMINATOR]

  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.

[Seahorsepip Veteran]

  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 ;)

[tim_s]

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.