Практически ни одна web-страница не обходится без использования таблиц. Почему? Потому что диапазон их применения очень широк. Вот перечень задач, которые могут успешно решаться с помощью таблиц:
представление табулированных данных,
форматирование текстового содержимого страницы (вывод его в несколько колонок),
группирование взаимосвязанных элементов страниц,
выравнивание различных фрагментов страницы относительно друг друга.
1. Запустите редактор HTML-страниц: выберите Пуск | Программы | HomeSite4.5 | Homesite4.5, выберите File | New, выберите вкладку HTML, выберите шаблон DefaultTemplate.
2. Введите заголовок страницы: после тэга <TITLE> введите свой текст, например, Прайс-лист компании ООО Холод
Для создания и редактирования атрибутов таблицы можно использовать:
мастер для создания таблиц - Table Wizard
инструмент быстрой разметки таблицы - Table Sizer
диалоговые окна редактора тэгов
кнопки быстрой вставки табличных тэгов
3. Доступ к этим инструментам выполняется с помощью вкладки Tables панели быстрой вставки. Проверьте включена ли эта панель: выберите View, если флажок стоит напротив Quick Bar , то включена, если нет флажка - тогда включите - выбрав Quick Bar .
4. Создайте таблицу с помощью мастера: выберите мышью место расположения кода таблицы после тега <body> , на панели быстрой вставки Quick Bar выберите вкладку Tables, нажмите кнопку Table Wizard , на экране первое окно мастера - Table Design .
В исходном состоянии таблица содержит две строки и два столбца, то есть четыре ячейки равного размера. Можно изменять количество строк и столбцов, изменять размер ячеек, объединять ячейки:
чтобы добавить или удалить строку, необходимо щелкнуть по соответствующей кнопке Rows со знаком + либо со знаком -
чтобы добавить или удалить столбец, необходимо щелкнуть по соответствующей кнопке Columns со знаком + либо со знаком -
чтобы изменить размер ячейки, следует установить указатель на ее границе, нажать левую кнопку мыши и переместить границу в нужном направлении.
чтобы объединить две ячейки одной строки надо: (1) выбрать мышью внутри левой ячейки, (2) выбрать кнопку Column Span +
чтобы объединить две ячейки одного столбца надо: (1) выбрать мышью внутри левой ячейки, (2) выбрать кнопку Row Span +
5. С помощью кнопки Rows + сделайте количество строк в таблице равным 5.
6. С помощью кнопки Columns + сделайте количество столбцов в таблице 4.
7. С помощью ColumnSpan + объедините ячейки 1-ой строки
Итак, кто знает HTML, то понимает, что
кнопки Rows изменяют количество тэгов <TR> вложенных в тэг <TABLE>
кнопки Columns изменяют количество тэгов <TD> вложенных в тэг <TABLE>
кнопки Column Span изменяют значение атрибута COLSPAN тэгов <TD>
кнопки Row Span изменяют значение атрибута ROWSPAN тэгов <TD>
8. Продолжите установку атрибутов таблице: выберите Next, на экране второе окно мастера - Table Properties (параметры таблицы).
Это окно содержит элементы управления, которые позволяют установить следующие атрибуты тэга <TABLE>:
ALIGN - выравнивание таблицы относительно левого или правого края страницы,
CELLSPASING - задает расстояние в пикселях между ячейками,
CELLPADING - расстояние между рамкой ячеек и их содержимым,
WIDHT - определяет ширину таблицы или в пикселях или как долю в процентах от размера окна браузера, отображаемого на экране монитора, чтобы указать значение в процентах, требуется ввести после числа символ %,
BGCOLOR - устанавливает цвет фона для всех ячеек таблицы,
BORDER - управляет внешним видом рамки, отображаемой вокруг таблицы, если значение атрибута не задано, то рамка не отображается. Если значение больше 0, то доступны список Frames обеспечивающий расположение внешней рамки, и список Rules определяющий наличие рамок между строками и столбцами внутри таблицы.
9. Установите параметры таблицы: в списке Alignment выберите Center, в списке Cell Spacing выберите расстояние между ячейками и содержимым равное 4, в списке Cell Padding выберите расстояние между рамкой ячеек и содержимым равное 3, флажком выберите Specify Widht, в поле введите ширину таблицы 70% выберите Use Color , выберите цвет фона какой понравится, в списке Size выберите толщину рамки 4, в списке Frame выберите расположение внешней рамки All four sides , в списке Rules выберите рамку между строками и столбцами внутри таблицы between all rows and columns .
10. Продолжите установку атрибутов таблице: выберите Next, на экране третье окно мастера - Cell Properties (параметры ячейки).
Чтобы элементы окна стали доступны, необходимо выделить какую либо ячейку таблицы. Именно к этой ячейки и будут относится те значения, которые вы установите.
11. Установите параметры первой строки таблицы, представляющей собой одну ячейку: выберите мышью первую строку, в поле Content введите заголовок своей таблицы, например, OOO Холод предлагает пельменные аппараты, выберите флажком Header, который является признаком, что содержимое данной ячейки должно отображаться как заголовок (тэг <TH>), в списке Horisontal выберите способ горизонтального выравнивания содержимого ячейки, например, center, в списке Vertical выберите способ вертикального выравнивания содержимого ячейки, например, middle.
12. Установите параметры второй строки таблицы, представляющей собой названия столбцов таблицы: выберите мышью первую ячейку, в поле Content введите Артикул, выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle, выберите мышью вторую ячейку, в поле Content введите Название, выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle, выберите мышью третью ячейку, в поле Content введите Цена, выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle, выберите мышью четвертую ячейку, в поле Content введите Buy Now , выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle.
13. Остальное ручками. Нажмите Finish. Перед вами HTML-код сгенерированный мастером.
14. Итак, наши данные: 101 это артикул товара, Пельменный аппарат НПА-1М - название, 3500 - цена. Введите в HTML-код данные о своих товарах, например,
<tr>
<td>101</td>
<td>Пельменный аппарат НПА-1М</td>
<td>3500</td>
<td></td>
</tr>
15. Сохраните страницу: выберите File | Save as, в поле File name введите pricelist, в списке File of type выберите HTMLdocuments (*.htm), в поле Look in выберите свою личную папку, нажмите Save.
16. Просмотрите страницу в редакторе: в окне Homesite выберите вкладку Browse, на экране должна быть ваша таблица, выберите вкладку Edit.
17. Введите остальные данные о товарах в HTML-код - см. 14.
18. В редакторе можно редактировать и без глубокого знания языка HTML: выберите мышью после тега <body, нажмите МП, выберите Edit Tag, выберите HTML 4.0, в списке Background Color выберите какой понравится цвет фона, нажмите ОК, выберите File | Save, нажмите вкладку Browse, фон страницы должен измениться, выберите вкладку Edit.