• 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

    • Some AMD Ryzen users can get free Windows performance boost with this simple system tweak by Sayan Sen AMD understands that there is a lot of demand for its X3D processors and for good reason too, since they offer some of the best gaming experiences. As such, the company plans to launch a new 6-core Ryzen 5 9600X3D for those who may not want to spend top dollar on a 9800X3D. What makes X3D special is the densely packed last level cache (LLC) wherein the L3 (level 3) cache is 3D die-stacked such that there is a whole lot of it that the cores can access on demand all within the smallest footprint. This is said to help with latency especially, and games happen to be quite sensitive to it since they are a mixed workload and so there is a lot of to-and-fro. However, despite that fact, users have noticed micro-stuttering and freezes on Ryzen X3D CPUs. Although there is no official fix, some of the affected users have managed to resolve the issues by tweaking a motherboard setting. The tweak is related to a setting called "GLOBAL C-STATE CONTROL" (it may be called something else by your motherboard vendor) and changing it to 'Enabled' from 'Auto' could fix stuttering and lag-related issues in games. If you are not familiar with them, Processor Power Management is done through Advanced Configuration and Power Interface (ACPI) P-states or C-states. While P-states or performance states handle CPU voltage-frequency scaling, C-states deal with CPU sleep states so that some of the CPU functions, which are not necessary at that moment, are disabled. The P-states and C-states work together to make the processor run more efficiently. It helps the OS and apps determine which cores can be parked. The Global C-state control setting helps users manage not only the DF and CPU core C-states but also the I/O C-states too. For those wondering, DF here refers to Data Fabric or AMD's high bandwidth Infinity Fabric interconnect between CPUs, GPUs, and more, on AMD systems. By default, this is set to "Auto" which also means that it is "Enabled" by default. However, in the case of X3D parts, Auto may set this setting to "Disabled" and thus manually toggling it to "Enabled" may be necessary. X3D processors, the dual CCD (core complex die) ones especially, have their V-cache on a single CCD. If the CPPC (Collaborative Processor Performance Control), which lets an OS like Windows control the "preferred core" and clock speed boost, isn't working optimally to assign the correct gaming CCD, then this fix could well work. Global C-State Auto: Global C-State Enabled: We ran a benchmark on our Ryzen 9 9950X3D to see if toggling the settings would make a difference, and well, it didn't in the case of AIDA64. However, since this is a synthetic test that measures cache and memory exclusively, we can't definitively conclude that the fix will also not make a difference in the case of games. Another remedy for stuttering is to disable the monitoring of the "Power percent" metric on MSI Afterburner if you have it on. This has been a long-known issue and in fact can help you even if you are not using an X3D CPU. Source: Reddit (link1, link2) via YouTube
    • I only have one contact on WhatsApp. And that contact has sms also. I have many more contacts that use WhatsApp also, but everyone defaults to use iMessage, SMS or RCS anyway. Not a loss for me. I'm in Norway where mostly nobody uses WhatsApp.
    • Apple is boring for a kid. Only fun is browsing websites for HTML games. A PC with steam is another story. Of course if the child plays video games all day then maybe that might not be a good idea. :-)
    • Looking for a specific setting in Settings? Sorry, the option just doesn’t exist as you’d need to elevate for that. Want to do something quickly and efficiently? Nah, forced to use a “modern” interface which takes far longer to achieve what you’re looking to do. (Example: disable a NIC)
    • Yet the best laptop for all day battery life is a Mac, hands down, no contest. Windows is bloated and power management is rubbish. Search indexer. Defender. Malicious Software Removal Tool. Windows Update (+DISM). Office CTR. Telemetry. Disclaimer: I own a surface laptop studio, multiple gaming desktops, server, and a macbook pro.
  • Recent Achievements

    • One Month Later
      DecaffKnight94 earned a badge
      One Month Later
    • Dedicated
      S.P earned a badge
      Dedicated
    • One Month Later
      adxnksd42031 earned a badge
      One Month Later
    • Rising Star
      aphanic went up a rank
      Rising Star
    • Contributor
      GravityDead went up a rank
      Contributor
  • Popular Contributors

    1. 1
      +primortal
      663
    2. 2
      ATLien_0
      261
    3. 3
      Michael Scrip
      234
    4. 4
      Steven P.
      161
    5. 5
      +FloatingFatMan
      151
  • Tell a friend

    Love Neowin? Tell a friend!