• 0

HTML Layout: Table vs DIV


Question

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 comment
https://www.neowin.net/forum/topic/1211355-html-layout-table-vs-div/
Share on other sites

17 answers to this question

Recommended Posts

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

  • 0
  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

  • 0

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

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

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

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

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

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

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

This topic is now closed to further replies.
  • Posts

    • Yeah the cookie consent is required for even displaying ads.
    • Reddit takes legal action, says Anthropic trained Claude on Reddit posts without permission by David Uzondu Reddit has filed a complaint against Anthropic, alleging the AI company straight-up stole its content to train AI models, including the Claude chatbot, without paying a dime. The lawsuit, lodged on June 4, 2025, in San Francisco, accuses Anthropic of repeatedly violating Reddit's User Agreement, which explicitly prohibits unauthorized commercial exploitation and automated scraping of its platform. The data on Reddit seems to be very valuable, seeing as the platform is already making bank licensing its content to other big AI players like Google and OpenAI, as mentioned in its complaint. These deals are reportedly worth tens of millions annually, so it's understandable why Reddit would be ###### if Anthropic was just taking the goods for free. Reddit has been quite clear that while its platform is open for community, it has rules, and commercial outfits cannot just waltz in and use user-generated content to build billion-dollar enterprises without permission or compensation. According to Reddit, Anthropic has been scraping its content since at least December 2021, ignoring technical measures like robots.txt designed to prevent such automated access. Reddit claims that in July 2024, Anthropic falsely stated it had stopped its bots from accessing Reddit, when audit logs allegedly showed Anthropic's bots hit Reddit's servers over a hundred thousand more times in the following months. The complaint on page 5 even includes a screenshot of Reddit's lawyers chatting with Claude, where the AI "confirms" it was trained on Reddit data. Now, we don't know how true this is, given the fact that LLMs hallucinate a lot. Reddit's legal filing paints Anthropic as a company with "two faces": one that publicly preaches about ethical AI and respecting boundaries, and another that privately ignores rules to line its pockets. Reddit is not holding back in what it is asking the court to do to Anthropic. The company demands significant monetary compensation, aiming to recover any profits Anthropic made from using Reddit's data, get repaid for its own financial losses, and it is also seeking punitive damages, looking to punish Anthropic for what Reddit describes as willful and malicious conduct. In addition to that, the company is also seeking an injunction designed to permanently stop Anthropic from using any Reddit data. This order would also compel Anthropic to delete all Reddit content from its systems and pull any AI technology, like its Claude chatbot, from commercial use if it was developed using this disputed data. On top of all that, Reddit wants Anthropic to cover all its legal expenses, including attorneys' fees and court costs.
  • Recent Achievements

    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
    • Collaborator
      DarkShrunken earned a badge
      Collaborator
    • Rookie
      Pat-Garrett went up a rank
      Rookie
  • Popular Contributors

    1. 1
      +primortal
      344
    2. 2
      snowy owl
      167
    3. 3
      +FloatingFatMan
      163
    4. 4
      ATLien_0
      161
    5. 5
      Xenon
      128
  • Tell a friend

    Love Neowin? Tell a friend!