Таблицы

Автор admin | 11 октября 2010, 2:26

Таблицы являются очень важным элементом в построении Web-страницы. Поскольку, как правило, различные блоки страницы – это элементы таблицы. Это называется табличная верстка. При работе с таблицами необходимо учитывать, что

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

Добавление таблицы

Задание 1. Добавьте таблицу 2х3.

Для добавления таблицы нажмите на кнопку

в панели инструментов Nvu или выберите пункт меню Вставка => Таблица… или Таблица => Вставить => Таблица… После чего откроется окно диалога Вставка таблицы на вкладке Простая (рис. 18).

Рис.18. Окно диалога Вставка таблицы вкладка Простая

Можно перейти на вкладку Точная и задать там количество строк и столбцов (рис. 19).

Рис. 19. Окно диалога Вставка таблицы вкладка Точная

Установите размер таблиц 2х3 и щелкните по кнопке ОК или в любом месте внутри таблицы Соответственно основные параметры таблицы установятся по умолчанию, например, ширина таблицы равна 100 пикселов, значения параметров cellspasing и cellpadding равны 2 пикселам, а border — 1 пикселу. Также добавляется необязательный тег <TBODY> .

Полученной таблице

соответствует следующий код:

<table style=”text-align: left; width: 100px;” border=”1″

cellpadding=”2″ cellspacing=”2″>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

Контейнер <TBODY> предназначен для хранения одной или нескольких строк таблицы. Этот тег требуется для разбиения таблицы на структурные области, к которым можно применять свое собственное оформление или другие параметры. Обычно необходимости в этом теге нет, поэтому его можно не указывать.

Задание 2. Заполните первую строку: введите в первую ячейку слово Фрукты, и третью ячейку словосочетание Когда покупать.

Редактор Nvu изменит ширину автоматически (рис.20)

Рис. 20.

Изменение размеров таблицы и ячеек

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

Рис. 21.

В процессе растягивания новый размер таблицы отображается пунктирной линией. дополнительно появляется информационное окно, в котором выводятся ширина и высота таблицы, а в скобках — изменения относительно текущего размера (рис. 22).

Рис. 22.

Изменить ширину или высоту отдельных строк или колонок таблицы можно с помощью линеек, как показано на рис. 23. Наводите курсор мыши на разделительную полосу и перемещаете в нужную сторону. Текущая ширина или высота отображается там же в момент перемещения.

Рис. 23.

Обычно линейки в Nvu всегда включены, но вы можете сами их выключать или включать при необходимости через меню Вид => Показать/скрыть => Линейки.

Задание 3. Измените ширину второго столбца .

Для этого вначале придется увеличить ширину таблицы, а потом растянуть второй столбец.

Объединение ячеек

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

Рис. 24.

Теперь надо дать команду Объединить выбранные ячейки из меню Таблица или из контекстного меню выделенных ячеек и таблица приобретает вид, как показано на рис. 25.

Рис. 25.

Задание 3. Объедините первую и вторую ячейки.

Задание 4. Заполните вторую строку по образцу

Добавление и удаление ячеек

Новые ячейки можно добавлять двумя основными способами. Первый способ заключается в использовании пункта меню Таблица => Вставить. В открывшемся подменю (рис. 26) можно выбрать способ добавления строки и столбца относительно ячейки, в которой находится курсор.

Рис. 26.

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

Рис. 27.

где 1 – добавляет колонку слева, 2 – удаляет колонку, 3 – добавляет колонку справа, 4 – добавляет строку сверху, 2 – удаляет строку, 3 – добавляет строку снизу.

Добавить строку после последней можно следующим образом: установить курсор в конце текста последней ячейки таблицы и нажать клавишу Tab.

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

Кроме способа удаления строк и столбцов таблицы, показанного на рис. 27, можно воспользоваться пунктом меню Таблица => Удалить (рис. 28), где из подменю выбрать, что вы желаете удалить.