0

I'm creating a board game in JavaScript (just to help learn the language) and I was wondering whether to use tables or divs (and CSS) for the board.

From what I understand, with tables the browser reads through the code twice. Once for the structure/layout and then again for the data.

I realise the page will only be loaded once so it won't make too much of a difference, but I was just wondering whether a game board would be an acceptable use of tables, since it's usually reserved for tabular data, or should tables be shunned altogether, even though divs require more code?

cantsay
  • 1,967
  • 3
  • 21
  • 34
  • http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – BuddhistBeast Jan 06 '14 at 20:24
  • 3
    The CSS nazis will have your hide for uttering this blasphemy :D – kuroi neko Jan 06 '14 at 20:27
  • What are you planning to do with this game? Is it for your own personal use? Will anyone else see it? – BuddhistBeast Jan 06 '14 at 20:28
  • BuddhistBeast I had a look at that, but these articles seem to be for the overall design of a website (and I can understand the advantages of CSS for that) but in certain cases I'm not sure whether it's best to use tables or divs. I'm probably not going to make it available publicly, but I will use it as something to show potential employers soon. That's why I'm not sure if they will think "Why didn't he just use tables?" or "why is he still using tables!?" – cantsay Jan 06 '14 at 20:31
  • I'm going to say that @Dai has the right opinion here. – BuddhistBeast Jan 06 '14 at 20:38
  • For what it's worth, a Chess board could qualify as tabular data, since its tiles are named (columns 1-8, rows a-h). – cimmanon Jan 06 '14 at 20:51
  • It's a table so use a table, just don't use tables when you are trying to layout content that is not logicly a table. – Ian Ringrose Jan 07 '14 at 13:36
  • I don't think this sould have been closed, as it is asking about using a table to represent data that is a table. If it was asking about using a table to layout a generate web page, then the answer is opinion based. – Ian Ringrose Jan 07 '14 at 13:38

2 Answers2

4

Using a <table> element to describe a game board is perfectly acceptable in my book, for example a chess or checkers board, Game of Life, etc, as (to an extent) the game state can be both represented-as and interpreted-as tabular data.

Use table-layout: fixed to have a table that uses a more efficient layout algorithm that's a lot faster and predicable, however can lead to a poor layout unless you've manually optimised it (usually by setting manual column widths).

The algorithms used are described here: http://www.w3.org/TR/CSS21/tables.html#width-layout

Dai
  • 141,631
  • 28
  • 261
  • 374
2

I think this question mainly depends on what you plan on doing with this board game: Is it for ONLY practicing JS (meaning no one else will see it) or will it be later used for other people to utilize it?

In my opinion, we all need to start somewhere, so it is acceptable to use a table in your creation of the board game if you are looking to experiment. In fact, you shouldn't need to worry about optimization if you are only using this to enhance knowledge and for your own personal use.

However, in another offset opinion.. I would suggest you begin to look at the idea of using divs/uls/lis to create a table, as this practice is really invaluable and it is honestly a good idea to begin grasping this idea early rather than later. It will also give you the feel for how CSS can represent multiple things in various ways and how you can also manipulate CSS to really do whatever you want with it.

If you are planning to have this game made public so other people can play, you will want to look into what will optimize the speed or performance of your website. This is where the links that were provided could be of use. In all reality, everybody has their own opinion on this matter and it will be a constant fight until there is solidified evidence on this matter. I would imagine by the time they decide which layout is better, CSS will already be upgrading and optimizing to its fullest capabilities.

BuddhistBeast
  • 2,652
  • 2
  • 21
  • 29