Содержание

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

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

Введение

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

Left-AlignedCenter AlignedRight Aligned
Row 1Cell 2Cell 3
Row 2Cell 5Cell 6
Row 3Cell 8Cell 9

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

1
2
3
4
5
6
| 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        |

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

Left-AlignedCenter AlignedRight Aligned
Row 1BoldCell 3
Row 2ItalicCell 6
Row 3StrikeCell 9
Row 3LinkCell 9

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

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

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

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

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

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

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

Row 1BoldCell 3
Row 2ItalicCell 6
Row 3StrikeCell 9

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

Объединение

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

Column 1Column 2Column 3
R1 TextR2 Text AR3 Text A
R3 Text B
R2 Text BR3 Text C
R3 Text D

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

Полезное

Заключение

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

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

Удачи!

😎