如何最好地使用jQuery:HTML或CSS进行格式化

作为学习jQuery的一部分，我决定用JavaScript做一个简单的tic-tac-toe游戏，目前，我正在使用一个HTML表格来设置间距，并在表格中使用图形图像

图像可以是一个小圆圈，也可以是一个大X或O。当用户单击圆圈时，它会变成一个X或O，然后检查游戏是否赢了

我知道这很糟糕，但这是一次很好的教育经历

这些图像的大小都相同（圆圈有很多空白），以确保表格大小不会改变

我的问题有两个方面

1/我应该使用CSS而不是表格来进行格式化吗？如何才能最好地进行格式化（HTML表格非常简单）

2/有没有比使用图像更好的方法，这样我就不必事先创建JPG了？我试过使用文本标签（），但是颜色和下划线的变化让我很恼火

---

正如你可能知道的，我对HTML很熟悉，但对CSS不太熟悉。

继续使用表格进行布局——tic tac toe是一个网格，因此使用网格来包含游戏区域是有意义的。CSS可以用于颜色、字体、边框等

---

您可以使用CSS覆盖锚定的颜色和下划线样式，但只使用图像更容易。PNG比JPEG更好，因为您可以使PNG图像透明而不产生伪影。

为了好玩，这里有一个基本的CSS实现：

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

电路板的额外像素用于边界（1px x 2边x 3盒/行=6）

您可以使用以下CSS更改文本装饰：

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

---

无论如何，作为一个表，我看不出有任何问题（毕竟，表是用于表格数据的）。我发现一个有用的CSS参考站点是

您可以使用具有以下内容的表格：

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

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

与

在每个单元格中只需填写一个字母（X或O）

您不需要使用链接进行交互。您可以直接在表格单元格上使用onclick事件：

<td onclick="alert(1)">

---

玩得开心：）

好吧，这是值得的，在我的电脑上，我没有使用表格或CSS。我只是将图像相邻放置，并使用
s来断线。

如果您想以任何有意义的方式使用jQuery，您需要学习CSS-CSS选择器是使用库时表达内容的主要方式之一。jQuery真正的优势之一是它支持关注点分离的容易程度——在HTML中进行语义标记，在CSS中定义外观，然后使用jQuery对行为增强进行分层

关于具体问题：

有很多语义上有意义的方法来标记tic-tac趾板（表不是其中之一-行的标题是什么？）。无论您使用哪种方法，请确保您了解盒子模型以及需要解决的实现中特定于浏览器的错误

如果你学习CSS，你可以做的O和X的文本，然后样式，使他们看起来像你想要的

---

有一点需要澄清。您写道：“我应该使用CSS而不是表格…”CSS可以应用于所有HTML元素。甚至是桌子

将CSS类与jQuery结合使用可以使javascript代码更简单、更可读

例如：您定义了两个CSS类：“OH”和“EX”。（文本或背景图像可以正常工作。）然后单击单元格时，添加相应的类

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';
});

HTML将类似于：

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

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

...

最终（当浏览器赶上时，尤其是IE8），在没有HTML

语义的情况下获得类似表格的布局的“CSS方式”将是使用

显示：表格行和
显示：表格单元格

文章中有一个很好的评论：
是的，我正在使用Hypersnap从MsWord中捕获大字体，这样我就可以将它们保存为PNG-我听说，不是所有浏览器都支持透明PNG，但那是很久以前的事了-我想它已经改变了。IE7支持半透明PNG，但IE6本机不支持。您可以通过脚本修复IE6的PNG支持。试试Dean Edward的“IE7”：TABLE元素不是“grid”的意思——它是用于数据表的，即带有标题的东西和这些标题的多行数据。@blackwell:因为没有元素，是可以实现的最接近的。@blackwell-HTML表的行和列需要定义这些行和列中的值之间的关系。Tic tac toe肯定能做到这一点，所以这里的桌子是完全可以接受的。如果你把它标记为9个div，你肯定会失去语义的丰富性。完全是“老skool”。。。你查过那页了吗？它不使用javascript或其他任何东西。都是HTML。哇，这真是太搞笑了，太棒了。与问题无关，但仍然很酷。