Как сделать таблицу в Markdown

В этом руководстве объясняется, как создавать таблицы в Markdown — простой и мощный способ организовать данные в вашем контенте. В статье представлены четкие инструкции и примеры, позволяющие легко добавить аккуратные и правильно оформленные таблицы в ваши посты или документацию. Независимо от уровня вашего опыта, этот туториал охватывает все основные моменты.

Введение

Давай для начала разберёмся зачем нужны таблицы в документах markdown и рассмотрим наиболее удобные способы как легко и быстро вставить таблицу в маркдаун документ.

Таблицы часто используются для организации и представления информации в четкой и лаконичной форме. Их можно использовать для отображения данных, сравнения различных значений или демонстрации взаимосвязей между различными фрагментами информации.

Использование таблиц также поможет сделать твой документ визуально более привлекательным и легким для чтения и понимания, особенно если тебе нужно представить много информации.

Так что таблицы всегда полезны для организации информации таким образом, чтобы ее было легко воспринять с первого взгляда.

Синтаксис

В как таковом чистом Маркдауне нет синтаксиса для создания таблиц. Таблицы поддерживаются только в определенных версиях Markdown, например, Markdown Extra или GitHub Flavored Markdown.

Вот здесь можно найти документацию от GitHub по организации информации в виде таблиц. Также мы можем найти поддержку таблиц в расширенном синтаксисе Markdown.

Также я настоятельно рекомендую тебе ознакомиться с этим ресурсом - CommonMark. Цель CommonMark - предоставить строго определенную, хорошо совместимую спецификацию синтаксиса Markdown. CommonMark призван устранить несоответствия и двусмысленности, которые существовали в оригинальном синтаксисе Markdown, сделав его более простым в использовании и внедрении. На сайте размещена официальная спецификация CommonMark, эталонные реализации на C и JavaScript, а также зона публичного обсуждения проекта.

Делаем таблицу

Самый простой и быстрый способ как сделать таблицу в markdown - это использовать Генератор Маркдаун Таблиц или сервис от AnyWayData.

Используя эти инструменты, ты легко и быстро построишь таблицу с помощью удобного графического интерфейса, а затем можешь скопировать полученный текст в формате Markdown в свой файл.

С другой стороны, синтаксис языка маркдаун достаточно простой, чтобы можно было нарисовать таблицы самому. Для этого используются символ pipe или вертикальной черты ( | ) для разделения ячеек и дефиса ( - ) для создания строки заголовка.

Вот простейший пример кода таблицы:

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Cell 2   | Cell 3   |
| Row 2    | Cell 5   | Cell 6   |
| Row 3    | Cell 8   | Cell 9   |

Такой код будет отображаться в готовом документе в следующем виде:

Заметь, что если внутри ячейки тебе нужно использовать символ вертикальной черты в качестве содержимого, то для этого придется написать HTML код этого символа: |.

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Cell 2   |👉 | |

Результат:

Выравнивание

Управлять выравниванием текста в столбцах таблицы ты можешь при помощи двоеточий ( : ). Обрати внимание на двоеточия в строчке с дефисами. Текст в коде таблицы везде смещен влево, но на результате ты увидишь, что он выровнялся в ту сторону, где мы разместили двоеточия.

| Left-Aligned  | Center Aligned  | Right Aligned |
|:------------- |:---------------:| -------------:|
| Row 1         | Cell 2          | Cell 3        |
| Row 2         | Cell 5          | Cell 6        |
| Row 3         | Cell 8          | Cell 9        |

В левом столбце мы использовали двоеточие только слева, так что текст во всем столбце выровнялся влево. В среднем мы использовали двоеточия и слева, и справа, так что в итоге текст в этом столбце выровнялся по центру. Ну а в правом столбце мы разместили двоеточие только справа, так что весь текст выровнялся по правому краю.

Внутри таблиц мы также можем использовать некоторые привычные нам типы markdown форматирования - ссылки, наклонный, жирный или зачеркнутый текст.

| Left-Aligned  | Center Aligned  | Right Aligned |
|:------------- |:---------------:| -------------:|
| Row 1         | **Bold**        | Cell 3        |
| Row 2         | *Italic*        | Cell 6        |
| Row 3         | ~~Strike~~      | Cell 9        |
| Row 3         | [Link](dot.com) | Cell 9        |

Таблица с форматированным текстом внутри:

Однако внутри таблицы Markdown нельзя использовать заголовки, блочные кавычки, списки, горизонтальные разделители, изображения и большинство других тегов HTML.

Без заголовка

Иногда возникает необходимость создать таблицу markdown без заголовка.

Такая простейшая на первый взгляд задача требует довольно креативного подхода. Связано это с тем, что большинство парсеров Markdown не поддерживают таблицы без заголовков. Это означает, что разделительная линия для заголовков является обязательной.

Чтобы сделать таблицу markdown без заголовка, воспользуйся следующей хитростью. Поскольку заголовок все равно обязателен, то вместо текста просто вставь туда специальный код HTML комментария <!-- -->:

| <!-- -->      | <!-- -->        | <!-- -->      |
|:-------------:|:---------------:|:-------------:|
| Row 1         | **Bold**        | Cell 3        |
| Row 2         | *Italic*        | Cell 6        |
| Row 3         | ~~Strike~~      | Cell 9        |

В результате мы получим таблицу без заголовка:

Заметь, что это работает в большинстве случаев, но некоторые приложения всё же могут отображать такой код некорректно. На StackOverflow есть вопрос на эту тему и подробные ответы, описывающие разные варианты создания таких таблиц.

Объединение

Иногда нам может понадобиться еще более изощренное форматирование таблиц, когда нужно объединить несколько ячеек в таблице. Например, вот так:

Скажу сразу, что практически ни в одной реализации Markdown сделать такое стандартными средствами невозможно. Ведь согласно спецификации: “если количество ячеек в таблице меньше, чем количество ячеек в строке заголовка, то вставляются пустые ячейки. Если их больше, то избыток игнорируется”.

Поэтому единственный способ, каким можно создать такую таблицу как указано выше - это использовать чистый HTML код. Пример кода для таблицы вверху:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan=4 align="center">R1 Text</td>
            <td rowspan=2 align="center">R2 Text A</td>
            <td align="center">R3 Text A</td>
        </tr>
        <tr>
            <td align="center">R3 Text B</td>
        </tr>
        <tr>
            <td rowspan=2 align="center">R2 Text B</td>
            <td align="center">R3 Text C</td>
        </tr>
        <tr>
            <td align="center">R3 Text D</td>
        </tr>
    </tbody>
</table>

Полезное

• Генератор Маркдаун Таблиц 1
• Генератор Маркдаун Таблиц 2
• Руководство по языку Markdown
• Как вставить картинку в Markdown

Заключение

Хотя таблицы и представляют собой удобный инструмент для отображения информации в Markdown документах, сам синтаксис языка пока позволяет делать только базовые вещи при создании таблиц в документах.

Мы рассмотрели эти базовые возможности и научились как быстро и легко создать таблицу в маркдаун документе. А для сложных случаев у нас всегда есть старый, добрый HTML код.

Удачи!

😎