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

Question

nvanyuk09 @nvanyuk09

HTML
CSS

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

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

Шахматы- это спрайты. Непонятен момент с ячейками там где буквы и цифры.Они явно уже, чем ячейки с шахматами. Их размер 48 на 48 пикселей. Если задать этот размер, то все ячейки получаются одинаковыми. Так же непонятно как сделать такую рамку.Нужно ли объединять ячейки?

	a	b	c	d	e	f	g	h

7									7
6									6
5									5
4									4
3									3
2									2
1									1
a	b	c	d	e	f	g	h

Вопрос задан более трёх лет назад
522 просмотра

7 комментариев

Подписаться 2 Средний 7 комментариев

Ankhena @Ankhena Куратор тега CSS

Если задать этот размер, то все ячейки получаются одинаковыми

Не задавайте его всем ячейкам...

Выложите ваш код в песочницу и покажите, что не получается.

Написано более трёх лет назад

nvanyuk09 @nvanyuk09 Автор вопроса

Ankhena,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess</title>
    <style>
        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;
            
        }
        .numbers{
            border-left: solid black;
            border-right: solid black;
            text-align: center;
            background-color:white;
            
        }
        td{
           border:solid black; 
           width:48px;
            height:48px;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

Написано более трёх лет назад

Ankhena @Ankhena Куратор тега CSS
nvanyuk09,
так вы же пишете

td{ border:solid black; width:48px; height:48px; }

т.е. задай всем td размеры 48х48.
Зачем, если вам нужны только некоторые?
Для заголовочных ячеек подходят теги th.
Либо задайте классы и задавайте размеры им.

Клетки раскрашиваются через :nth-child odd и even.
css.yoksel.ru/nth-child
Написано более трёх лет назад
nvanyuk09 @nvanyuk09 Автор вопроса

Ankhena, Верхние и нижние ячейки сужаю через th. А что делать с левыми и правыми? Рамка не получается. Не хватает места чтобы вписать 8ки.

Клетки как раскрасить понимаю) Проблема с этой рамкой с буквами и цифрами.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

nvanyuk09, 10 строк по 10 ячеек. Зачем вы их там наобъединяли?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

nvanyuk09, https://jsfiddle.net/y9ob13eg/

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

nvanyuk09, не забывайте отмечать решениями ответы, которые помогли.

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 2

1 комментарий

Комментировать

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- час назад
- 37 просмотров
0

ответов
HTML

+1 ещё

Простой
Как реализовать форму ввода как в веб-версии chatGPT?
- 1 подписчик
- 5 часов назад
- 59 просмотров
0

ответов
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 111 просмотров
1

ответ
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 154 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 184 просмотра
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 170 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 136 просмотров
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 103 просмотра
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 176 просмотров
0

ответов
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 124 просмотра
2

ответа
Показать ещё Загружается…

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

Если задать этот размер, то все ячейки получаются одинаковыми

Не задавайте его всем ячейкам...

Выложите ваш код в песочницу и покажите, что не получается.
nvanyuk09,
так вы же пишете

td{ border:solid black; width:48px; height:48px; }

т.е. задай всем td размеры 48х48.
Зачем, если вам нужны только некоторые?
Для заголовочных ячеек подходят теги th.
Либо задайте классы и задавайте размеры им.

Клетки раскрашиваются через :nth-child odd и even.
css.yoksel.ru/nth-child
Ankhena, Верхние и нижние ячейки сужаю через th. А что делать с левыми и правыми? Рамка не получается. Не хватает места чтобы вписать 8ки.

Клетки как раскрасить понимаю) Проблема с этой рамкой с буквами и цифрами.
nvanyuk09, 10 строк по 10 ячеек. Зачем вы их там наобъединяли?
nvanyuk09, не забывайте отмечать решениями ответы, которые помогли.