Free login module joomla

Редактор JCE | Создание таблиц

JCE tableТаблица – является одним из основных инструментов для создания web-страниц.
Таблицы в  HTML применяются не только привычным для нас образом, как набор данных, распределенных по столбцам и строкам, но и являются инструментом форматирования страниц - их используют для создания каркаса страницы. Если коротко, то можно представить всю html-страницу в виде таблицы в каждой ячейке которой располагается тот или иной элемент (или элементы) страницы и, например, поместить вертикальное меню в её правый столбец, основной контент в средний столбец, а дополнительные материалы в левый столбец. При этом количество строк и столбцов на html-странице может быть любым.


Создания web-страниц с применением таблиц требует глубоких знаний HTML языка и занимает много времени. Этот процесс можно существенно упростить, применив широкий функционал панели инструментов редактора JCE. Для создания и настройки параметров таблиц в редакторе предусмотрен ряд кнопок.
создание и настройка параметров таблиц – создание и настройка параметров таблиц.
Image 40 – вставка новой таблицы.
При клике по кнопке открывается следующее окно:

таблица

Вкладка "Общие"

  • Столбцы (cols) – количество столбцов таблицы.
  • Строки (rows) – количество строк таблицы.

При создании таблицы в html количество ячеек в каждой строке будет одинаково. Поэтому, если вам нужно, чтобы в первой строке было, например, 4 ячейки, а во второй – 2, тогда сначала вам придется создать таблицу 2х2, а потом, в первой строке, в двух ячейка вставить таблицы 1х2 (1 строка, 2 столбца).

  •  Отступы в ячейках (Cellpadding) – расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице "налипает" на рамку, снижая тем самым его читабельность. Аналог атрибуту margin для блочного элемента (div).
  • Расстояние между ячейками (Cellspacing) - расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет. Аналог атрибуту padding  для блочного элемента (div).

Эти два атрибута контролируют пространство между и внутри ячеек. Следующая иллюстрация объясняет, как они связаны:

ceilpadding

  • Выравнивание (Alignment) –  определяет выравнивание содержимого таблицы (по левому краю, по центру, по правому краю).
  • Граница (Border) – этот атрибут определяет ширину в пикселях рамки вокруг таблицы.
  • Ширина (Width) – ширина таблицы.
  • Высота (Height) – высота таблицы.
  • Заголовок таблицы (Table caption)  – если галочка установлена, над таблицей будет создана дополнительная строка, состоящая из одной ячейки, в которой предполагается размещение заголовка таблицы.

Таблица, соответствующая исходным данным примера, имеет следующий вид:

таблица

 HTML-код, в котором элемент < table > служит контейнером для элементов, определяющих содержимое данной таблицы.

kod

Вкладка "Расширенные"

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

  • Список классов - список доступных CSS-классов шаблона.
  • Классы (Class) - разделенный пробелами список CSS-классов, которые должны применяться к элементу.
  • Id – индификационный код таблицы. Применяется в CSS.
  • Стиль (Style) – CSS-стиль таблицы, заданный прямо в ее коде.
  • Фоновое изображение (Background image) – изображение, которое будет использовано в качестве фона таблицы. Выбор изображенияосуществляется кнопкой Просмотр просмотр . Кнопка вызовет уже знакомый нам Менеджер изображений, в библиотеке которого необходимо выбрать изображение, которое будет установлено как фоновое для таблицы.
  • Фрейм (frame) - этот атрибут определяет какая сторона рамки, окружающая таблицу, будет видима.

 

      Возможные значения атрибута frame:

void: Отсутствует. Это значение по умолчанию.
above: Только на верхней стороне.
below: Только на нижней стороне.
hsides: Только сверху и внизу.
vsides: Только справа и слева.
lhs: Только с левой стороны.
rhs: Только с правой стороны.
box: Со всех четырех сторон.
border: Со всех четырех сторон.

 

  • Rules – этот атрибут определяет, какие линии появятся между ячейками внутри таблицы.       

Возможные значения:
none: Нет линий. Это значение по умолчанию.
groups: Линии появятся только между группой рядов (смотрите THEAD, TFOOT и TBODY) и группой колонок (смотрите COLGROUP и COL).
rows: Линии появятся только между рядами.
cols: Линии появятся только между колонками.
all: Линии появятся между всеми рядами и колонками.

        

  • Направление языка - направление языка в ячейке таблицы (справа налево или слева направо).
  • Цвет границы (Border color) – цвет рамки таблицы. При нажатии на кнопку "Обзор" открывается цветовая палитра.
  • Цвет фона (Background color) – цвет фона таблицы. При нажатии на кнопку "Обзор" открывается цветовая палитра.

Многие из этих опций можно применить не только к таблице в целом, но и к отдельным строкам, столбцам и ячейкам. Для этого, после создания таблицы, нужно выделить необходимые элементы и кликнув правой кнопкой мышки выбрать необходимые свойства. Код HTML-таблицы можно также подправить при просмотре html-кода (кнопка-редактор HTML-кода).

удаление всей таблицы - удаление всей таблицы.
свойства строк таблицы - свойства строк таблицы.
Выделив строку имеющейся таблицы и нажав на кнопку, вызываем модальное окно

свойства строк таблицы

Как и в предыдущем случае, окно содержит две вкладки: "Общие" и "Расширенные", которые позволяют настроить свойства строки в соответствии с вашими требованиями.

  • Строка в таблице – выбор в какой части таблицы расположена строка (в теле таблицы или в основании).
  • Выравнивание – выравнивание по горизонтали (по левому краю, по центру или по правому краю).
  • Вертикальное выравнивание - выравнивание по вертикали (по верхнему краю, по центру или по нижнему краю).
  • Высота – задается высота строки.

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

Вкладка "Расширенные"

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

К расширенным свойствам строки относятся: Список классов, Классы, Id строки, Стиль, Направление языка, Код языка, Фоновое изображение, Цвет границы, Цвет фона. Представленные параметры описаны при рассмотрении кнопки "Создание таблиц".

свойства ячейки таблицы - свойства ячейки таблицы.
Выделив ячейку имеющейся таблицы и нажав на кнопку "Свойства ячейки таблицы" мы вызовем окно с двумя вкладками.

Вкладка "Общие"
К общим параметрам относятся: горизонтальное и вертикальное выравнивание содержимого ячейки, задание ширины и высоты ячейки. Кроме того можно указать тип ячейки – данные или заголовок, а также указать область видимости (столбец, строка, группа строк или группа столбцов).

свойства ячейки таблицы


Вкладка "Расширенные"

свойства ячейки

Параметры вкладки аналогичны рассмотренным параметрам одноименной вкладки для строки.
Далее рассмотрим перечень инструментов, предназначенных для управления количеством элементов таблицы:
вставка дополнительной строки - вставка дополнительной строки выше/ниже выделенной строки и удаление указанной строки.
вставка столбца - вставка столбца до/после выделенного столбца и удаление столбца.
объединить выбранные ячейки - объединить выбранные ячейки таблицы и отменить объединение ячеек таблицы.

Теперь Вы видите, что работать с таблицами в редакторе JCE очень легко и удобно. На этом изучение инструментов редактора JCE не закончено, жду Вас на страницах моего сайта!

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Тэги: редактор JCE, таблицы HTML

Добавить комментарий


Защитный код
Обновить