How best to use jQuery: with HTML or CSS for formatting

Question

As part of learning jQuery, I decided to do a simple tic-tac-toe game in JavaScript and, at the moment, I'm using a HTML table for spacing and using graphic images within the table.

The images are either a small circle or a big X or O. When the user clicks on a circle, it changes to an X or O then checks whether the game has been won.

Lame, I know, but it's a good educational experience.

The images are all the same size (circle has a lot of white space) to ensure table size doesn't change.

My question is two-fold.

1/ Should I be using CSS rather than tables to do the formatting and how would that best be done (HTML tables are very easy)?

2/ Is there a better way than using images so that I don't have to create the JPGs before hand? I tried with text labels (<a>) but the changing colors and underlines annoyed me?

As you can probably tell, I'm comfortable with HTML but not so with CSS.

Answer 1

Go ahead and use tables for layout -- tic-tac-toe is a grid, so it makes sense to use a grid for containing the play area. CSS can be used for colors, fonts, borders etc.

You can use CSS to override the colors and underline styles of anchors, but it's easier IMO to just use images. PNG would be better than JPEG, because you can make PNG images transparent without artifacts.

Answer 2

One point of clarification. You wrote: "Should I be using CSS rather than tables..." CSS can be applied to all HTML elements. Even tables.

Using CSS classes with jQuery can make your javascript code simpler and more readable.

For example: You define two CSS classes: "OH" and "EX". (Text or background images would work fine.) Then when a cell is clicked, you add the appropriate class.

var ex_or_oh = 'EX'; // 'OH'
$('td.box').click(function() {
  var t = $(this);
  if (t.hasClass('OH') || t.hasClass('EX')) { return; } // spot taken
  t.addClass(ex_or_oh);
  (ex_or_oh == 'EX') ? ex_or_oh = 'OH' : ex_or_oh = 'EX';
});

And the HTML would be something like:

<table><tr>
  <td class="box"></td>
  <td class="box"></td>
  <td class="box"></td></tr>
  ...
</table>