Работа с таблицами

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

Панель инструментов таблицы появляется при нажатии на кнопку ico_table_settings слева на панели редактора.

Для вставки таблицы, нажмите кнопку ico_table Вставить новую таблицу. Появится диалог Вставки таблицы.

content.wysiwyg.insert_table

 

Введите желаемое количество столбцов и строк в соответствующих полях.
В поле Отступы в ячейках задайте отступ от границы ячейки до содержимого внутри ячейки (html-свойство cellpadding).
В поле Расстояние между ячейками задайте отступ между двумя соседними ячейками (html-свойство cellspacing).
Поле Выравнивание определяет способ выравнивания таблицы к окружающему ее тексту (html-свойство align).
Поле Граница устанавливает толщину границ таблицы. Вы можете сделать границы невидимыми, введя в это поле ноль.
Поля Высота и Ширина определяют размеры таблицы в пикселях.

После нажатия кнопки Вставитьна странице появится шаблон таблицы. Вы можете перейти в нужную ячейку и начать ввод информации.

Также вы можете перемещать таблицу по странице. Поместите курсор где-нибудь вне таблицы и подведите указатель мыши к границе таблицы, так чтобы он превратился в четыре стрелки, после чего нажмите левую кнопку и тащите таблицу в желаемом направлении. Рисунок ниже иллюстрирует этот процесс.

content.wysiwyg.resize_table

 

После вставки таблицы на панели инструментов редактора UMI.CMS становятся активными кнопки, отвечающие за управление таблицей.

Так, можно удалить активную таблицу нажатием на ico_table_delete(или DELETE на клавиатуре), добавить колонки или строки (ico_table_insert_col_after, ico_table_insert_col_before, ico_table_insert_row_after, ico_table_insert_row_before), удалить текущую колонку ico_table_delete_col или строку ico_table_delete_row, разделить ico_table_split_cells или объединить ico_table_merge_cellsячейки таблицы, или редактировать свойства отдельной строки или ячейки.

 

Редактирование свойств строки таблицы

Чтобы редактировать свойства определённой строки в таблице, поставьте курсор на любую из ячеек этой строки и нажмите кнопку ico_table_row_propsСвойства строки таблицы.

content.wysiwyg.edit_table

На вкладке Общие можно настроить следующие свойства строки:

Строка в части таблицы — выберите, будет ли данная строка содержать заголовки таблицы либо данные.
Поле Выравнивание определяет способ горизонтального выравнивания текста внутри данной строки.
Вертикальное выравнивание — определяет способ выравнивания текста по вертикали внутри данной строки.
Класс — позволяет применить html-класс.
Высота — задает высоту строки в пикселях.

На вкладке Дополнительные можно задать ряд параметров, которые передадутся в виде HTML тэгов — например, id строки, стили css, цвет фона и другие.

 

Редактирование свойств отдельной ячейки таблицы

Чтобы редактировать свойства определённой ячейки в таблице, поставьте курсор на эту ячейку и нажмите кнопку ico_table_cell_propsСвойства ячейки таблицы.

content.wysiwyg.edit_table_cells

На вкладке Общие можно настроить следующие свойства строки:

Тип ячейки — выберите, будет ли данная ячейка содержать заголовок либо данные.
Поле Выравнивание определяет способ горизонтального выравнивания текста внутри данной ячейки.
Вертикальное выравнивание — определяет способ выравнивания текста по вертикали внутри данной ячейки.
Пределы — это html-атрибут scope.
Ширина и Высота — задают соответствующие атрибуты ячейки в пикселях.
Класс — позволяет применить html-класс.

На вкладке Дополнительные можно задать ряд параметров, которые передадутся в виде HTML тэгов — например, id ячейки, стили css, цвет фона, рамки и другие.

 

После того как свойства строки или ячейки отредактированы, необходимо обновить таблицу. Для этого выберите в выпадающем списке подходящий вариант обновления, и нажмите кнопку Обновить.