ТАБЛИЦЫ
На нашей платформе таблицы работают иначе, чем на Quadra: система допускает больше гибкости в стилях, но строже относится к разрешённым атрибутам. Некоторые конструкции, привычные пользователям Quadra, здесь просто не сработают — они либо будут отброшены, либо не позволят сохранить сообщение вовсе.
Поэтому в этом разделе вы найдёте не только примеры базовой таблицы, но и список допустимых атрибутов (качеств таблицы) и рабочих комбинаций, протестированных в условиях движка форума.
В стилях таблицы разрешённые атрибуты пишутся внутри кавычек. Разрешены все безопасные атрибуты.
список
Настройки по умолчанию: выравнивание ячеек по верху и по ширине, рамка в 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]3. Таблица без стилей и параметров
Эта таблица показывает, как выглядит разметка без использования каких-либо атрибутов или 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]4. таблица с комбинированными атрибутами и стилями
Этот пример демонстрирует таблицу с одновременным использованием 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]5. Таблица в виде списка данных с чередующимися строками
Этот пример иллюстрирует, как с помощью 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]6. Стилизованная таблица
Эта таблица оформлена с помощью стилей. В ней сочетаются структурное и декоративное оформление:
— зелёная рамка (`border`) и закруглённые углы (`border-radius`) придают таблице вид карточки;
— заголовок объединяет все три колонки и выделен цветом фона, белым шрифтом и увеличенным размером текста;
— строки содержат чёткие колонки: время, предмет, аудитория;
— используется `rowspan`, чтобы объединить ячейку времени для двух предметов подряд;
— мягкие оттенки и границы (`border-bottom`) повышают читаемость без перегрузки визуала.
[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]