створення таблиці
Зробимо в новенькому файлі таблицю з однієї колонки, в осередках якої, як в меню, уявімо посилання на наявні й інші, ще не зроблені сторінки WEB сайту. Адже WEB сайт може містити 10-ки сторінок. Тому дуже важливо мати можливість швидко вибирати підходящу сторінку з меню. Це меню ми потім помістимо у лівого краю екрану так, щоб воно постійно залишалося в поле зору користувача.
Зробіть новий текстовий файл і вводимо головні теги, що створюють структуру документа. У заголовку документа вкажіть Меню. Колір фону і тексту документа самостійно оберіть такими, щоб посилання були добре відомі:
Будь-яка таблиця починається тегом
. Рядки таблиці утворюються парою тегів
|
, між якими розміщуються пари тегів
| . Будь-яка пара цих тегів утворює один стовпець. між відкриває
і закриває | тегами поміщається текст чи будь-яке інше вміст комірки.
Беручи до уваги сказане, код HTML, що описує нашу таблицю, що складається з 1-го стовпця і містить пункти меню з найменуваннями сторінок WEB сайту, зобов'язаний мати наступний вигляд:
Вставте порожній рядок між відкриває
і закриває тегами і, починаючи з неї, введіть позначений код.
Збережіть документ у папці WEB під ім'ям menu.html, після відкрийте у вікні браузера файл menu.html.
Зроблена нами таблиця розміщується у лівого краю екрана. Це положення можна поміняти, використавши в відкриваючому тезі
Пункти меню розміщені один під іншим, а краю таблиці і осередків не помітні. Це пов'язано з тим, що за замовчуванням рамка і елементи таблиці не відображаються. Щоб включити їх відображення, слід використовувати в тезі
атрибут border, вказавши в якості його значення товщину рамки в пікселях.
Додайте в тег
атрибут border-width: 1px, щоб показати рамку і елементи таблиці шириною 1 піксель:
Зараз таблиця відображається з рельєфними межами.
Розмір таблиці
Розмір таблиці зазвичай встановлюється браузером автоматично так, щоб відображалося все її вміст. Але ви зможете встановити фіксовану ширину таблиці в пікселах за допомогою атрибута width.
Встановіть для таблиці ширину 140 пікселів, додавши атрибут width в відкриває тег
так, щоб він прийняв вигляд:
У вікні браузера ширина таблиці зменшиться так, що в більшості осередків текст буде відображатися в двох рядках.
При використанні для формування стовпців таблиці тегів
| дані в осередках представляються шрифтом звичайного тексту і за замовчуванням вирівнюються по лівому краю осередків. Якщо ж потрібно виділити дані в осередках, наприклад, заголовки шпальт або рядків таблиці, то замість тегів | комфортно використовувати теги | . Текст в елементах | зазвичай виділяється напівжирним шрифтом і вирівнюється по центру осередків.
Наше меню буде виглядати краще, якщо його пункти будуть центровані в осередках і виділені напівжирним шрифтом. Тому замінимо в HTML коді елементи
| елементами | .
Відредагуйте файл menu.html, замінивши теги
і | відповідно тегами і | .
У тегах
і | ви зможете використовувати старі атрибути:
align - для горизонтального вирівнювання вмісту осередків по центру (center), лівому (left) і правого (right) краях комірки;
width - для вказівки ширини осередку в пікселах;
height - для визначення висоти комірки;
valign - для вертикального вирівнювання даних в осередку по верхньому (top) і нижнього (bottom) краях і середині (middle) осередки; за замовчуванням valign = "middle".
Перевірте, як працюють ці атрибути, після цього поверніть таблицю до свого попереднього стану.
Як розфарбовувати таблицю в різні кольори
Ви зможете також поміняти колір будь-який осередки, стовпці, рядки чи всієї таблиці, вставивши старий атрибут bgcolor відповідно в тег | , | або або через style = "background-color: # 666;".
Експериментуйте з квітами і підберіть відповідні, з вашої точки зору, для таблиці.
Приклад формування меню і посилання в таблиці
Відредагуйте в файлі menu.html рядки коду, що містять найменування пт меню Основна сторінка і Чим ми займаємося. вставивши вищевказані посилання відповідно на файли other.html і list.html так, щоб ці рядки взяли наступний вигляд:
| Основна сторінка |
|---|
| Чим ми займаємося? |
|---|
Зараз 1-і два пт меню виділені кольором і підкреслені як посилання. Перевіримо, як працюють ці посилання.
Клацніть мишею на першій посиланням - Основна сторінка. Залежно від версії браузера, файл other.html буде завантажений або в нове окреме, або в той же самий вікно браузера.
Якщо файл був завантажений в той же самий вікно браузера, то натисніть кнопку Вспять (Back) на панелі інструментів або просто закрийте вікно, якщо файл був завантажений в нове вікно. На дисплеї знову відобразиться файл menu.html.
Клацніть мишею на другий посиланням - Чим ми займаємося? У вікні браузера з'явиться файл list.html.
Отже, на базі таблиці ми зробили меню і переконалися, що посилання в ньому працюють.
Додаткова інформація по темі
Опис елементарних дії, які потрібно зробити і розуміти для виготовлення свого першого банера для web сторінок
У даній статті міститься опис створення і роботи з таблицями в програмі FrontPage