Упражнение 2. Создание и редактирование таблиц

Создадим новую web-страницу. Сохраним ее в файле под именем 1.3.html. Нажмем кнопку Таблица вкладки Общее панели Вставить (рис. 2.1).

Рисунок 2.1 - Вставка таблицы через использование панели вставки элементов HTML-страницы

При нажатии на кнопку появится диалоговое окно Таблица (рис.2.2)

Рисунок 2.2 – Диалоговое окно Таблица

В полях ввода Строки и Столбцы вводятся, соответственно количество строк и столбцов. Если мы ошибемся, то количество строк и столбцов можно добавить или удалить.

В поле ввода Ширина таблицы задается ширина таблицы в пикселях или процентах от ширины родительского элемента. Поле ввода Разбивка ячеек служит для задания отступа между границами отдельных ячеек. По умолчанию равен 2 пикселям.

В поле ввода Размер границы задается толщина рамки таблицы и ее ячеек в пикселях. По умолчанию толщина рамки таблицы равна 1; если нужно убрать рамку, в поле ввода введем 0.

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

Набор переключателей Верхний колонтитул позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели Нет (нет ни "шапки", ни выделенного первого столбца), Лево (выделенный первый столбец), Вверх ("шапка") и Оба (выделены "шапка" и левый столбец).

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

В области редактирования Итого вводится примечание таблицы. Оно не выводится web-обозревателем на экран.

И так зададим таблице значения, представленные на рисунке и нажмем ОК (рис.2.3).

Рисунок 2.3 – Каркас таблицы

Вставим в ячейки таблицы какой-нибудь текст. В ячейку можно вставить другую таблицу. Добавлять строки в таблицу приходится очень часто. Ставим в самую правую ячейку последней строки таблицы текстовой курсор, нажимаем клавишу <Tab>- и в таблице появилась новая пустая строка. Если новую строку нужно вставить в середину таблицы, делаем следующее. Помещаем текстовой курсор в ячейку строки, над которой нужно вставить новую, и выбираем пункт Вставить выше строку подменю Объекты таблицы меню Вставить (рис. 2.4).

Рисунок 2.4 – Редактирование таблицы вставкой одного элемента

Точно также можно вставить в таблицу новый столбец. Выбираем пункт Вставить столбец влево в подменю Объекты таблицы меню Вставить. И т.д. по пунктам.

Если нужно будет вставить в таблицу сразу несколько строк и столбцов, удобней будет воспользоваться пунктом Вставить строки и столбцы подменю Таблица меню Изменить. После его выбора на экране появится диалоговое окно.

Рисунок 2.4 – Редактирование таблицы вставкой одного элемента

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

Рисунок 2.5 – Редактирование таблицы вставкой более одного элемента

Строки и столбцы будут вставлены после нажатия кнопки ОК.

Кроме того, мы можем разделить текущую строку или столбец на несколько. Для этого ставим текстовой курсор в нужную ячейку строки(столбца) и нажимаем кнопку Разделить ячейки в строки или столбцы (рис.2.6).

Рисунок 2.6 – Редактирование таблицы разделением ячеек

На экране появится диалоговое окно Разделить ячейку (рис. 2.7).

Рисунок 2.7 – Диалоговое окно редактирования таблицы разделением ячеек

Группа переключателей Разделить задает, как будет делиться строка (столбец) (рис.2.8).

Рисунок 2.8 – Диалоговое окно выбора типа разделения ячеек

После нажатия кнопки ОК текущая строка (столбец) будут разделены.

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

Если потребуется удалить строку, столбец или таблицу, выделяем нужный объект и нажимаем клавишу <Del> или выбрать пункт Удалить строку(Удалить столбец) подменю Таблица меню Изменить.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: