What is the best way to use jQuery: with HTML or CSS for formatting

Question

As part of jQuery training, I decided to make a simple tic-tac-toe game in JavaScript, and for now I am using an HTML table to separate and use graphic images in a table.

The images are either a small circle, or a large X or O. When the user clicks on the circle, it changes to X or O, and then checks if the game is won.

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

Images are the same size (the circle has many spaces) so that the size of the table does not change.

My question is double.

1 / Should I use CSS and not tables for formatting, and how is it best to do (HTML tables are very light)?

2 / Is there a better way than using images, so I don’t need to create a jpg before distributing it? I tried with text captions (<a>), but did the changing colors and underlines annoy me?

As you can probably tell, I like HTML, but not so with CSS.

Answer 1

We go ahead and use the tables for the layout - tic-tac-toe is the grid, so it makes sense to use the grid to store the game area. CSS can be used for colors, fonts, borders, etc.

You can use CSS to override colors and emphasize snap styles, but it's easier to use IMO to use images. PNG will be better than JPEG because you can make PNG images transparent without artifacts.

Answer 2

One point of clarification. You wrote: “Should I use CSS, not tables ...” CSS can be applied to all HTML elements. Even the tables.

Using CSS classes with jQuery can make your javascript code more simple and straightforward.

For example: you define two CSS classes: "OH" and "EX". (Text or background images will work fine.) Then, when a click 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 will look something like this:

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

Answer 3

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 is your CSS

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

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

You can change the text to the following CSS:

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

In any case, I do not see any problems with the fact that this is a table (tables for tabular data). CSS link site I found useful, w3schools

Answer 4

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 a library. One of the real strengths of jQuery is how easily it supports separation of concerns - do your semantic markup in HTML, define appearance in CSS, and then use jQuery for a layer on behavioral improvements.

Regarding the features:

• There are many semantically meaningful ways to layout a tic-tac-toe board (the table is not one of them - what are the headers for the lines?). Whatever you use, make sure you understand the box model and browser-specific bugs in implementations that you need to work around.

• If you learn CSS, you can make the text O and X like text, and then create them so that they look the way you want ...

Answer 5

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 in the letter (X or O)

You do not need to use links to interact. You can use the onclick event directly in the table cell:

 <td onclick="alert(1)"> 

Good luck :)

Answer 6

Well, it's worth it, in my HTML tic-tac-toe game I did not use tables or CSS. I simply placed the images next to each other and used s to break the lines.

Answer 7

In the end (when browsers catch up, especially with IE8), the “CSS way” for displaying a table layout without HTML semantics will use display: table-row; and display: table-cell; .

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