Вставить таблицу

Шаг 1

Чтобы вставить таблицу в текст редактора, разместите курсор в нужном месте текста, а затем нажмите на кнопку вставки таблицы.

php7WZK4A

Шаг 2. Общее

Откроется окно вставки таблицы. На вкладке "Общее" Вам будут доступны следующие параметры:

  • Столбцы - укажите количество столбцов в таблице;
  • Строки - укажите количество строк в таблице;
  • Отступы в ячейках - задайте в пикселах отступ содержимого от границы (расстояние от границ ячейки до текста внутри ячейки);
  • Расстояние между ячейками - задайте в пикселах ширину промежутков между соседними ячейками (отступ от одной ячейки до другой);
  • Выравнивание - Вы можете выровнять таблицу: по левой стороне, по центру, по правой стороне;
  • Границы - тут можно задать толщину внешней границы таблицы в пикселах;
  • Ширина и Высота - по умолчанию меняются в зависимости от размеров их содержимого, но Вы можете указать высоту и ширину таблицы в пикселах или в процентах относительно свободного пространства;
  • Класс - наименование класса из таблицы CSS стилей (из имеющихся);
  • Заголовок таблицы - Вы можете включить заголовок над таблицей. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.

php854981

Шаг 3. Дополнительно

На вкладке "Дополнительно" Вы сможете задать следующие параметры:

  • Имя - тут Вы можете задать наименование или идентификатор таблицы. Идентично атрибуту "id"и, фактически, не несет особой смысловой нагрузки. В данном поле можно указать название таблицы;
  • Общее - тут Вы можете ввести краткое описание таблицы;
  • Стиль - Вы можете вручную прописать стиль для таблицы - необходимы навыки по редактированию CSS (автоматически сюда подставляются значения из настроек таблицы с вкладки "Общее");
  • Код языка - при необходимости укажите код используемого в таблице языка;
  • Фоновое изображение - тут Вы можете указать адрес картинки (из раздела "Иллюстрации"), которую Вы бы хотели использовать в качестве фонового изображения для таблицы;
  • Кадр - тут можно задать, какие стороны кадра, окружающего таблицу, будут видимы:
    • void: Сторон нет;
    • above: Только верхняя часть;
    • below: Только нижняя часть;
    • hsides: Только верхняя и нижняя часть;
    • vsides: Только левая и правая части;
    • lhs: Только левая часть;
    • rhs: Только права часть;
    • box: Все четыре части;
    • border: Все четыре части;
  • Правила - можно задать, где отображать границы между ячейками:
    • все - линия рисуется вокруг каждой ячейки таблицы;
    • группы - линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>;
    • колонки - линия отображается между колонками;
    • нет - все границы скрываются;
    • ряды - граница рисуется между строками таблицы, созданных через тег <tr>;
  • Направление текста - направление письма в языке таблицы: слева-направо или справа-налево (для восточных языков);
  • Цвет границы - укажите код или выберите из палитры тот цвет, который Вы хотите использовать для рамок таблицы;
  • Цвет заливки - укажите код или выберите из палитры тот цвет, который Вы хотите использовать в качестве фона для таблицы (если ранее Вы задали фоновое изображения - использоваться будет именно изображение).

phpdym9tX

Шаг 4

После внесения всех изменений нажмите "Вставить".

phpdbXJK1

Полезная информация!

  • Чтобы создать невидимую таблицу (таблицу, рамок которой на сайте не будет видно) просто на вкладке "Общее" в списке "Класс" выберите пункт "Таблица без рамки".
  • При работе с цветом границы или цветом заливки в окне редактирования цвета Вам будут доступны три вкладки:
    • В разделе "Спектр" в общей палитре цветов при наведении курсора Вы сможете выбрать необходимый оттенок, далее в шкале, выводимой справа, более точно подобрать нужный цвет. Код выбранного цвета отображается внизу окна. Там же можно самостоятельно ввести необходимый код цвета шестнадцатеричным значением цвета RGB, например: #ff0000 (красный). 
    • В разделе "Палитра" есть возможность подобрать цвет из предложенных вариантов, нажав левой кнопкой мыши на квадратик с выбранным изображением, код выбранного цвета отобразится внизу окна. В данном разделе тоже можно самостоятельно ввести необходимый код цвета шестнадцатеричным значением цвета RGB.
    • В разделе "Названия" как и в предыдущем есть возможность подобрать цвет из предложенных вариантов, нажав левой кнопкой мыши на квадратик с выбранным изображением. Код и название выбранного цвета отобразится внизу окна. Тут тоже можно ввести самостоятельно необходимый код цвета шестнадцатеричным значением цвета RGB.
    • После выбора цвета не забудьте нажать кнопку "Применить".

phpcOrDXf

Была ли статья вам полезна?
Укажите, пожалуйста, почему?
Комментарий