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.
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.