• 0

HTML Layout: Table vs DIV

Asked by James Rose,

 Share Followers 0
Go to solution Solved by kkick,

Question

James Rose
Posted

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

Link to post
Share on other sites

17 answers to this question

Recommended Posts

  • 0
kkick
  • Solution
Posted 
<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.

Link to post
Share on other sites
  • 0
Sikh
Posted

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

Link to post
Share on other sites
  • 0
NJ Louch
Posted

Tables for site layout = No

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

 

It's what makes semantic sense.

  • Like 1
Link to post
Share on other sites
  • 0
James Rose
  • Author
Posted

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

Link to post
Share on other sites
  • 0
NJ Louch
Posted
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

Link to post
Share on other sites
  • 0
James Rose
  • Author
Posted

Tables for layout "break" semantic markup

 

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

Link to post
Share on other sites
  • 0
Sikh
Posted

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

Link to post
Share on other sites
  • 0
James Rose
  • Author
Posted 
<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.

Link to post
Share on other sites
  • 0
kkick
Posted

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

Link to post
Share on other sites
  • 0
JoeFuture
Posted

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.

Link to post
Share on other sites
  • 0
MikeChipshop
  • Member
Posted

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

Link to post
Share on other sites
  • 0
Seahorsepip
  • Veteran
Posted

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

Link to post
Share on other sites
  • 0
Seahorsepip
  • Veteran
Posted

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

Link to post
Share on other sites
  • 0
LaP
Posted

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.

Link to post
Share on other sites
  • 0
TAZMINATOR
Posted

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.

Link to post
Share on other sites
  • 0
Seahorsepip
  • Veteran
Posted

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

Link to post
Share on other sites
  • 0
tim_s
Posted

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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • CSS Div alignment
      By ironsight2000
      What I am trying to achieve is to have 2 bookends and both sides of the screen in the middle will be books On to of the books will be the logo
       
      I would link to the code but the web server is offline for upgrades
      <style> .threecol { width:100%; overflow:hidden; } .threecol div { float:left; width:33%; } #left { width:9px; } #right { width:9px; } #middle { background-image: url('middle.jpg'); } </style> <div class="threecol"> <div id="left" align="left" ><img src="left.jpg" width="9" height="90"></div> <div id="middle" align="center"><img src="logo.jpg" width="9" height="90"></div> <div id="right" align="right"><img src="right.jpg" width="9" height="90"></div> </div>



    • Background color or image for a DIV
      By flynempire
      http://www.kleinerts.com/productdetail.php?prod=1249V-test
       
      How can I get the white background with shadow and rounded corners not extend all the way down. I would like it to finish before the TABS.
       
      Can this be done with color or does it require an image?
       
      What you see there is white background color and CSS for rounded corners and shadows
    • CSS formatting
      By sathenzar
      Hey guys, I've always hated front end design of web sites. I've always loved the back end logic. But I figured it would really help to master it and I have to say I love WPF positioning a heck of a lot more then div positioning. Is there a book out there that provides good examples on how to format divs to get the display you want? The data part is fine but like for example I just want to have one div box float:left and then another div float:right and always hug the right side of the container div. Well the right div just floats to the right as much as the left div takes up space. It never truly "floats" right and hugs the right side of the parent div, which I want it to do. I'm good with back-end logic and C# desktop apps and such. I've just always hated trying to work with divs. It takes WAY too much time then it should. Hopefully that'll improve after reading a book on it.
    • Container Shifting only on Mobile Devices
      By kman1985
      I finished my site and I put it live, online yesterday. Today I noticed that the main container shifts on the 'Our Anti-Tarnish Technology' and 'Purchase Tarnish Tamer' pages, but it only shifts when viewing on a mobile device, smartphone. If someone could help me, that would be great. Thanks.
      Site :
      http://www.tarnishtamer.com
    • A really annoying <div> overlap problem.
      By emilxp
      Hello everyone. I am a bit new to web programing and I have a problem. It's hard to describe so I will upload the HTML page. The problem is that some stuff a behind other stuff and these stuff must not be there. I have been experimenting for hours and I didn't find a solution. If you can make these red divisions to be NOT in the back I will be really happy :) . I have tried z-index and it don't works. Even without z-index it must be OK but it isn't.
      PS: These 2 red divisions are not the only one that mustn't be on the back. You'll see what i mean :). And the site uses CSS3. And sorry for the validation bugs. Ou, for validation bugs, if you know what "end tag for "html" which is not finished[XHTML 1.1]" mean tell me please :). And sorry for not separating HTML and CSS. I'll do it later :).
      site with bug.zip