作为学习 jQuery 的一部分，我决定用 JavaScript 做一个简单的井字游戏，目前，我使用 HTML 表格来设置间距并在表格中使用图形图像。
图像要么是小圆圈，要么是大 X 或 O。当用户点击一个圆圈时，它会变为 X 或 O，然后检查游戏是否已获胜。
我知道这很糟糕，但这是一次很好的教育经历。
图片大小相同（圆圈有很多空白），以确保表格大小不会改变。
我的问题有两个。
1/ 我是否应该使用 CSS 而不是表格来进行格式化？如何最好地完成（HTML 表格很容易）？
2/ 有没有比使用图像更好的方法，这样我就不必事先创建 JPG？我尝试使用文本标签 ()，但不断变化的颜色和下划线让我烦恼？
您可能会说，我对 HTML 很满意，但对 CSS 不太满意。
【问题讨论】：
继续使用表格进行布局 - 井字游戏是一个网格，因此使用网格来包含游戏区域是有意义的。 CSS 可用于颜色、字体、边框等。
您可以使用 CSS 来覆盖锚点的颜色和下划线样式，但 IMO 只使用图像更容易。 PNG 会比 JPEG 更好，因为您可以使 PNG 图像透明而没有伪影。
【讨论】：
澄清一点。您写道：“我应该使用 CSS 而不是表格……” CSS 可以应用于所有 HTML 元素。甚至是桌子。
在 jQuery 中使用 CSS 类可以使您的 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 会是这样的：
<table><tr>
<td class="box"></td>
<td class="box"></td>
<td class="box"></td></tr>
...
</table>
【讨论】：
只是为了好玩，这里有一个基本的 CSS 实现：
<!-- your html -->
<div id="board">
<div class="square" id="topLeft"> </div>
<div class="square" id="topCenter"> </div>
<div class="square" id="topRight"> </div>
<!-- 6 more .square divs! -->
</div>
这是你的 CSS
#board {
width: 606px;
height: 606px;
border: 1px solid #000000;
}
.square {
float: left;
width: 200px;
height: 200px;
border: 1px dotted #CCCCCC;
}
板的额外像素占边框（1px x 2 个边 x 3 个框每行 = 6）
您可以使用以下 CSS 更改文本装饰：
a:hover, a:active, a:visited {
text-decoration: none;
font-color: blue;
}
无论如何，我认为它作为表格也没有任何问题（表格毕竟是用于表格数据的）。我发现有用的 CSS 参考网站是 w3schools
【讨论】：
如果你想以任何有意义的方式使用 jQuery，你需要学习 CSS - CSS 选择器是使用库时表达事物的主要方式之一。 jQuery 的真正优势之一是它支持关注点分离的容易程度——在 HTML 中进行语义标记，在 CSS 中定义外观，然后使用 jQuery 对行为增强进行分层。
关于细节：
有许多语义上有意义的方式来标记井字游戏（表格不是其中之一——行的标题是什么？）。无论您使用哪种方法，请确保您了解盒子模型以及您需要解决的实现中特定于浏览器的错误。
如果您学习 CSS，您可以将 O 和 X 用作文本，然后设置它们的样式以使它们看起来像您想要的那样...
【讨论】：
您可以使用以下表格：
.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 class="board">
在每个单元格中填写一个字母（X 或 O）
您不需要使用链接进行交互。您可以直接在表格单元格上使用 onclick 事件：
<td onclick="alert(1)">
玩得开心:)
【讨论】：
嗯，这是值得的，在我的HTML tic-tac-toe game 上，我没有使用表格或 CSS。我只是将图像并排放置，并使用
s 来打破线条。
【讨论】：
最终（当浏览器赶上，尤其是 IE8 时），在没有 HTML <table> 语义的情况下获得类似表格布局的“CSS 方式”将是使用 display: table-row; 和 display: table-cell;。
文章中有一篇很好的文章：Everything you know about CSS is wrong
【讨论】：