Многострочные таблицы

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

Многострочные таблицы поддерживают объединение ячеек.

Синтаксис

• таблица начинается #| и заканчивается |#;
• строки начинаются и заканчиваются ||;
• ячейки отделяются символом |.

#|
|| **Заголовок1** | **Заголовок2** ||
|| Текст | Текст ||
|#

Результат:

Многострочный текст

В ячейке таблицы можно размещать любой многострочный текст. Например, списки.

#|
||Текст
на двух строчках
|
- Текст 1
- Текст 2[cell_merging_guide.md](..%2F..%2F..%2F..%2F..%2FDocuments%2Fcell_merging_guide.md)
- Текст 3
- Текст 4||
|#

Результат:

Или даже другую таблицу:

#|
|| 1
|

Текст выше вложенной таблицы

#|
|| 5
| 6||
|| 7
| 8||
|#

Текст под вложенной таблицей||
|| 3
| 4||
|#

Результат

Атрибуты таблицы

У таблицы можно задать атрибуты на трёх уровнях: для всей таблицы, для отдельной строки и для отдельной ячейки.

Атрибуты всей таблицы задаются на отдельной строке между #| и первой строкой ||:

#|
|:{header-rows="1"}
|| **Заголовок1** | **Заголовок2** ||
|| Текст | Текст ||
|#

Атрибуты строки задаются сразу после открывающих ||:

#|
||:{class="header"} **Заголовок1** | **Заголовок2** ||
|| Текст | Текст ||
|#

Атрибуты ячейки задаются в начале её содержимого. Для первой ячейки строки — сразу после || (или после атрибутов строки, если они есть), для остальных — сразу после |:

#|
||::{align="center"} **Заголовок1** | **Заголовок2** ||
|| Текст |::{align="top-right"} Текст ||
|#

Заголовочные строки

Чтобы пометить первые N строк таблицы как заголовочные, используйте атрибут таблицы header-rows="N". Заголовочные строки рендерятся в <th scope="col"> вместо <td>.

Значение N должно быть положительным целым числом.

#|
|:{header-rows="1"}
|| Заголовок1 | Заголовок2 | Заголовок3 ||
|| Текст | Текст | Текст ||
|| Текст | Текст | Текст ||
|#

Результат

Пользовательские размеры ячеек

Размерами ячеек можно управлять с помощью атрибутов.

#|
|| **Заголовок1** {width=400px} | **Заголовок2** ||
|| Текст | Текст ||
|#

#|
|| **Заголовок1** {height=100px} | **Заголовок2** ||
|| Текст | Текст ||
|#

Объединение ячеек

Ячейки можно объединять вертикально с помощью ячейки с символом "^":

#|
|| Заголовок1         | Заголовок2   ||
|| Текст на два ряда  | Другой текст ||
|| ^                  | Еще текст    ||
|#

Результат

Горизонтальное объединение поддерживается через символ ">":

#|
|| Заголовок1            | Заголовок2   ||
|| Текст на две колонки  | >            ||
|| Другой текст          | Еще текст    ||
|#

Результат

Символы объединения ячеек можно использовать вместе:

#|
|| Заголовок1                       | Заголовок2   | Заголовок3 || 
|| Текст на две колонки и два ряда  | >            | Текст      ||
|| ^                                | >            | Еще текст  ||
|#

Результат

Экранирование символов объединения ячеек

Для того чтобы получить клетку с одним из символов объединения ячеек, внутри можно использовать экранирование через "",
т.е. "^" и ">".

#|
|| Заголовок1                       | Заголовок2 | Заголовок3 || 
|| Текст на одну ячейку             | \>         | Текст      ||
|| \^                               | \>         | Еще текст  ||
|#

Результат

Выравнивание текста в ячейках

Для управления выравниванием содержимого ячейки используйте атрибут ячейки align:

#|
|| Заголовок1                              | Заголовок2 | Заголовок3 ||
||::{align="center"} Текст на две колонки и два ряда | >          | Текст      ||
|| ^                                       | >          | Еще текст  ||
|#

Результат

Доступны следующие значения:

• top-left
• top-center
• top-right
• center
• bottom-left
• bottom-center
• bottom-right

Устаревший синтаксис

#|
|| Заголовок1                                           | Заголовок2 | Заголовок3 ||
|| Текст на две колонки и два ряда {.cell-align-center} | >          | Текст      ||
|| ^                                                    | >          | Еще текст  ||
|#

Устаревшие значения:

• cell-align-top-left
• cell-align-top-center
• cell-align-top-right
• cell-align-center
• cell-align-bottom-left
• cell-align-bottom-center
• cell-align-bottom-right

Открытие в модальном окне

Широкие таблицы удобно открывать в модальном окне. В многострочных таблицах это реализуется с помощью атрибута {wide-content}. Атрибут добавляется сразу после символов, закрывающих таблицу |#.

#|
|| **Заголовок1** | **Заголовок2** ||
|| Текст | Текст ||
|| Текст | Текст ||
|| Текст | Текст ||
|# {wide-content}

Результат

Ограничение высоты таблицы

У простых и многострочных таблиц можно ограничить высоту, добавив атрибут {sticky-header}. Если таблица превышает размер экрана устройства пользователя, то её заголовок закрепляется, высота ограничивается высотой экрана и контент таблицы начинает скроллиться.

#|
|| Заголовок1                       | Заголовок2 | Заголовок3 ||
|| Текст на одну ячейку             | \>         | Текст      ||
|| \^                               | \>         | Еще текст  ||
|| Текст на одну ячейку             | \>         | Текст      ||
...
|| \^                               | \>         | Еще текст  ||
|| Текст на одну ячейку             | \>         | Текст      ||
|| \^                               | \>         | **Еще текст**  ||
|#

{sticky-header}