Нужно сверстать таблицу следующего вида:
Шахматы- это спрайты. Непонятен момент с ячейками там где буквы и цифры.Они явно уже, чем ячейки с шахматами. Их размер 48 на 48 пикселей. Если задать этот размер, то все ячейки получаются одинаковыми. Так же непонятно как сделать такую рамку.Нужно ли объединять ячейки?
body {
background-color: cyan;
}
table {
border-collapse: collapse;
border-spacing: 0px;
width: 50%;
height: 10px;
border: solid black;
margin: 0 auto;
}
.letters {
border: solid black;
text-align: center;
background-color: white;
width: 20px;
height: 20px;
}
.numbers {
border-left: solid black;
border-right: solid black;
text-align: center;
background-color: white;
width: 20px;
height: 70px;
}
td {
border: solid black;
width: 48px;
height: 48px;
}
<table>
<caption>Шахматы</caption>
<tr class="letters">
<td rowspan="2"></td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="numbers">7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers">7</td>
</tr>
<tr>
<td class="numbers">6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers">6</td>
</tr>
<tr>
<td class="numbers">5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers">5</td>
</tr>
<tr>
<td class="numbers">4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers">4</td>
</tr>
<tr>
<td class="numbers">3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers">3</td>
</tr>
<tr>
<td class="numbers">2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers">2</td>
</tr>
<tr>
<td class="numbers" rowspan="2">1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="numbers" rowspan="2">1</td>
</tr>
<tr class="letters">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>