如何在网页上用html和css布局tictactoe

Question

我的问题是在制作tictactoe之前我应该​​研究什么样的html和css功能。

我目前正在使用带有丑陋的X和O字符的CSS的HTML表格：

我的CSS：

table tr td {
    border: 1px solid;
}

我的HTML：

<table>
    <tr>
        <td>O</td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td>X</td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td>X</td>
    </tr>
</table>

Answer 1

为td提供固定的宽度和高度，以及set the table's borders to collapse：

table {
    border-collapse: collapse;
}

td {
    border: 5px solid #000;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

您还应该查看border-radius。

---

Here's the fiddle，但其余的由你决定。