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

just for fun here's a basic CSS implementation:

<!-- your html -->
<div id="board">
  <div class="square" id="topLeft">&nbsp;</div>
  <div class="square" id="topCenter">&nbsp;</div>
  <div class="square" id="topRight">&nbsp;</div>
<!-- 6 more .square divs! -->
</div>

and here's your CSS

#board {
  width: 606px;
  height: 606px;
  border: 1px solid #000000;
}

.square {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px dotted #CCCCCC;
}

the extra pixels for the board account for the border (1px x 2 sides x 3 boxes per row = 6)

you can change your text decoration with the following CSS:

a:hover, a:active, a:visited {
  text-decoration: none;
  font-color: blue;
}

anyhow i don't see any problem with it being a table either (tables are for tabular data after all). a CSS reference site that i found helpful is w3schools

Answer 3

You can use a table with something like:

.board {
    border-collapse: collapse;
}
.board td {
    width: 40px;
    height: 40px;
    border: 1px solid #666;
    font-size: 40px;
    line-height: 40px;
    font-family: 'courier new' serif;
    font-weight: bold;
    background-color: #ddf;
    text-align: center;
}

with

<table class="board">

and in each cell just fill a letter (X or O)

you are not required to use links for interaction. YOu can use the onclick event directly on the table cell:

<td onclick="alert(1)">

Have fun :)

Answer 4

Well, it's it's worth anything, on my HTML tic-tac-toe game I didn't use tables or CSS. I just laid the images next to each other, and use <br/>s to break the lines.

Answer 5

If you want to use jQuery in any meaningful way you need to learn CSS - CSS selectors are one of the main ways to express things when using the library. One of the real strengths jQuery has is how easily it supports separation of concerns - do your semantic markup in HTML, define the appearance in CSS and then use jQuery to layer on behavioural enhancements.

With regard to the specifics:

1. There are lots of semantically meaningful ways to mark up a tic-tac-toe board (a table is not one of them - what are the headings for the rows?). Whichever you use make sure you understand the box model and the browser-specific bugs in the implementations you need to work around.

2. If you learn CSS you could do the O's and X's as text then style them to make them look however you want...

Answer 6

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>

Answer 7

Eventually (when browsers catch up, notably with IE8), the "CSS way" to get table-like layout without the HTML <table> semantics, will be to use "display: table-row" and "display: table-cell".

There's a good write-up in the article: Everything you know about CSS is wrong