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

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

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

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

+2 ещё

Простой
Django не могу правильно настроить шаблон?
- 1 подписчик
- 52 минуты назад
- 21 просмотр
1

ответ
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 54 минуты назад
- 17 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 7 часов назад
- 78 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 7 часов назад
- 89 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 21 час назад
- 74 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 21 час назад
- 76 просмотров
2

ответа
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 23 часа назад
- 73 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 56 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- вчера
- 64 просмотра
1

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Дизайнер, сделать монетизацию для Web расширения

19 апр. 2024, в 16:08

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

Очистка ин.текста с изображения и создание обложки+корешка для книги

19 апр. 2024, в 15:34

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

Разработать фронтенд для интернет-магазина на фреймворке TS

19 апр. 2024, в 15:33

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

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

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

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