• 0

HTML Layout: Table vs DIV

Asked by James Rose,

 Share

Question

Veteran

James Rose

Posted
Posted

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
Collaborator

kkick

Posted
Posted 
<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
Veteran

James Rose

Posted
  • Author
Posted
  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
Grand Master

Sikh

Posted
Posted

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
Veteran

James Rose

Posted
  • Author
Posted
  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
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted
  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
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted
  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
Grand Master

LaP

Posted
Posted
  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
Grand Master

TAZMINATOR

Posted
Posted
  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
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted
  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.
 Share
Go to question listing

  • Posts

    • Sony unveil Marvel fighting game 'Tōkon: Fighting Souls' for PlayStation 5 and PC

      By LoneWolfSL · Posted

      Sony unveil Marvel fighting game 'Tōkon: Fighting Souls' for PlayStation 5 and PC by Pulasthi Ariyasinghe Sony held a massive surprise in store for those who made to the end of its State of Play presentation today. Coming in as a collaboration between PlayStation Studios, Arc System Works, and Marvel Games, Tōkon: Fighting Souls is slated to be a tag team fighter featuring everyone's favorite heroes and villains from the Marvel comics universe. Watch the debut trailer above. Developer Arc System Works, which has previously worked on series like Guilty Gear and Blazblue, has revealed that the focus on this project was making sure it was easy to pick up and play by anyone. To put this into perspective, the studio says that while other fighting games require learning each character's moves to play them effectively, Tōkon will only have one way of playing for all available fighters. "From the beginning, we aimed to make MARVEL Tōkon: Fighting Souls a title that could be enjoyed by a wide variety of players," explains Game Director and Lead Battle Designer, Kazuto Sekine. "We have designed the mechanics in such a way that you can perform a variety of actions with either traditional fighting game inputs or simple inputs. With the press of a few buttons, multiple characters can appear on screen to provide backup or attack together – creating a new and exciting team VS battle experience." So far, Captain America, Iron Man, Spider-Man, Doctor Doom, Storm, Ms. Marvel, Star-Lord, and Ghost Rider (Robbie Reyes) have been revealed as playable characters, neatly filling the trailer's four versus four battle. Each character has a Japanese flair to them too, such as Iron Man's unique Gundam style for his armor. As for why the studio went with the 4v4 Tag Team battle solution, the team said that the team-up nature of superheroes was the inspiration for that, making sure that players can fill the screen with all sorts of powers they are familiar with. Tōkon: Fighting Souls is coming to both PlayStation 5 consoles as well as PC sometime in 2026. More announcements with reveals for characters, stages, gameplay modes, and online mechanics will be coming up until launch as well.
    • Expert says XChat 'encryption' is misleading, since Elon Musk can still read your messages

      By +MrElectrifyer · Posted

      Nothing surprising there. Anyone expecting privacy on ANY social media platform is delusional at best. Let alone one controlled by the same creep that owns Tesla (a.k.a. facecrook on wheels), which blatantly violates user privacy with Tesla vehicles as reported by Louis Rossman. This action of his is just another prime example of why ANYTHING from him is trust-worthy as the same from Zuckerberg...i.e. not at all.
    • 007 First Light's first trailer shows off an action-packed James Bond game

      By LoneWolfSL · Posted

      007 First Light's first trailer shows off an action-packed James Bond game by Pulasthi Ariyasinghe IO Interactive has been teasing its next project outside of Hitman for some time now, and even before its first-ever showcase that's happening soon, the James Bond game showed up during the PlayStation State of Play event today. Dubbed 007 First Light, the third-person action-adventure title received a trailer showing off the new face of Bond, some of his gadgets, and plenty of action. Catch it above. While inspired by novels of Ian Fleming as well as the movie franchise, First Light will follow Bond to reveal just how he earned his MI6 007 role in an all-original story by IO Interactive. James Bond will be just 26 years old in this iteration. While not the smooth and tactical agent with a martini that we've seen in the movies just yet, this Bond is described as a man with "sharp instincts, sometimes reckless, who is still learning when to fight, when to bluff, and when to disappear into the shadows." As expected from the Hitman developer, missions in 007 First Light will offer both stealth and loud options, depending on the player's actions. A variety of futuristic gadgets will be available for use as well, while driving portions are also confirmed for the title. "In 007 First Light, Bond starts as a NAVY air crewman, when against all odds, an audacious act of bravery propels him on MI6’s most challenging training program," says the studio, regarding Bond's beginnings. "This training coupled with his natural instinct, wits, and heart will see him grow into a fully-fledged spy. It’s a completely original standalone story, developed in collaboration with Amazon MGM Studios." The studio says that the game will take players across the world, from snow-drenched mountains to sun-soaked beaches, while interacting with some of the most iconic characters in the franchise, including M, Q, and Moneypenny. There are original faces in the story too, such as Bond's mentor Greenway. 007 First Light is coming to PC (Steam and Epic Games Store, Xbox Series X|S, PlayStation 5, and the Nintendo Switch 2 sometime in 2026.
    • [Official] Doctor Who Thread

      By margrave · Posted

      Bad Wolf Theory
    • That sharp cold toothache you dread? Its origins trace back to ancient, unexpected purpose

      By hellowalkman · Posted

      That sharp cold toothache you dread? Its origins trace back to ancient, unexpected purpose by Sayan Sen Image by Pavel Danilyuk via Pexels Scientists at the University of Chicago have discovered that the sensitive tissue inside our teeth first evolved as part of the armored skin of ancient fish. Their new study, published in Nature, confirms that dentine—a key part of teeth—was originally used by early vertebrates to sense their surroundings. This research supports the idea that dentine wasn’t always used for chewing. Instead, millions of years ago, it helped fish detect changes in the water. The study also clears up confusion about Anatolepis heintzi, a fossil once thought to be the earliest known vertebrate because of its dentine-like structures. For years, scientists debated whether Anatolepis was really an early vertebrate. The fossil had tiny tubules that some researchers believed were odontodes—small structures considered to be the ancestors of teeth. However, there wasn’t enough evidence to be sure. To settle the debate, scientists used synchrotron scanning, a powerful imaging technique, to study different fossils and modern creatures. The scans revealed that Anatolepis didn’t have dentine. Instead, its tubules were sensory structures similar to those found in arthropods like crabs and shrimp. These structures, called sensilla, help animals detect their surroundings. “This shows us that ‘teeth’ can also be sensory even when they’re not in the mouth,” said lead researcher Yara Haridy, PhD. “There’s sensitive armor in these fish. There’s sensitive armor in these arthropods. This explains the confusion with these early Cambrian animals.” Although Anatolepis turned out to be an arthropod, researchers did find real dentine in another ancient fish. The Ordovician vertebrate Eriptychius, which lived about 465 million years ago, had large dentine-filled tubules in its armor. This confirms that dentine first evolved in vertebrates as a sensory tissue. Further tests showed that modern fish, such as sharks and teleosts, still have nerve connections in their external dentine structures. This means early vertebrates may have used dentine to sense their environment before it became part of teeth. Scientists have two main ideas about how teeth came to be. The “inside-out” theory suggests teeth evolved first and were later adapted for exoskeletons. The new research supports the “outside-in” theory, which argues that sensory structures appeared first in exoskeletons and later evolved into teeth. While the team didn’t find the oldest vertebrate fish, study co-author Neil Shubin, PhD, believes the discovery is still important. “We didn’t find the earliest one, but in some ways, we found something way cooler,” he said. Source: University of Chicago, Nature This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.

  • Recent Achievements

    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
    • Collaborator
      DarkShrunken earned a badge
      Collaborator

  • Popular Contributors

    1. 1
      +primortal
      347
    2. 2
      snowy owl
      167
    3. 3
      +FloatingFatMan
      164
    4. 4
      ATLien_0
      161
    5. 5
      Xenon
      127
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!