HTML 数独表，左侧标记为 A-I，字母间距不均匀

Question

我正在为网络开发类(class)制作一个网站，让我们使用表格制作数独游戏。我大部分都做对了，但说明希望 A-I 在每一行的一侧向下，作为行标题，就像 1-9 是下图中的列标题。如下图所示，我的 A-I 间距不均匀。我已经提供了表格的 HTML 片段，以及表格的 CSS。我把 subTables 拿出来是因为我觉得它们不相关，这样可以节省一点空间。下面是我得到的输出图片的链接，因为我没有足够的声誉在这里发布图片。

<tbody>
            <tr><th>A</th>
                <td  colspan="3" rowspan="3"><table class="subTable">

                    </table></td>
                <td colspan="3" rowspan="3"><table class="subTable">

                    </table></td>
                <td colspan="3" rowspan="3"><table class="subTable">

                    </table></td></tr>
            <tr><th>B</th></tr>
            <tr><th>C</th></tr>
            <tr><th>D</th>
                <td colspan="3" rowspan="3"><table class="subTable">

                </table></td>
                <td colspan="3" rowspan="3"><table class="subTable">

                </table></td>
                <td colspan="3" rowspan="3"><table class="subTable">

                </table></td></tr>                  
            <tr><th>E</th></tr>
            <tr><th>F</th></tr>
            <tr><th>G</th>
                <td colspan="3" rowspan="3"><table class="subTable">

                </table></td>
                <td colspan="3" rowspan="3"><table class="subTable">

                </table></td>
                <td colspan="3" rowspan="3"><table class="subTable">

                </table></td><tr>
            <tr><th>H</th></tr>
            <tr><th>I</th></tr>
        </tbody>
table.spuzzle, table.subTable   {border-collapse: collapse;}

table.spuzzle td {border-style: outset; border-color:gray; border-width:5px;}
table.spuzzle th {font-size:8px; color:gray;}
table.spuzzle tbody {height: 40px;}

table.subTable td {font-size:20px; color:blue; height:40px; width:40px; text-align:center;
                vertical-align:middle; border: 1px solid black;}

.goldBox {background-image:url(gold.jpg); background-position:50% 50%; 
                background-repeat:no-repeat; text-align:center;}

.greenBox {background-image:url(green.jpg); background-position: 50% 50%;
                background-repeat:no-repeat; text-align:center}

问题图片:

Answer 1

自己想出来的，感觉自己是个白痴。我犯了两个错误，一个在 CSS 中，一个在表格的 HTML 代码中。在 CSS 中，我需要改变我的 table.spuzzle tbody {高度:40px} 到 table.spuzzle tbody th {height:40px}, 我错过了 G 表末尾的结束标记。始终确保所有内容都有结束标签。经验教训。