Таблицы часто используются в документации как отличный способ обобщения информации. При объединении в виде таблицы огромные объемы данных становятся более понятными.
В системе Документерра таблицы можно добавлять на страницу на вкладке Вставка в верхней панели в Режиме «Дизайн».
После нажатия на элемент Таблица появится диалоговое окно. В этом диалоговом окне можно настроить таблицу в соответствии со своими потребностями, указав количество столбцов, строк, настроив макет и т.д.
Вы можете мгновенно применить стиль к своей таблице с помощью опций Специальных возможностей.
Здесь вы можете задать первую строку или первую строку и первый столбец более заметными (для удобства навигации по таблице), выделив их цветом. На уровне кода эти элементы изменяются с td на th и, таким образом, становятся заголовками таблиц. На скриншоте ниже показано, как это сделать для обоих элементов.
Результат выглядит следующим образом:
 |
Примечание |
| Цвет этих шапок взят из файла Style.css. | |
Стилизация таблиц с помощью CSS
В системе Документерра все таблицы, добавленные на страницы справки, автоматически получают класс CSS — CHTable. Этот класс по умолчанию применяется ко всем таблицам.
Если вы решили изменить внешний вид таблиц, просто измените CSS-стили для класса ChTable в файле CSS-стилей, используемом в вашем текущем проекте.
Если вы хотите создать свой собственный CSS-класс для таблиц, просто сделайте это в Редакторе CSS, а затем при добавлении таблицы в документацию выберите этот вновь созданный класс из списка классов в диалоговом окне Вставка таблицы.
Чтобы отредактировать CSS-файл таблицы, выполните следующие действия:
- Перейдите в раздел Стили на вкладке Домашняя страница в верхней панели в Режиме «Дизайн» и нажмите Открыть Style.css для редактирования... . Откроется редактор CSS.
- Найдите класс ChTable в этом файле. Для удобства вы можете использовать сочетание клавиш Ctrl+F и ввести имя класса.
- Отредактируйте CSS-код.
Ниже вы найдете несколько примеров выполнения основных задач по стилизации таблиц в системе Документерра с помощью CSS.
Основные задачи по стилизации
Изменение стиля шапки
Вот первоначальный внешний вид нашей таблицы по умолчанию:
Чтобы изменить стиль шапки таблицы, нам нужно найти класс ChTable в коде, как описано выше. Затем нам нужно найти селектор th, поскольку он определяет шапки в таблице.
Теперь можно изменить свойство фона, добавив другой цвет по собственному выбору. Этот цвет фона будет использоваться для шапок во всех таблицах с классом ChTable по умолчанию.
Сохраните изменения и перезагрузите страницу справки, чтобы увидеть результаты:
Изменение стиля четных и нечетных строк
Если вам нужно изменить стиль строк, найдите эту строку в коде -. CHTable tr:nth-child(even). Ее изменение повлияет на стиль четных строк. По умолчанию четные строки окрашены в серый цвет.
Мы сделаем их зелеными, изменив #efefef на #eeffcc:
Сохраните изменения, перезагрузите страницу, и вот результат:
 |
Совет |
| Если вам нужно изменить стиль нечетных строк, добавьте свойство background в селектор . CHTable и укажите нужный цвет. | |
|
Примечание |
| Обратите внимание, что стили четных и нечетных строк, примененные с помощью селектора nth-child, не будут работать в печатных форматах, таких как PDF или Microsoft Word. | |
Предотвращение разрывов строк в шапках таблиц
Когда первый столбец играет роль шапки таблицы, он может содержать важную информацию, такую как названия компаний, названия продуктов и т.д. Часто такая информация должна рассматриваться как одна строка без разрывов. Взгляните на этот пример:
Чтобы исправить это, просто добавьте следующую строку (.CHTable tr:nth-child(1) {white-space: nowrap;}) к вашему CSS-коду.
|
Совет |
| Если вы используете собственный CSS-класс для таблиц, просто введите его вместо . CHTable в этой строке. Например, .myTable tr:nth-child(1) {white-space: nowrap;}. | |
Сохраните изменения, перезагрузите страницу. В первом столбце не будет разрывов строк, остальные столбцы останутся одинаковыми по размеру, но шрифт будет меньше.
Вот таким образом редактируются стили таблиц в системе Документерра.