• 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

    • "Asus points out the security aspect, that you will lose support and thus there will be no security updates leaving your system exposed" Both Microsoft and 0patch offer ongoing security patches for a fee. https://learn.microsoft.com/en...w/extended-security-updates https://blog.0patch.com/2024/0...windows-10-with-0patch.html
    • I won't switch to W11 at home until I absolutely have to. This deadline depends on how long third-party software will be supported on W10 (such as browsers and image viewers and so on). I estimate that migration will be necessary around 2028, when the ESU program expires, but we'll see.
    • "not so intelligent after all" may be the best summary of this whole mess. And yeah, those opt-outs are practically hidden like Easter eggs, if you're lucky enough to even find them.
    • Asus joins Microsoft, AMD, Dell, urges you to "prepare for mandatory Windows 11 upgrade" by Sayan Sen Sometime earlier this year, Microsoft quietly updated the minimum CPU requirements guidance for Windows 11 24H2. Neowin noticed the change this past week as the support document now classifies a family of CPUs from each vendor, AMD, Intel, and Qualcomm, such that users find it easier to make out which processors are capable of being Copilot+ PC certified. Major OEM and hardware manufacturer Asus recently published a couple of blog posts regarding the upcoming Windows 10 end of support. The company says that it is now time to "prepare for the mandatory Windows 11 upgrade" by taking "essential steps." It writes: "With a mandatory Windows update on the horizon, there are essential steps you should take to ensure a smooth upgrade experience. Proper preparation will not only safeguard your files and system but will also allow you to take full advantage of the innovative features Windows 11 has to offer..." If you are on Windows 10 and are wondering why should you even bother upgrading, Asus points out the security aspect, that you will lose support and thus there will be no security updates, leaving your system exposed. The firm is certainly right, there are real dangers out there. For example, the Lumma infostealer impacted over 394,000 PCs worldwide (download this Defender definition for new ISO installations). Even official Windows files and folders can be vulnerable as we saw with the inetpub folder. However, Asus wants you to get excited about Copilot, the new AI assistant that Microsoft has been busy pushing everywhere on its apps and services. Echoing the same sentiment as Microsoft, and others like Dell and AMD, Asus says Copilot is what sets Windows 11 apart from 10 as it writes: "What makes Windows 11 different? One word: Copilot. ... If you’ve ever wished your computer could just “do the thing” you’re trying to describe — Copilot is your new best friend." Asus also says that you will be making the "smart move" by switching to Windows 11 now from 10. In the blog post under a subheading titled "It’s Not Just an Upgrade, It’s a Smart Move." The Taiwanese firm writes, "Upgrading to Windows 11 isn’t just about staying current ― it’s also about staying safe, working smarter, and getting more out of your computer every day." As such, the company also published a guide on how to proceed with the upgrade. Do you agree with Asus? When are you upgrading? Let us know below!
  • Recent Achievements

    • Posting Machine
      Fiza Ali earned a badge
      Posting Machine
    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      180
    2. 2
      snowy owl
      130
    3. 3
      ATLien_0
      127
    4. 4
      Xenon
      118
    5. 5
      +Edouard
      91
  • Tell a friend

    Love Neowin? Tell a friend!