• 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

    • AMD preps Ryzen 9600X3D for those who want a taste of the fastest gaming CPU for cheap by Sayan Sen AMD desktop processors are available across two platforms: socket AM4 and socket AM5. Both of these sockets are still going pretty strong, and the company is offering deals and discounts for both as it continues to release new SKUs for its older platform. For example, the company launched an affordable X3D processor for AM4 this month with the new 5500X3D. These gaming CPUs from AMD have been a massive success, as both AM4 and AM5 X3D chips are quite popular among gamers, and for good reason, too. They are fast, very fast. The massive chunk of vertical 3D stacked last-level cache (LLC) Level 3 cache helps these processors a ton in scenarios such as gaming. In our Ryzen 9 9950X3D review, we saw that 300+ frames per second are possible depending on the game title. While we did not review the 8-core 9800X3D, it has been found to be even slightly faster than the 9950X3D and is currently the most powerful gaming CPU on the planet. The Ryzen 9 9800X3D is selling these days for around $440-$500, and that may still be out of budget for many users. As such, similar to the 5600X3D, which is a 6-core 5000X3D processor cut down from the 8-core 5800X3D, AMD is planning to launch a hexacore Ryzen 5 9600X3D that will have two cores disabled compared to the 9800X3D. The information has been uncovered from the recent system integrator (SI) graphics driver for the recently launched Radeon AI PRO R9700 discrete GPU. The driver (Windows SI Driver for Radeon AI PRO R9700, Version 25.10.13.01) confirms the existence of 9600X3D as well as a 9600 non-X SKU and several other Ryzen PRO 9000 CPUs. The full list of upcoming CPUs is given below: Ryzen 5 9600X3D Ryzen 5 9600 AMD Ryzen 9 PRO 9945 Ryzen 7 PRO 9745 Ryzen 5 PRO 9645 Ryzen 5 PRO 9400 In terms of specs, the core configuration of the 9600X3D will be identical to the Ryzen 9600X and 9600, barring things like clock speeds. However, the six-core X3D will have a lot more L3 cache at 96 MB vs 32 MB on the 9600X and 9600. There is no information on pricing at the moment. Source: AMD (spotted by Mellodic Warrior on X)
    • With the dwindling number of TV license payers the BBC has to look for alternative avenues for income.
    • Bet they remove some sound card, wifi and bluetooth drivers that are still used today in some prebuilts. Seen some very old drivers still being used for those components. Printers can be bad also with very outdated but still working drivers.
    • If its anything like the TV licence they will send a few men around knocking and a letter every week saying they will take you to court.
    • New leak shows the design of the upcoming Nothing Headphone (1) by David Uzondu We've been hearing about the Nothing Headphone (1) for a while now, and it looks like we finally have our first real look at the headphones. In a new series of images leaked by @nothing_fan_blog on Instagram, the self-proclaimed "official German Nothing Fanpage", we can see Nothing's first over-ear headphones out in the wild. You definitely will not mistake these for anything else on a store shelf. The design has the company's signature see-through aesthetic, with a transparent oval piece on top of a solid rectangular base on the earcups, with three physical buttons for controls. Image via @nothing_fan_blog The headphones are set to launch alongside the Phone (3), which itself is getting rid of the glyph interface that made the company's phones stand out in the first place. It is a bit interesting seeing the new headphones establishing a strong visual identity while the flagship phone abandons its own. There is good news for anyone who values a wired connection for audio quality, as one of the images confirms the presence of a 3.5mm headphone jack. On the other hand, a close-up of the headband shows no visible folding hinges, which could be a minor inconvenience for some people, especially travelers. Image via @nothing_fan_blog As for colors, the leaks reveal both a white and black version. There's reportedly a gray option, but the leaked images did not show that. The more interesting part is the price, which is rumored to come in around $299 in the US and €299 in Europe. This would place the Headphone (1) in a very aggressive position, undercutting top-tier options from Sony and Bose by a significant margin. To compete, they will have to pack in the usual like Active Noise Cancellation. The sound quality also needs to be excellent, so let's hope the previously announced partnership with British audio company KEF works out well. We still don't have other details like battery life or specific driver information. Full details are expected at the official launch event, happening on July 1.
  • Recent Achievements

    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
    • One Month Later
      gowtham07 earned a badge
      One Month Later
    • Collaborator
      lethalman went up a rank
      Collaborator
    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      674
    2. 2
      ATLien_0
      274
    3. 3
      Michael Scrip
      219
    4. 4
      +FloatingFatMan
      170
    5. 5
      Steven P.
      161
  • Tell a friend

    Love Neowin? Tell a friend!