html - Webページに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

sa のtd幅と高さを固定し、の境界線を collapse に設定しtableます。

table {
    border-collapse: collapse;
}

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

も調べる必要がありますborder-radius。

---

ここにフィドルがありますが、残りはあなた次第です。