Question

My question is what html and css features should I research before making tictactoe.

I’m currently using a HTML table with CSS with ugly X and O characters:

My CSS:

table tr td {
    border: 1px solid;
}

My 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

Give your tds a fixed width and height, and 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;
}

You should also look into border-radius.

---

Here’s the fiddle, but the rest is up to you.