css - Is a table layout appropriate for full-screen single-page HTML applications? -


there's a general consensus using tables layout in html should avoided. there exceptions every rule. designing spa (single page application)—with pages resemble layout used desktop application.

obviously html isn't equipped these types of pages, have little other choice. implementing these layouts divs pure hell, requiring mix of css tricks, hard-coded values , js calculations on resize events. i've asked this question implementing these layouts using grid framework.

but stopped reconsider whether table-based layout might appropriate. typical criticisms don't seem apply unique case of spa:

  • separation of content layout—since spa not content (it's skeleton ajax filled data), argument doesn't apply. interface; don't expect google index it.

  • tables less maintainable—not in case. css hell have go through implement divs has higher maintenance cost.

  • tables slower render—of course, complex layout creating using alternatives require more calculations render tables. heck, compensate inherent limitations using js resize events. more efficient browser natively inside rendering engine.

in light of these arguments, table-based layouts appropriate in specific case of spas, or failing consider other important factors? there better option?

people used wrong tables. many people, knew nothing, pushed non table layout, event though didn't make sense @ @ time, when there still ie5+6 worry about. there many misconceptions, eg. google cares semantic code. never has, , never will, because people wrong, , can not account it.

however, now, there actual reason not use tables:

media queries , responsive design

in responsive design, if have 2 columns, makes sense drop 1 column bottom on small screens. example, several columns can become single column on phone screen.

you can not tables.

this, in opinion, single important problem tables. other arguments nothing more mental masturbation.

there other layouts, masonry (see e.g. http://masonry.desandro.com/), think hard achieve tables alone. classical problems of full height columns, tables right solution, though people preferred horrible workarounds, adding ton of fragile markup , css fake table.

now, it's different, table doesn't give flexibility need responsiveness.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -