Jump to content



Photo

HTML Layout: Table vs DIV

Answered Go to the full post table div

17 replies to this topic

#1 James Rose

James Rose

    Software Developer

  • Tech Issues Solved: 1
  • Joined: 20-January 04
  • Location: New York City

Posted 29 April 2014 - 21:16

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.co...ticle/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



Best Answer kkick , 29 April 2014 - 21:50

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

Go to the full post



#2 Sikh

Sikh

    Neowin Addict!

  • Tech Issues Solved: 2
  • Joined: 11-March 07
  • Location: localhost
  • OS: Windows 7 / 10.8 / Ubuntu Server
  • Phone: Nexus 5 PA 4.4.2 / iPhone 5

Posted 29 April 2014 - 21:33

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

#3 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 29 April 2014 - 21:36

Tables for site layout = No

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

 

It's what makes semantic sense.



#4 OP James Rose

James Rose

    Software Developer

  • Tech Issues Solved: 1
  • Joined: 20-January 04
  • Location: New York City

Posted 29 April 2014 - 21:38

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



#5 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 29 April 2014 - 21:40

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



#6 OP James Rose

James Rose

    Software Developer

  • Tech Issues Solved: 1
  • Joined: 20-January 04
  • Location: New York City

Posted 29 April 2014 - 21:43

Tables for layout "break" semantic markup

 

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



#7 Sikh

Sikh

    Neowin Addict!

  • Tech Issues Solved: 2
  • Joined: 11-March 07
  • Location: localhost
  • OS: Windows 7 / 10.8 / Ubuntu Server
  • Phone: Nexus 5 PA 4.4.2 / iPhone 5

Posted 29 April 2014 - 21:50

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

#8 kkick

kkick

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 08-December 09
  • Location: Illinois, United States

Posted 29 April 2014 - 21:50   Best Answer

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



#9 OP James Rose

James Rose

    Software Developer

  • Tech Issues Solved: 1
  • Joined: 20-January 04
  • Location: New York City

Posted 29 April 2014 - 21:59

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



#10 kkick

kkick

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 08-December 09
  • Location: Illinois, United States

Posted 30 April 2014 - 12:53

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



#11 JoeFuture

JoeFuture

    Resident One Post Wonder

  • Joined: 29-July 14

Posted 29 July 2014 - 19:32

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.



#12 +MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Windows 8, iOS, Android, WP8
  • Phone: HTC 8X / Nexus 5

Posted 29 July 2014 - 19:40

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



#13 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 29 July 2014 - 19:49

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



#14 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 07 August 2014 - 11:23

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



#15 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 07 August 2014 - 15:20

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.