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

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

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

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

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 32 минуты назад
- 15 просмотров
0

ответов
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 3 часа назад
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 174 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 107 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 107 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 106 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 101 просмотр
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Во Flutter доделать функцию из Ton блокчейна (выставление на продажу)

25 нояб. 2024, в 19:44

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

Здравствуйте! Меня зовут Александр, я HR-менеджер компаний Свежий Сове

25 нояб. 2024, в 19:41

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

Перенести сайт на CMS Wordpress c Tilda

25 нояб. 2024, в 18:33

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

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

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

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