Подробно о выравнивании: по левому краю, по центру, по правому краю
Что вы сможете делать после изучения
- Освоить синтаксис и эффекты трёх способов выравнивания
- Понимать, как разделительные строки задают выравнивание
- Разбираться в принципах работы алгоритма заполнения ячеек
- Знать, почему ширина разделительных строк автоматически корректируется
Ваша текущая проблема
ИИ сгенерировал таблицу, но выравнивание столбцов выглядит не очень красиво:
| Название | Тип | Описание |
|--- | --- | ---|
| Пользователь | string | Имя пользователя |
| Возраст | number | Возраст |
| is_active | boolean | Активен ли |Вы хотите, чтобы некоторые столбцы были выровнены по центру или по правому краю, делая таблицу более читаемой, но не знаете, как это указать.
Когда использовать этот приём
- Когда хотите, чтобы некоторые столбцы были выровнены по центру (например, статусы, метки)
- Когда хотите, чтобы числовые столбцы были выровнены по правому краю (для удобства сравнения значений)
- Когда хотите, чтобы текстовые столбцы были выровнены по левому краю (поведение по умолчанию)
- Когда хотите понять принципы реализации выравнивания
Ключевая идея: разделительная строка определяет выравнивание
Выравнивание в таблицах Markdown не задаётся в каждой строке отдельно, а единообразно указывается через разделительную строку.
Синтаксис разделительной строки: :?-+:? (двоеточие + дефис + двоеточие)
| Положение двоеточия | Выравнивание | Пример |
|---|---|---|
| С обеих сторон | По центру | :---: |
| Только справа | По правому краю | ---: |
| Ни одного | По левому краю | --- или :--- |
Каждая ячейка разделительной строки соответствует выравниванию одного столбца, и плагин форматирует весь столбец согласно этому правилу.
Делаем вместе: три способа выравнивания
Шаг 1: Выравнивание по левому краю (по умолчанию)
Почему
Выравнивание по левому краю — это поведение таблиц по умолчанию, подходящее для текстовых данных.
Синтаксис
| Название | Описание |
| :--- | :--- | ← Двоеточие слева или без двоеточия — выравнивание по левому краю
| Пользователь | Имя пользователя |Вы должны увидеть
| Название | Описание |
|--- | ---|
| Пользователь | Имя пользователя |Разделительная строка будет отображаться как :--- (маркер выравнивания по левому краю), текст выровнен по левому краю.
Реализация в исходном коде
// Функция getAlignment: парсинг способа выравнивания
function getAlignment(delimiterCell: string): "left" | "center" | "right" {
const trimmed = delimiterCell.trim()
const hasLeftColon = trimmed.startsWith(":")
const hasRightColon = trimmed.endsWith(":")
if (hasLeftColon && hasRightColon) return "center"
if (hasRightColon) return "right"
return "left" // По умолчанию возвращается left
}Расположение в исходном коде: index.ts:141-149
Объяснение логики
- Двоеточия с обеих сторон (
:---:) → возвращает"center" - Только двоеточие справа (
---:) → возвращает"right" - Остальные случаи (
---или:---) → возвращает"left"(по умолчанию)
Шаг 2: Выравнивание по центру
Почему
Выравнивание по центру подходит для меток статусов, коротких текстов, заголовков и другого контента, требующего визуального центрирования.
Синтаксис
| Название | Статус | Описание |
|--- | --- | --- | ---|
| Пользователь | Активен | Имя пользователя |Вы должны увидеть
| Название | Статус | Описание |
|--- | --- | ---|
| Пользователь | Активен | Имя пользователя |Текст "Активен" в среднем столбце будет отображаться по центру, а разделительная строка покажется как :---: (маркер центрирования).
Принцип форматирования разделительной строки
Форматирование ячеек разделительной строки обрабатывается функцией formatSeparatorCell:
function formatSeparatorCell(width: number, align: "left" | "center" | "right"): string {
if (align === "center") return ":" + "-".repeat(Math.max(1, width - 2)) + ":"
if (align === "right") return "-".repeat(Math.max(1, width - 1)) + ":"
return "-".repeat(width)
}Расположение в исходном коде: index.ts:213-217
Математический принцип центрирования
Формат разделительной строки для центрирования: : + дефис + :
| Целевая ширина | Формула расчёта | Результат |
|---|---|---|
| 3 | : + *1 + : | :-: |
| 5 | : + -*3 + : | :---: |
| 10 | : + -*8 + : | :--------: |
Math.max(1, width - 2) гарантирует, что остаётся как минимум 1 дефис, предотвращая превращение ширины 2 в :: (без разделительного эффекта).
Шаг 3: Выравнивание по правому краю
Почему
Выравнивание по правому краю подходит для чисел, сумм, дат и других данных, которые нужно сравнивать справа налево.
Синтаксис
| Название | Цена | Количество |
| :--- | ---: | ---: | ← Двоеточие справа означает выравнивание по правому краю
| Товар | 99.9 | 100 |Вы должны увидеть
| Название | Цена | Количество |
|--- | --- | ---|
| Товар | 99.9 | 100 |Числа выровнены по правому краю для удобства сравнения размеров.
Математический принцип выравнивания по правому краю
Формат разделительной строки для выравнивания по правому краю: дефис + :
| Целевая ширина | Формула расчёта | Результат |
|---|---|---|
| 3 | -*2 + : | --: |
| 5 | -*4 + : | ----: |
| 10 | -*9 + : | ---------: |
Math.max(1, width - 1) гарантирует, что остаётся как минимум 1 дефис.
Алгоритм заполнения ячеек
Как плагин определяет, сколько пробелов добавить с каждой стороны ячейки? Ответ — в функции padCell.
Реализация в исходном коде
function padCell(text: string, width: number, align: "left" | "center" | "right"): string {
const displayWidth = calculateDisplayWidth(text) // Вычисление отображаемой ширины
const totalPadding = Math.max(0, width - displayWidth)
if (align === "center") {
const leftPad = Math.floor(totalPadding / 2)
const rightPad = totalPadding - leftPad
return " ".repeat(leftPad) + text + " ".repeat(rightPad)
} else if (align === "right") {
return " ".repeat(totalPadding) + text
} else {
return text + " ".repeat(totalPadding)
}
}Расположение в исходном коде: index.ts:198-211
Правила заполнения
| Способ выравнивания | Левое заполнение | Правое заполнение | Пример (целевая ширина 10, текст "abc") |
|---|---|---|---|
| По левому краю | 0 | totalPadding | abc |
| По центру | floor(total/2) | total - floor(total/2) | abc |
| По правому краю | totalPadding | 0 | abc |
Математические детали центрирования
Math.floor(totalPadding / 2) гарантирует, что левое заполнение — целое число, а лишнее пространство добавляется справа.
| Целевая ширина | Ширина текста | totalPadding | Левое заполнение | Правое заполнение | Результат |
|---|---|---|---|---|---|
| 10 | 3 | 7 | 3 (7÷2=3.5→3) | 4 (7-3) | abc |
| 11 | 3 | 8 | 4 (8÷2=4) | 4 (8-4) | abc |
| 12 | 3 | 9 | 4 (9÷2=4.5→4) | 5 (9-4) | abc |
Полный пример
Входная таблица (с указанием выравнивания для разных столбцов):
| Название | Статус | Цена | Описание |
|--- | --- | --- | ---|
| ТоварA | Активен | 99.9 | Это товар |
| ТоварB | Отключён | 199.0 | Это другой товар |Результат форматирования:
| Название | Статус | Цена | Описание |
|--- | --- | --- | ---|
| ТоварA | Активен | 99.9 | Это товар |
| ТоварB | Отключён | 199.0 | Это другой товар |Выравнивание каждого столбца:
| Название столбца | Синтаксис разделительной строки | Выравнивание | Описание |
|---|---|---|---|
| Название | :--- | По левому краю | Текст слева |
| Статус | :---: | По центру | Текст по центру |
| Цена | ---: | По правому краю | Числа справа |
| Описание | :--- | По левому краю | Текст слева |
Контрольные вопросы
Пройдя этот урок, вы должны уметь отвечать на вопросы:
- [ ] Как задать выравнивание по центру? (Ответ: в разделительной строке использовать
:---:) - [ ] Как задать выравнивание по правому краю? (Ответ: в разделительной строке использовать
---:) - [ ] Каков синтаксис выравнивания по левому краю по умолчанию? (Ответ:
---или:---) - [ ] Почему для центрирования используется
Math.floor(totalPadding / 2)? (Ответ: чтобы левое заполнение было целым числом, а лишнее пространство добавлялось справа) - [ ] Что означает
:---:в разделительной строке? (Ответ: маркер выравнивания по центру — по двоеточию с каждой стороны, между ними дефисы)
Предупреждения о типичных ошибках
Распространённое заблуждение
Заблуждение: выравнивание нужно указывать в каждой строке
Факт: Не нужно. Только разделительная строка задаёт выравнивание, строки с данными автоматически выравниваются по столбцам.
Разделительная строка — это "конфигурация", строки с данными — это "контент", достаточно одной строки конфигурации.
Важно помнить
Положение двоеточий в разделительной строке должно соответствовать столбцам.
| Пример ошибки | Проблема |
|---|---|
| ` | :--- |
| ` | :--- |
Количество столбцов в разделительной строке должно совпадать с количеством в заголовке и строках с данными!
Резюме урока
| Способ выравнивания | Синтаксис разделительной строки | Сценарии использования |
|---|---|---|
| По левому краю | --- или :--- | Текст, описательные данные (по умолчанию) |
| По центру | :---: | Метки статусов, короткие тексты, заголовки |
| По правому краю | ---: | Числа, суммы, даты |
Ключевые функции:
| Функция | Назначение | Расположение в коде |
|---|---|---|
getAlignment() | Парсинг способа выравнивания из ячейки разделительной строки | 141-149 |
padCell() | Заполнение ячейки до заданной ширины | 198-211 |
formatSeparatorCell() | Форматирование ячейки разделительной строки | 213-217 |
Мнемоническое правило:
Двоеточия по обеим сторонам — по центру, двоеточие справа — по правому краю, без двоеточий по умолчанию слева, всё решает разделительная строка.
Анонс следующего урока
В следующем уроке мы изучим Распространённые проблемы: что делать, если таблица не форматируется.
Вы узнаете:
- Как быстро найти ошибку
invalid structure- Методы диагностики ошибок конфигурации
- Решения типичных проблем с таблицами
Приложение: Справочник по исходному коду
Нажмите, чтобы развернуть информацию о расположении кода
Последнее обновление: 2026-01-26
| Функциональность | Путь к файлу | Строки |
|---|---|---|
| Парсинг выравнивания | index.ts | 141-149 |
| Заполнение ячеек | index.ts | 198-211 |
| Форматирование разделительной строки | index.ts | 213-217 |
| Применение выравнивания | index.ts | 107-113 |
Ключевые функции:
getAlignment(delimiterCell: string)— парсинг способа выравнивания из ячейки разделительной строки- Возвращает
"left"|"center"|"right" - Логика: двоеточия с обеих сторон → по центру, только справа → по правому краю, остальное → по левому краю
- Возвращает
padCell(text, width, align)— заполнение ячейки до заданной ширины- Вычисление разницы между отображаемой шириной и целевой шириной
- Распределение левого и правого заполнения в зависимости от способа выравнивания
- Для центрирования используется
Math.floor(totalPadding / 2)для обеспечения целочисленного левого заполнения
formatSeparatorCell(width, align)— форматирование ячейки разделительной строки- По центру:
:+-*(width-2) +: - По правому краю:
-*(width-1) +: - По левому краю:
-*width - Использование
Math.max(1, ...)для обеспечения минимум 1 дефиса
- По центру: