• 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

    • vPro is the hardware that a number of software packages use. A lot of the first party management tools from Dell, HP, and Lenovo use vPro. Having said all that, it is kind of a nothing burger. Promised a lot, but doesn't really do much for most people.
    • How about an AI generated weekly wrap-up of all AI news. I skim over articles about which AI claims to have a bigger 'brains' this week (or even today), and it changes too often to even consider it worth remembering.
    • Or…because it makes it obvious what they are referring to. Imagine if Microsoft called it Visual Studio 22.
    • Ghost Downloader 3 v3.5.13 by Razvan Serea Ghost Downloader 3 is a high-performance download manager for Windows, featuring AI-enhanced acceleration, intelligent multi-threading, and smart file segmentation. It supports download resumption via .ghd files, global speed limits, and clipboard monitoring for quick link capture. The interface is built with Fluent Design, offering a modern and smooth user experience. Users benefit from advanced features like sparse file support, system tray integration, proxy configuration, secure SSL options, and automatic filename recognition. Ghost Downloader 3 is ideal for users seeking speed, efficiency, and customization. Core Download Features AI-Powered Acceleration: Experimental feature that dynamically increases thread count (up to 253) to maximize bandwidth usage. Intelligent Segmentation: Divides downloads into multiple parts for parallel processing, supporting breakpoint resume via .ghd files. Dynamic Thread Allocation: Automatically splits faster segments to create new threads, enhancing download speeds. Network & Proxy Support Global Speed Limiting: Allows setting a maximum download speed to manage bandwidth usage. Proxy Support: Compatible with SOCKS5, HTTP, and HTTPS proxies, including auto-detection features. SSL Certificate Verification: Optional SSL verification for secure downloads. System Proxy Detection: Automatically detects system proxy settings across Windows, Linux, and macOS. Windows-Specific Features Fluent Design UI: Modern interface with support for Mica, Acrylic, and Aero background effects. Toast Notifications: Supports Windows 10 (1709+) native notifications. Window Border Accent Colors: Enhanced visual integration with Windows 11. Application Features Smart Filename Recognition: Automatically identifies and decodes filenames from HTTP headers, URL parameters, or paths. Sparse File Support: Utilizes sparse file technology on supported file systems (e.g., NTFS) for efficient disk space allocation. Clipboard Monitoring: Optionally monitors clipboard for download links to facilitate quick task additions. Drag-and-Drop and Paste-to-Add: Supports intuitive methods for adding download tasks. Task Management: Features batch addition, per-task thread customization, pause/resume/cancel options, and hash verification (MD5, SHA1, SHA256). System Integration System Tray Support: Minimizes to system tray with background download capabilities. Automatic Startup and Task Resumption: Configurable to launch on system startup and resume unfinished downloads. Single Instance Enforcement: Prevents multiple instances from running simultaneously. Automatic Update Checks: Optionally checks for new versions on startup. Ghost Downloader 3 v3.5.13 changelog: Improved shared memory handling for macOS ARM by @cy920820 in #176 Fixed empty thread creation bug by @Alpha-Qian in #184 Optimized automatic speed boost feature by @Alpha-Qian in #183 Optimized download engine code by @XiaoYouChR Notes: Ghost Downloader may trigger a warning or show a hit on VirusTotal, but if only a few antivirus engines flag it, it’s likely a false positive. The app is open source, so you can inspect the code yourself for peace of mind. If you want to use Ghost-Downloader-3 on Windows 7, please download the version v3.5.8-Portable. Download: Ghost Downloader 64-bit | Portable 64-bit | ~50.0 MB (Open Source) Download: Ghost Downloader ARM64 | Portable ARM64 Links: Ghost Downloader Home Page | MacOS / Linux | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      +FloatingFatMan
      255
    3. 3
      snowy owl
      251
    4. 4
      ATLien_0
      228
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!