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

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

3.4.2.1  Добавление и изменение параметров таблиц
 

Добавление на страницу и изменение параметров добавленных таблиц осуществляется с помощью диалога добавления/изменения таблиц, изображенного на рисунке 3.13.

 

Рисунок 3.13 – Окно добавления/изменения таблицы вкладка «Общее»
 

Для добавления таблицы поставить курсор в место в тексте, где планируется ее вставить. В случае редактирования - нажмите на таблицу левой кнопкой мыши. Нажмите на кнопку вызова диалога добавления/изменения таблицы  (добавить/изменить таблицу).

Установите основные параметры таблицы в группе «Общие параметры».

В полях «Столбцы» и «Строки» задайте обязательные параметры: количество столбцов и строк в таблице. В диалоге редактирования таблицы эти поля заблокированы и отражают  текущее количество колонок и строк. Чтобы добавить столбцы и строки после создания таблицы воспользуйтесь функциями добавления столбцов и строк панели инструментов редактора TinyMCE.

В поле «Отступы в ячейках» установите в пикселях отступ содержимого ячейки от границы, внутри ячейки (значение атрибута cellpadding тега table).

В поле «Расстояние между ячейками» установите в пикселях ширину промежутков между соседними ячейками (значение атрибута cellspacing тега table).

Выпадающий список «Выравнивание» определяет горизонтальное выравнивание таблицы на странице (значение атрибута align). Доступны следующие варианты: по центру, по левому краю, по правому краю.

Толщину линий границ таблицы (значение атрибута border) в пикселях можно задать в поле «Граница».

Если требуется задать фиксированные размеры таблицы в пикселях, можно указать их в полях «Ширина» и «Высота» (значение атрибутов width и height соответственно).

В выпадающем списке «Класс» можно выбрать одно из имеющихся (если таковы заданы для шаблона сайта) наименование класса из таблицы CSS-стилей (значение атрибута class).

Если включен флажок «Заголовок» будет зарезервировано место под ввод заголовка (тег caption), над таблицей.

После задания основных параметров таблицы на вкладке «Общие», можно задать некоторые дополнительные параметры таблицы на вкладке «Дополнительно» (рисунок 3.14).

 

Рисунок 3.14 – Окно добавления/изменения таблицы вкладка «Дополнительно»
 

В группе «Дополнительно» доступны следующие параметры.

В поле «Имя» можно установить атрибут «id» тега «table». Это поле не имеет отношение к содержимому таблицы. В нем латинскими буквами без пробелов и специальных символов можно задать идентификатор таблицы для использования ее скриптами.

В поле «Общее» можно ввести текстовое описание содержимого таблицы (атрибут «summary» тега «table»). Это описание не отображается на странице, но может быть обработано поисковыми системами или пользовательскими агентами  для людей с ограниченными возможностями (например, голосовым синтезатором или устройством вывода текстов по Брайлю).

Если Вы знакомы с языком разметки CSS , можете задать дополнительные стили таблицы в поле «Стиль» (значение атрибута style).

В поле «Код языка»  можно указать язык таблицы (значение атрибута lang). В качестве языка могут выступать, например, следующие значения:
ru — русский; en — английский; de — немецкий; fr — французский;
it — итальянский и др.

В поле «Фоновое изображение» можно установить URL-адрес к файлу с изображением, которое будет фона для всей таблицы. URL-адрес должен начинаться с «http://», за исключением, случаев, когда изображение выбирается из имеющихся на сервере. Если изображение находится на сервере, можно воспользоваться менеджером файлов. Открытие менеджера файлов осуществляется по нажатию на кнопку  (менеджер файлов).

Выпадающий список «Кадр» определяет, как отображать границы вокруг таблицы. Можно выбрать одно из значений, указанных в таблице 3.4.1. Толщина границы (атрибут border) и ее цвет (атрибут bordercolor) указывается в полях «Граница»  и в поле «Цвет границы».

Таблица 3.4.1 – Элементы выпадающего списка «Кадр»

Параметр

Значение

Не установлено

Граница будет отрисована вокруг таблицы.

void

Граница не будет отрисована

border

Граница вокруг таблицы.

above

Граница по верхнему краю таблицы.

below

Граница снизу таблицы.

hsides

Добавить только горизонтальные границы (сверху и снизу таблицы).

vsides

Рисовать только вертикальные границы (слева и справа от таблицы).

rhs

Граница только на правой стороне таблицы.

lhs

Граница только на левой стороне таблицы.

 

Выпадающий список «Правила» определяет, какие границы между ячейками отображать в таблице. Можно выбрать одно из значений, указанных в таблице 3.4.2. Толщина границы (атрибут border) и ее цвет (атрибут bordercolor) указывается в полях «Граница»  и в поле «Цвет границы». По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку (значение all) или не рисуется совсем (значение none) если толщина границы в поле «Граница» установлена в «0».
 

Таблица 3.4.2 – Элементы выпадающего списка «Правила»

,

, , или .

Параметр

Значение

Не установлено

Граница будет отрисована вокруг каждой ячейки таблицы.

all

Линия рисуется вокруг каждой ячейки таблицы.

groups

Линия отображается между группами, которые образуются тегами

cols

Линия отображается между колонками.

none

Все границы скрываются.

rows

Граница рисуется между строками таблицы, созданных через тег

 

Значение выпадающего списка «Направление текста» определяет направление письма в языке таблицы. Возможны варианты: «Не установлено» (текст будет отображен слева направо), «Слева направо» и «Справа налево» (для восточных языков).

В поле «Цвет границы» можно установит цвет линии, которой будут отрисованы границы ячеек и таблицы.

В поле «Цвет заливки» можно установит цвет фона всей таблицы (включая промежутки между ячейками). Если задано фоновое изображение, оно перекроет цвет фона.

Цвет задаётся в шестнадцатеричном формате, например: «#FF0000» - красный, «#008000» - зеленый. Для задания цвета можно воспользоваться диалогом выбора цвета, вызвать который можно нажатием кнопки  (диалог цвета), находящейся правее поля «Цвет …».

Для добавления таблицы нажмите кнопку «Вставить». Если Вы редактировали таблицу и хотите сохранить изменения, нажмите кнопку «Обновить». Для закрытия окна без применения или сохранения изменений нажмите кнопку «Отмена».