БЛОГ НА HUSL


Как построить такую таблицу?

Автор вопроса: Nadya Wilde

Нужно сверстать таблицу следующего вида:

введите сюда описание изображения

Шахматы- это спрайты. Непонятен момент с ячейками там где буквы и цифры.Они явно уже, чем ячейки с шахматами. Их размер 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>


Источник

Ответы (1 шт):

Автор решения: CbIPoK2513

Вариант на псевдоклассах типа :nth-child().

body {
  background: #02ffff;
}

#chess {
  border: 2px solid black;
  border-spacing: 0;
  text-align: center;
  vertical-align: center;
  background: #fff;
}

#chess td {
  width: 40px;
  height: 40px;
}

#chess tr > td:first-child,
#chess tr > td:last-child {
  width: 25px;
}

#chess tr:nth-child(2) > td {
  border-top: 2px solid black;
}

#chess tr:nth-last-child(2) > td {
  border-bottom: 2px solid black;
}

#chess tr > td:nth-child(2) {
  border-left: 2px solid black;
}

#chess tr > td:nth-last-child(2) {
  border-right: 2px solid black;
}

#chess tr:nth-child(even) > td:nth-child(odd),
#chess tr:nth-child(odd) > td:nth-child(even) {
  background: gray;
}


#chess tr > td:first-child, #chess tr > td:last-child,
#chess tr:first-child > td, #chess tr:last-child > td {
  border: 0;
  background: transparent !important;
}
<table id="chess">
  <tr>
    <td></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></td>
  </tr>
  <tr>
    <td>8</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>8</td>
  </tr>
  <tr>
    <td>7</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>7</td>
  </tr>
  <tr>
    <td>6</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>6</td>
  </tr>
  <tr>
    <td>5</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>5</td>
  </tr>
  <tr>
    <td>4</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td>
    <td>1</td>
  </tr>
  <tr>
    <td></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></td>
  </tr>
</table>

Вариант на классах, он проще

body {
  background: #02ffff;
}

#chess {
  border: 2px solid black;
  border-spacing: 0;
  text-align: center;
  vertical-align: center;
  background: #fff;
}

#chess td {
  width: 40px;
  height: 40px;
}

/* Вертикальные с числами и горизонтальные с буквами клетки, которые должны быть уже, чем остальные */
#chess .col-c {width: 25px;}
#chess .row-c {height: 25px;}


/* Бордер вокруг поля */
#chess .b-t {border-bottom: 2px solid #000;}
#chess .b-b {border-top: 2px solid #000;}
#chess .b-l {border-right: 2px solid #000;}
#chess .b-r {border-left: 2px solid #000;}

/* Разметка поля */
#chess .c-w {background: white;}
#chess .c-g {background: gray;}
<table id="chess">
  <tr>
    <td class="col-c row-c"></td>
    <td class="row-c">a</td>
    <td class="row-c">b</td>
    <td class="row-c">c</td>
    <td class="row-c">d</td>
    <td class="row-c">e</td>
    <td class="row-c">f</td>
    <td class="row-c">g</td>
    <td class="row-c">h</td>
    <td class="col-c row-c"></td>
  </tr>
  <tr>
    <td class="col-c">8</td>
    <td class="b-b b-r c-w"></td>
    <td class="b-b c-g"></td>
    <td class="b-b c-w"></td>
    <td class="b-b c-g"></td>
    <td class="b-b c-w"></td>
    <td class="b-b c-g"></td>
    <td class="b-b c-w"></td>
    <td class="b-b b-l c-g"></td>
    <td class="col-c">8</td>
  </tr>
  <tr>
    <td class="col-c">7</td>
    <td class="b-r c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="b-l c-w"></td>
    <td class="col-c">7</td>
  </tr>
  <tr>
    <td class="col-c">6</td>
    <td class="b-r c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="b-l c-g"></td>
    <td class="col-c">6</td>
  </tr>
  <tr>
    <td class="col-c">5</td>
    <td class="b-r c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="b-l c-w"></td>
    <td class="col-c">5</td>
  </tr>
  <tr>
    <td class="col-c">4</td>
    <td class="b-r c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="b-l c-g"></td>
    <td class="col-c">4</td>
  </tr>
  <tr>
    <td class="col-c">3</td>
    <td class="b-r c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="b-l c-w"></td>
    <td class="col-c">3</td>
  </tr>
  <tr>
    <td class="col-c">2</td>
    <td class="b-r c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="c-g"></td>
    <td class="c-w"></td>
    <td class="b-l c-g"></td>
    <td class="col-c">2</td>
  </tr>
  <tr>
    <td class="col-c">1</td>
    <td class="b-t b-r c-g"></td>
    <td class="b-t c-w"></td>
    <td class="b-t c-g"></td>
    <td class="b-t c-w"></td>
    <td class="b-t c-g"></td>
    <td class="b-t c-w"></td>
    <td class="b-t c-g"></td>
    <td class="b-t b-l c-w"></td>
    <td class="col-c">1</td>
  </tr>
  <tr>
    <td class="col-c row-c"></td>
    <td class="row-c">a</td>
    <td class="row-c">b</td>
    <td class="row-c">c</td>
    <td class="row-c">d</td>
    <td class="row-c">e</td>
    <td class="row-c">f</td>
    <td class="row-c">g</td>
    <td class="row-c">h</td>
    <td class="col-c row-c"></td>
  </tr>
</table>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.