• 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

    • Gears of War: Reloaded multiplayer beta kicks off this weekend, here's how to get access by Pulasthi Ariyasinghe Microsoft announced Gears of War: Reloaded earlier this year, unveiling a complete remaster of the first game in the hit action franchise that lets players jump into the classic with a fresh coat of paint. Today during the Xbox Games Showcase, the $40 experience was given another look, and a couple of betas were revealed too. The multiplayer beta will be kicking off on June 13 and ending on June 15 as the first of the weekend access events. The next multiplayer beta will begin on June 20 and run through June 22. The first weekend will feature classic team deathmatch across Gridlock, Raven Down, and Gold Rush maps. Next, the second weekend is adding on the King of the Hill mode on the map Canals. Team deathmatch will still be running this weekend too, and Courtyard and War Machine will be added to the roster. Unfortunately, these aren't open betas, but Microsoft revealed three ways players can jump into the experience to try it out. First off, Gears of War: Ultimate Edition digital owners will receive an invite without having to do anything. All Xbox Game Pass Ultimate and PC Game Pass subscribers are gaining access for no extra cost too. Lastly, anyone who has pre-ordered Gears of War: Reloaded will gain access to the multiplayer beta as well. For those who missed it, the remaster is touting 4K 60FPS in the campaign, 120FPS in multiplayer, enhanced assets and effects, improved shadows, zero loading screens, crossplay, and more features. Check out our original coverage for all the information. Gears of War: Reloaded launches on PC, Xbox Series X|S, PlayStation 5, and Xbox Cloud Gaming on August 26, 2025. It will also be a day one release on Xbox Game Pass Ultimate and PC Game Pass subscriptions for no extra cost. Moreover, Gears of War: Reloaded will be a free upgrade to all Gears of War: Ultimate Edition owners. It needs to have been purchased prior to May 5, 2025 though.
    • My first step into the PC world from the Amiga world, a Cyrix 166. I am in no rush unless the PC fails, as long as it can still play the games I need it to play and maybe run Davinci resolve to render some video when the Mac is busy.
    • Knives are not banned, there are banned from being carried in public, which is a good thing. The Cybertruck is banned because it don't follow the U.K safety laws, Have a read of this https://www.forbes.com/sites/p...he-uk-due-to-safety-issues/
    • If nobody was using it. Then why specifically is it a shame? Windows needs be slimmer. Every feature like this is just more bloat
    • Invincible VS announced, a brutal 3v3 tag fighting game by former Killer Instinct developers by Pulasthi Ariyasinghe The Xbox Games Showcase showed off a brand-new fighting game incoming from the award-winning Invincible universe. Simply dubbed Invincible VS, the title will feature three versus three tag fighting with all sorts of heroes and villains from the franchise. Check out the announcement trailer above, which shows off some gameplay near the tail end of it. Published by Skybound Games and developed by Quarter Up, Invincible VS has a big focus on the brutality, much like its source material. There will be iconic arenas straight from the show, as well as a battle damage system to show off the carnage on the fighters themselves. "In Invincible VS, every move, every line of dialogue, every broken limb and bloodied mouth carries real cost and consequence—all building toward the bone-deep satisfaction of victory," said Invincible VS executive producer Mike Willette. "No tag fighting game has ever delivered this level of intensity and violence. This game is a love letter to the fighting game community, created by a team of passionate, experienced fans of the genre." While this is a brand-new studio that's taking on the project, it has been revealed that former members from the 2013 Killer Instinct are involved in the development. "I have said this before, and I’ll say it again: this is the most excited I’ve been about anything involving Invincible," said Invincible co-creator Robert Kirkman. "Invincible VS is crazy fun, fast, ferocious and dripping with the same over-the-top brutality that you’ll see in the comic book pages and on the show. It is a natural evolution of the franchise and it is everything that fans have been demanding for over a decade! This is without a doubt, probably the best superhero fighting game in the universe!" The title will have multiple game modes as well, including a campaign with an original story by the writer of the animated series, an arcade mode for skirmishes, and a training arena. As expected, competitive and casual online multiplayer will be available too. Invincible VS is coming out sometime in 2026 across PC, Xbox Series X|S, and PlayStation 5.
  • Recent Achievements

    • First Post
      George Almeyda earned a badge
      First Post
    • Reacting Well
      BlakeBringer earned a badge
      Reacting Well
    • Reacting Well
      Lazy_Placeholder earned a badge
      Reacting Well
    • Dedicated
      Epaminombas earned a badge
      Dedicated
    • Veteran
      Yonah went up a rank
      Veteran
  • Popular Contributors

    1. 1
      +primortal
      470
    2. 2
      +FloatingFatMan
      265
    3. 3
      ATLien_0
      235
    4. 4
      snowy owl
      219
    5. 5
      Edouard
      173
  • Tell a friend

    Love Neowin? Tell a friend!