ТАБЛИЦЫ
На нашей платформе таблицы работают иначе, чем на Quadra: система допускает больше гибкости в стилях, но строже относится к разрешённым атрибутам. Некоторые конструкции, привычные пользователям Quadra, здесь просто не сработают — они либо будут отброшены, либо не позволят сохранить сообщение вовсе.
Поэтому в этом разделе вы найдёте не только примеры базовой таблицы, но и список допустимых атрибутов (качеств таблицы) и рабочих комбинаций, протестированных в условиях движка форума.
В стилях таблицы разрешённые атрибуты пишутся внутри кавычек. Разрешены все безопасные атрибуты.
список
border — устанавливает толщину и стиль рамки таблицы или ячейки (например, border="1").
cellspacing — расстояние между ячейками таблицы.
cellpadding — внутренние отступы внутри ячеек (от края ячейки до содержимого).
width — задаёт ширину таблицы или отдельной ячейки (в пикселях или процентах от ширины поста).
height — задаёт высоту таблицы или отдельной ячейки.
style — позволяет добавлять CSS-стили напрямую (например, style="text-align:center;").
align — выравнивание таблицы или содержимого ячейки по горизонтали (left, center, right).
valign — вертикальное выравнивание содержимого ячейки (top, middle, bottom).
colspan — объединяет несколько столбцов в одну ячейку (горизонтально).
rowspan — объединяет несколько строк в одну ячейку (вертикально).
bgcolor — устанавливает цвет фона ячейки (например, bgcolor="#f0f0f0").
class — задаёт CSS-класс, если используются внешние стили (чаще не нужен, но допустим).
id — уникальный идентификатор элемента, нужен для целей навигации или скриптов (если применяются).
Настройки по умолчанию: выравнивание ячеек по верху и по ширине, рамка в 1px. Если хотите без рамки, пишите первый тег так: table border="0"
Приведем примеры:
1. Базовая таблица с атрибутами выравнивания и фона
1.
| Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
| Текст справа |
Текст сверху и по центру |
Серый фон |
Код:
[table border="2" cellpadding="5" align="center"]
[tr]
[td]Ячейка 1[/td]
[td]Ячейка 2[/td]
[td]Ячейка 3[/td]
[/tr]
[tr]
[td align="right"]Текст справа[/td]
[td valign="top" align="center"]Текст сверху и по центру[/td]
[td bgcolor="#f0f0f0"]Серый фон[/td]
[/tr]
[/table]
[table border="2" cellpadding="5" align="center"]
[tr]
[td]Ячейка 1[/td]
[td]Ячейка 2[/td]
[td]Ячейка 3[/td]
[/tr]
[tr]
[td align="right"]Текст справа[/td]
[td valign="top" align="center"]Текст сверху и по центру[/td]
[td bgcolor="#f0f0f0"]Серый фон[/td]
[/tr]
[/table]
Этот пример демонстрирует использование CSS-стилей через атрибут `style`, а также применение `colspan` и `rowspan` для объединения ячеек по горизонтали и вертикали.
Таблица включает:
— заголовок, растянутый на две колонки;
— стилизованные границы и отступы;
— объединённую ячейку в левой колонке и наклонный текст в одной из строк.
| Заголовок |
| Левая колонка |
Правая колонка |
| Объединённые строки |
Строка 1, наклонная |
| Строка 2 |
Код:
[table style="border-collapse: collapse; margin: 10px 0;"]
[tr style="background-color: #e0e0ff;"]
[td colspan="2" style="font-weight: bold; text-align: center;"]Заголовок[/td]
[/tr]
[tr]
[td width="30%" style="border: 1px solid #ccc; padding: 5px;"]Левая колонка[/td]
[td style="border: 1px solid #ccc; padding: 5px;"]Правая колонка[/td]
[/tr]
[tr]
[td rowspan="2"]Объединённые строки[/td]
[td style="font-style:italic;"]Строка 1, наклонная[/td]
[/tr]
[tr]
[td]Строка 2[/td]
[/tr]
[/table]
Эта таблица показывает, как выглядит разметка без использования каких-либо атрибутов или CSS-стилей.
Ширина колонок распределяется автоматически, в зависимости от содержимого ячеек.
Такой вариант подходит для простых случаев, когда не требуется дополнительное оформление.
| Автоматическая ширина 1 |
Автоматическая ширина 2 |
Автоматическая ширина 3 |
| Без стилей |
Должна быть |
Равномерная ширина |
Код:
[table]
[tr]
[td]Автоматическая ширина 1[/td]
[td]Автоматическая ширина 2[/td]
[td]Автоматическая ширина 3[/td]
[/tr]
[tr]
[td]Без стилей[/td]
[td]Должна быть[/td]
[td]Равномерная ширина[/td]
[/tr]
[/table]
Этот пример демонстрирует таблицу с одновременным использованием HTML-атрибутов (`border`, `cellpadding`, `cellspacing`, `colspan`, `valign`, `width`) и встроенных CSS-стилей через `style`.
Выделены следующие особенности:
— заголовок таблицы растянут на две колонки (`colspan="2"`);
— левая колонка заданной ширины и с вертикальным выравниванием (`valign="top"`);
— правая колонка оформлена с внутренним отступом и декоративной пунктирной рамкой слева (`border-left: 3px dashed red;`).
| Заголовок таблицы |
| Левая колонка |
Правая колонка с дополнительными стилями |
Код:
[table border="1" cellpadding="5" cellspacing="0" style="width: 80%; margin: 20px auto;"]
[tr style="background-color: #f5f5f5;"]
[td align="center" colspan="2"]Заголовок таблицы[/td]
[/tr]
[tr]
[td width="30%" valign="top"]Левая колонка[/td]
[td style="padding: 10px; border-left: 3px dashed red;"]Правая колонка с дополнительными стилями[/td]
[/tr]
[/table]
Этот пример иллюстрирует, как с помощью CSS-стилей можно оформить таблицу:
Особенности оформления:
— используется шрифт `Arial` и эффект лёгкой тени (`box-shadow`) для визуального отделения таблицы от фона;
— строки чередуются по цвету (`background-color`) для лучшей читаемости;
— добавлены отступы внутри ячеек (`padding`) и нижняя рамка (`border-bottom`) для разделения;
— указано плавное появление фона (`transition`), хотя на нашей платформе анимации могут быть не поддержаны визуально.
| ID |
Заголовок |
Комментарии |
| 1 |
Текст 1 |
Пояснения 1 |
| 2 |
Текст 2 |
Пояснения 2 |
Код:
[table style="width: 100%; border-collapse: collapse; font-family: Arial; box-shadow: 0 2px 3px rgba(0,0,0,0.1);"]
[tr]
[td style="padding: 12px 15px;"]ID[/td]
[td]Заголовок[/td]
[td]Комментарии[/td]
[/tr]
[tr style="background-color: #fff; transition: all 0.3s;"]
[td style="padding: 10px 15px; border-bottom: 1px solid #eee;"]1[/td]
[td style="border-bottom: 1px solid #eee;"]Текст 1[/td]
[td style="border-bottom: 1px solid #eee;"]Пояснения 1[/td]
[/tr]
[tr style="background-color: #f9f9f9; transition: all 0.3s;"]
[td style="padding: 10px 15px; border-bottom: 1px solid #eee;"]2[/td]
[td style="border-bottom: 1px solid #eee;"]Текст 2[/td]
[td style="border-bottom: 1px solid #eee;"]Пояснения 2[/td]
[/tr]
[/table]
Эта таблица оформлена с помощью стилей. В ней сочетаются структурное и декоративное оформление:
— зелёная рамка (`border`) и закруглённые углы (`border-radius`) придают таблице вид карточки;
— заголовок объединяет все три колонки и выделен цветом фона, белым шрифтом и увеличенным размером текста;
— строки содержат чёткие колонки: время, предмет, аудитория;
— используется `rowspan`, чтобы объединить ячейку времени для двух предметов подряд;
— мягкие оттенки и границы (`border-bottom`) повышают читаемость без перегрузки визуала.
| Расписание занятий |
| Время |
Предмет |
Аудитория |
| 9:00-10:30 |
Математика |
Ауд. 304 |
| Физика |
Ауд. 415 |
Код:
[table style="width: 90%; margin: 25px auto; border: 2px solid #4CAF50; border-radius: 5px; overflow: hidden;"]
[tr]
[td colspan="3" style="background-color: #4CAF50; color: white; text-align: center; padding: 15px; font-size: 1.2em;"]Расписание занятий[/td]
[/tr]
[tr style="background-color: #f2f2f2;"]
[td style="padding: 12px; text-align: center; font-weight: bold; width: 20%;"]Время[/td]
[td style="padding: 12px; text-align: center; font-weight: bold; width: 40%;"]Предмет[/td]
[td style="padding: 12px; text-align: center; font-weight: bold; width: 40%;"]Аудитория[/td]
[/tr]
[tr]
[td rowspan="2" style="padding: 10px; text-align: center; vertical-align: middle; background-color: #e8f5e9;"]9:00-10:30[/td]
[td style="padding: 10px; border-bottom: 1px solid #ddd;"]Математика[/td]
[td style="padding: 10px; border-bottom: 1px solid #ddd;"]Ауд. 304[/td]
[/tr]
[tr]
[td style="padding: 10px;"]Физика[/td]
[td style="padding: 10px;"]Ауд. 415[/td]
[/tr]
[/table]
![[Изображение: bb.png]](https://satina.space/images/headers/bb.png)
![[Изображение: e85f7d9186fd.png]](https://i.ibb.co/HLxbZmW2/e85f7d9186fd.png)