0

I'm working on a JavaScript (using HTML as display tech) widget framework for an embedded device where memory consumption is a big deal.

Recently I tried to create a table-layout using only DIVs. But to mimic the colspan and rowspan functionality it became quite complicated, adding extra logic to make it all dynamic. The result came out quite good layout-wise, but at the cost of too much memory consumption (had to have several JS objects representing each cell and then a DIV as presentation)

Wouldn't it be better to just use the TABLE element instead, getting the col- and rowspans and layout for free? Especially since all markup is crated by the framework and that the user (of the framework) never actually touches the HTML itself.

Or am I missing something here?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jocke138
  • 1
  • 2
  • related: http://stackoverflow.com/questions/4172273/when-should-i-use-div-tags-when-i-already-have-the-option-for-dividing-page-with and http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Matt Ellen Nov 16 '10 at 08:37
  • 2
    This table layout; was it for tabular data? If so, use a table. – Matt Ellen Nov 16 '10 at 08:38

3 Answers3

2

well tables are perfectly fine for tabular data if you want to do it right semantically. And imo, you have to go for the best solution in your situation. Performance is more important than using div's or not in this case i guess.

30equals
  • 329
  • 1
  • 2
2

If you start out with the mentality of "I need a table-layout", it's inevitable that you'll end up deciding that you need to use a <table>, because CSS cannot deliver on the subtleties of colspans and rowspans. But do you need a table-layout? You don't describe the underlying layout requirements, so it's impossible for us to steer you either to or from <table> except in broad generalities.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Thanks for the replies. Ok, that's true. The reason why is that I am building a keypad-widget which need to support different keypad layouts (letter, numbers, symbols) and where i.e, the shiftbutton may have the width of two buttons horizontally or two widths vertically, hence the need for rowspan and colspan feature. And because I found this need here I figured why not make a generic table-ish layout widget to reuse in other cases. – jocke138 Nov 16 '10 at 10:16
1

Go ahead and use a table. One of the main reasons that CSS layouts are encouraged is accessibility (probably you don't care about). Another reason is separating content from layout - you are probably creating both. So, the disadvantages of tables are of very low importance compared to the advantages in your case.

kgiannakakis
  • 103,016
  • 27
  • 158
  • 194
  • 2
    Didn't you mean the last sentence the other way round? :P – Vilx- Nov 16 '10 at 08:41
  • I actually disagree that `table` is better in terms of performance, since the rendering engine actually has to make a lot more decisions on how tables should be rendered than any other elements, given that the task of calculating optimal table cell widths are left for the rendering engine to decide – Yi Jiang Nov 16 '10 at 09:22
  • @Yi Jiang: This is an embedded device. The OP knows about the performance difference and we can only make guesses. – kgiannakakis Nov 16 '10 at 09:30
  • @Yi Jiang: You're probably right, but regarding memory I've found that DOM elements tend to make less of an impact than JS-objects. And I'm not entirely sure that it's that much faster to do the calculations in JS (since I'm need my own table representation in JS). But I'm on thin ice here, so I could be wrong. – jocke138 Nov 16 '10 at 10:31