Вставка таблицы

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

1. Создать структуру нового Веб-документа.

Таблица в языке HTML начинается тегом <table> и заканчивается тегом </table>. Любая таблица состоит из одной или нескольких строк. Каждая строка заключена между тегами <tr> и </tr>. Строка таблица также может включать несколько ячеек. Ячейка строки обрамляется парой тегов <td></td>, между которыми, например, можно по­метать фрагмент текста или код HTML, соответствующий рисунку. Количество строк в таблице определяется числом тегов <tr>. а количество столбцов – максимальным чис­лом тегов <td> в строке.

2. Вставить в документ таблицу с информацией о фирме АТЛАНТ.

3. Ниже тега </body > в документе ввести следующий HTML-код таблицы:

4. Созданный HTML-документ представлен на рис. 97.

Рис. 21.HTML-документ с таблицей

5. Запустите файл на просмотр (рис. 98).

Рис. 22. Веб-страница с таблицей

По умолчанию таблица отображается по левому краю окна. Для изменения горизон­тального положения таблицы нужно воспользоваться атрибутом align тега <table>. Значение данного атрибута center обеспечит центрирование таблицы, а значение right – выравнивание
по правому краю окна браузера.

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

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

6. Перейдите к редактору Блокнот. В документе с таблицей замените тег <table> на HTML-код для центрирования таблицы и настройки ее линий сетки:

7. Сохраните документ на диске. Перейдите к программе Microsoft Internet Explorer и перезагрузите файл таблица.html. На Веб-странице таблица будет выровнена по центру, и у нее появятся линии сетки (рис. 99).

По умолчанию при использовании пары тегов <td></td> текст
в ячейках выравнива­ется по левому краю и представляется обычным начертанием. Другая пара тегов <th></th> по умолчанию определяет полужирное начертание содержимого ячеек и центрирование данных.
В то же время обе пары тегов имеют атрибуты для форматиро­вания данных
в ячейках. Атрибут align предназначен для горизонтального выравнива­ния содержимого ячеек по центру, левому и правому краям ячейки. С помощью атрибута valign можно выровнять данные в ячейках по верхнему (top)
и нижнему (bottom) краям, а также по вертикальной середине (middle) ячейки. Атрибуты width и height определяют ширину и высоту ячейки
в пикселах

Рис. 23.Центрированная таблица с линиями сетки

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

8. Перейдите к редактору Блокнот. Во всем документе с таблицей замените пары тегов <td></td> на пары <th></th> (рис. 100).

Рис. 24.HTML-код отформатированной таблицы

9. Сохраните HTML-доку мент на диске. Перейдите к программе Microsoft Internet Explorer и перезагрузите файл таблица.html. На Веб-странице текст в ячейках примет полужирное начертание и выровняется
по центру (рис. 101).

Рис. 25.Отформатированная таблица на Веб-странице

На Веб-странницах таблицы часто используются в качестве меню, элементы которого являются ссылками. На основе элементов таблицыГлавнаястраница иУслугисоздадим ссылки на подготовленные ранее документыатлант.html исписок.html.

10. В документе замените элемент с тегом <tr> и текстом Главная страница на фрагмент HTML-кода.

Рис. 26.Окончательный вид HTML-документа с таблицей

11. Также замените элемент с тегом <tr> и текстом Услуги
на HTML-код:

12. Созданный HTML-документ изображен на рис. 103. На Веб-странице содержимое двух ячеек будет выделено цветом и подчеркиванием, что указывает на ссылки.

Рис. 27.Таблица со ссылками