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

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

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

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, не забывайте отмечать решениями ответы, которые помогли.

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

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

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

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- 15 часов назад
- 100 просмотров
1

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- 20 часов назад
- 138 просмотров
2

ответа
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- 21 час назад
- 52 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- вчера
- 56 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 24 дек.
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 24 дек.
- 64 просмотра
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 23 дек.
- 75 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 23 дек.
- 68 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 140 просмотров
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 131 просмотр
1

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Подключить бекенд к React проекту и внести графические правки

26 дек. 2024, в 20:18

5000 руб./за проект

Сделать сайт на Wordpress (или предложить свое)

26 дек. 2024, в 18:20

35000 руб./за проект

Торговый робот для Bybit

26 дек. 2024, в 18:12

20000 руб./за проект

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

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

Выложите ваш код в песочницу и покажите, что не получается.
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, не забывайте отмечать решениями ответы, которые помогли.