• 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

    • Is it that easy though? WhatsApp is the default way the majority message in a lot of countries these days. I would prefer Signal to be as popular as WhatsApp and probably could get a few people to use it, most people are probably going to stick with WhatsApp sadly. Which leaves SMS or Facebook Messenger as alternatives a lot of people also have. (Here anyway, I know iMessage, LINE and WeChat dominate in certain parts of the world). It annoying Meta purchased WhatsApp all those years ago.
    • Do they tell Google not to scrape their content via something like robots.txt? Do they specify anywhere that certain agents aren't to scrape? If not, tough. Plus there's no obligation on anyone's part to adhere to any directives that might be in this file anyway...
    • DMDE 4.3.5.823 Beta by Razvan Serea DMDE is a software designed to effectively recover lost data. It retrieves files and folders swiftly and stores them in the user-defined location. It is an easy to use yet powerful tool that will assist both novice and experienced users in getting back lost files in just a few simple steps. Free Edition includes all basic features but a single recovery operation recovers up to 4000 files in the current panel only (you should first open a subdirectory in the current panel and then recover files in the panel). In paid licenses there is no this restriction, and recovery of nested directories is allowed. Can paid versions recover more files than the free version of DMDE? If a file cannot be recovered in the DMDE Free Edition (or it is damaged after recovery) the same will occur in the paid versions. DMDE paid versions are capable of recovering the same files. The only difference is that paid versions can recover all found files in one go, as well as restore the directory structure presented in the free version. Professional Edition provides additional features: rights to provide data recovery services portable use on different computers one-time activation on client computers (including remote use) data recovery reports (include logs and file checksums) read support for E01 disk image files using logs when copying a disk (resume copying, multiple passes) customizable I/O handler script recovery of NTFS alternate data streams DMA access in DOS (for ATA interface) DMDE key features: Portable run without installation Support for NTFS, FAT12/16, FAT32, exFAT, ReFS, Ext2/Ext3/Ext4, btrfs, HFS+/HFSX, APFS Thorough FS and Raw scan, FS reconstruction for data recovery in complex cases Simple partition manager for express search, diagnostics, and restoration of partitions Disk cloning and disk image creating, including I/O error handling, reverse copying, and other features RAID constructor for virtual RAID reconstruction supporting levels RAID-0, RAID-1, RAID-4, RAID-5, RAID-6, delayed parity, custom striping, JBOD/spanned disks; automatic calculation of RAID configurations Cluster map to investigate file allocation Disk editor compatible with the most recent Windows versions which allows viewing, editing, and navigating through different disk structures using built-in and custom templates NTFS tools to work bypassing NTFS driver (copy, delete file, create, repair directory) Support for various device I/O interfaces and settings to work with damaged devices, disk images, NTFS compression and encryption, national names, large disks, large files, large sectors, and other features DMDE 4.3.5.823 Beta changelog: Expanded built-in signatures for RAW search functionality Added file list export to HTML format (DMDE Professional Edition only, view sample) Improved handling of I/O errors with selective skipping by error code Enabled preview support for additional image (graphic) file types (Windows only) Improved extfs reconstruction when copies of superblocks with group descriptors are found Fixed potential hang during Btrfs volume reconstruction Resolved issue with cluster list creation when subfolders are present Other improvements and fixes Download: DMDE 64-bit | 2.4 MB (Free, paid upgrade available) Download: DMDE 32-bit | 2.0 MB Link: DMDE Home Page | DMDE Manual | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • The BBC might have gone about this the wrong way, but if there is a revenue sharing program then they and all other "providers" of data should be included in the plan.
    • PicView 3.1.4 by Razvan Serea PicView is a fast, free and fully customizable image viewer for Windows 10 and 11. It supports a vast range of image file types, including WEBP, GIF, SVG, PNG, JXL, HEIC, PSD and many others. Additional features includes viewing EXIF metadata, image compression, batch resizing, viewing images within archives and comic books, image effects, image galleries, and more. Available in portable and installable versions. PicView 3.1.4 changelog: What's new Mouse Side Buttons Customization: You can now change how the mouse side buttons work. Choose to navigate file history or switch between directories. Find this setting under the Mouse tab in the settings window (#199). Improvements Directory Navigation: Improved navigation between directories. If Search subdirectories is enabled, PicView moves to the next directory in the list; if off (or if there are no directories in the list), it navigates as before. PicView now remembers your startup directory (including subdirectories) and restores it on the next launch. Performance: Preloader has been fine-tuned for better performance and lower memory usage. Bug Fixes Fixed incorrect saved settings path when saving in portable mode (#213). Corrected cases where keybindings and file history were not saved when there was no write permission. Restoring the window from a maximized state now correctly keeps its position when auto-fit is enabled. Fixed start-up menu text alignment and missing text issues. Translations Hebrew translation by @Y-PLONI (#212) Hungarian translation by @JohnFowler58 (#209) Japanese update by @coolvitto (#214) Miscellaneous Updated to Avalonia 11.3.1. Now using ZLinq and ZLinq.FileSystem to reduce memory allocation and possibly improve performance. Future versions managed via Scoop will now preserve configuration files (#15555). Experimental settings (not yet available in the UI—edit UserSettings.json directly): Disable the file watcher (not recommended, untested). Choose preload amount and direction (forward/backward). Download: PicView 3.1.4 | Portable ~50.0 MB (Open Source) Download: PicView ARM64 | Portable ARM64 Links: PicView Home Page | Github Project Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • 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
      681
    2. 2
      ATLien_0
      276
    3. 3
      Michael Scrip
      221
    4. 4
      +FloatingFatMan
      170
    5. 5
      Steven P.
      164
  • Tell a friend

    Love Neowin? Tell a friend!