Формат таблиц сравнения

Таблицы сравнения позволяют читателям легко сравнивать приложения/сервисы по характеристимам.

Текстовый формат

Таблицы сравнения хранятся в формате HTML.

Расположение

/content/tables/fruits.html

Пример

---
title: Таблица сравнения фруктов
publishDate: 2025-01-06T15:50:00Z
lastmod: 2025-07-16T16:42:00Z
contributors: [kttrickster, 'John Doe']
summary: >
  Сравнения фруктов по их вкусу и составу
---
<table>
    <thead>
        <tr>
            <th>Фрукт</th>
            <th><a href="https://ru.wikipedia.org/wiki/Яблоко" target="_blank"><img src="/assets/logos/apple.png" alt="Яблоко" width="64" height="64"><br>Яблоко</a></th>
            <th><a href="https://ru.wikipedia.org/wiki/Банан" target="_blank"><img src="/assets/logos/banana.png" alt="Банан" width="64" height="64"><br>Банан</a></th>
            <th><a href="https://ru.wikipedia.org/wiki/Апельсин" target="_blank"><img src="/assets/logos/orange.png" alt="Апельсин" width="64" height="64"><br>Апельсин</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Общая информация</th>
        </tr>
        <tr>
            <th>Цвет</th>
            <!--Яблоко-->  <td><details><summary>Красный, зелёный, жёлтый</summary>Зависит от сорта</details></td>
            <!--Банан-->   <td>Жёлтый</td>
            <!--Апельсин--><td>Оранжевый</td>
        </tr>
        <tr>
            <th>Свойства</th>
        </tr>
        <tr>
            <th><details><summary>Какая-то характеристика</summary>Пояснение к этой характеристике</details></th>
            <!--Яблоко-->  <td class="bad">Что-то плохое</td>
            <!--Банан-->   <td class="warn">Что-то не совсем хорошее, но и не совсем плохое</td>
            <!--Апельсин--><td class="good">Что-то хорошее. <a href="https://example.com">Ссылка</a></td>
        </tr>
    </tbody>			
</table>

Пример рендера таблицы

Лицевая сторона (Front matter)

Отделяется --- в начале и в конце.

Ключ	Значение
`title`	Заголовок страницы. Должен начинаться с “Таблица сравнения”.
`publishDate`	Дата и время публикации. Самое первое появление страницы на сайте. Не меняется.
`lastmod`	Дата и время последнего обновления содержимого страницы. Меняется перед созданием коммита, который вносит изменения в содержимое страницы для читателя.
`contributors`	Список людей, работавших над этой страницей. По желанию можно добавить свой ник, если вносите свой вклад.

Таблица

Идёт после --- лицевой стороны и содержится внутри <table> </table>.

Пожалуйста, соблюдайте отступы в 4 пробела.

Заголовок таблицы (первая строка)

Содержится внутри <thead> </thead>.

В начале указывается ячейка, в которой написан объект сравнения: <th>Фрукт</th>.

Далее указываются ячейки, задающие столбцы объектов сравнения. Замените всё, что внутри {{ }}, на соответствующие значения.

<th><a href="{{ Ссылка на официальный сайт }}" target="_blank"><img src="/assets/logos/{{ Название файла логотипа/иконки }}" alt="{{ Название объекта сравнения }}" width="64" height="64"><br>{{ Название объекта сравнения }}</a></th>

Тело таблицы (оставшиеся строки)

Задаётся внутри <tbody> </tbody>.

Каждая строка задаётся внутри <tr> </tr>.

Первая ячейка строки задаётся внутри <th> </th>. Внутри пишется название характеристики сравнения. Если это раздел, то нужно оставить здесь только одну ячейку.

Ячейка задаётся следующим образом: <td>{{ Описание }}</td>.

Ячейку можно перекрасить:

<td class="bad">: Красный цвет.
<td class="warn">: Жёлтый цвет.
<td class="good">: Зелёный цвет.

Цвет должен соответствовать по смыслу.

Вы можете оставить ссылку внутри ячейки: <a href="https://example.com">Ссылка</a>

Вы можете оставить пояснение к ячейке:

<details><summary>Кратко</summary>Подробное пояснение, которое раскрывается при нажатии<details>

Дополнительные ссылки и информация

Скопируйте /data/links/tables/_TEMPLATE.yaml в ту же директорию и назовите так же, как и файл таблицы (в примере fruits.yaml). Отредактируйте файл согласно шаблону.

Идентификаторы объектов

Каждый объект сравнения (столбец) в таблице должен иметь свой идентификатор.

Создайте соответствующие файлы: /data/cards/example.yaml, где example — идентификатор столбца.

Содержимое файла:

title: Example
icon: example.png
homepage: https://example.com

Ключ	Значение
`title`	Заголовок объекта сравнения.
`icon`	Необязательно. Альтернативное название иконки. По умолчанию ищется SVG-файл. Если иконка задана в PNG, то укажите название файла.
`homepage`	Официальный сайт.

Если для этого объекта сравнения существует отдельная страница на сайте, то этот файл содержит больше метаданных. Смотрите /data/cards/_TEMPLATE.yaml для шаблона.

Последнее обновление 19 июля 2025 г.

Философия