Дана робота буде дещо відрізнятись від попередніх. Насамперед тим, що за основу необхідно буде взяти файл, з яким ви працювали у попередньому практикумі. Якщо у вас немає цієї роботи, ви можете завантажити архів з готовою роботою і далі працювати за цією інструкцією. Щоб згадати основні теги, які потрібні для розмітки таблиці, ви можете звернутись до відповідної теми посібника Основи HTML. Також, для виконання роботи вам будуть потрібні файли
з архіву.
ЗАУВАЖЕННЯ: Тут і далі ми не вказуємо, що необхідно розпакувати завантажений архів. Вважаємо, що достатньо нагадувань у попередніх роботах. А зараз, сподіваємось, для вас зрозуміло, що цю дію необхідно виконати за умовчанням.
Ще одна відмінність − ця робота не містить теоретичних відомостей. Автору не вдалось структурувати у таблицю інформацію з даного предмету так, щоб таблиця містила об'єднані клітинки. Тому на сторінці, яку ви створите, крім майбутньої панелі навігації будуть лише назви страв української та французької кухні, зібрані у таблицю (рис.1).
Рис. 1. Звісно, без застосування атрибутів табличних тегів або відповідних стилів таблиця не буде виглядати так, як на цьому рисунку. З оформленням таблиць за допомогою стилів ви познайомитесь у відповідному практикумі.
Відкрийте файл lists.html редакторі коду та збережіть його копію з назвою table.html. Ви можете створити копію файлу і в інший спосіб. Ми вказали лише один з можливих варіантів, при якому файл вже буде відкритим для роботи в редакторі коду.
Необхідно прибрати весь «зайвий» код, який не стосується наступної роботи, і залишити тільки ті елементи, які мають відношення до панелі навігації.
Усередині контейнера <head> </head> знайдіть коментар /*задамо ширину тіла сторінки і розташуємо її по центру екрана*/. Виділіть частину коду, починаючи з цього коментаря і завершуючи рядком перед закриваючим тегом </style>. Видаліть виділений фрагмент. Ви видалили всі стилі, які не стосуються майбутньої панелі навігації.
Всередині коду для вмісту сторінки знайдіть закриваючий тег </nav>, виділіть та видаліть увесь код після нього до закриваючого тега </body>. Тим самим ми очистили місце для майбутньої таблиці, яка буде розміщена після навігаційної панелі.
Необхідно, також, змінити назву сторінки. Всередині елемента title назву Списки замініть на Створення таблиць.
Підготовча робота завершена. Якщо ви не впевнені, що все зробили правильно, можете порівняти свій код з тим, який є на прихованому рисунку. Відмінність повинна бути лише у коментарях − у нашому коді вони відсутні.
Відкрийте в редакторі коду завантажений файл template.html. Скопіюйте вміст контейнера <body> </body>. Поверніться до файлу table.html, встановіть курсор після закриваючого тега </nav> і вставте скопійований фрагмент. Відкрийте файл у браузері (рис.2).
Рис. 2. До застосування тегів розмітки таблиці контент сторінки не структурований
Встановіть курсор після закриваючого тега </nav> і натисніть клавішу Enter. Уведіть тег <table>. Закриваючий тег </table> розташуйте вкінці, у рядку перед закриваючим тегом </body>.
ЗАУВАЖЕННЯ: Якщо ви розпочали писати <ta (або будь-який інший тег), то в Sublime Text спливає список-підказка тегів. Можна обрати тег зі списку, або натиснути клавішу Enter, якщо тег один. Редактор завершить введення тега за вас. І, якщо тег парний, відразу буде прописано закриваючий тег. У такому випадку виріжте закриваючий тег і вставте його після контенту, який необхідно огорнути даним тегом.
Текст
Меню ресторана <big>«Квіточка»</big> огорніть тегом заголовка таблиці (див. посібник Основи HTML).
Розмітьте рядки таблиці. Кожен рядок таблиці відокремлений двома порожнями рядками. Пам'ятайте, що це можна зробити одночасно для усіх рядків (рис. 3).
Рис. 3. На цьому етапі зміни практично не помітні. За відсутності тегів клітинок, таблиця не має явної структури.
Кожен рядок тексту огорніть у теги клітинок. Для клітинок першого рядка та другого рядка таблиці використайте тег клітинок заголовка таблиці. Перегляньте результат у браузері (рис. 4).
Рис. 4. Щоб розташування клітинок стало правильним, як на рис.1, необхідно скористатися атрибутами rowspan та colspan
Погляньте на рисунок 1. Клітинка з написом Кухня повинна займати два рядки, а напис Холодні страви − два стовпчики. Тому, до тегів, які їх огортають, необхідно додати атрибути rowspan та colspan зі значенням 2:
Де ще додати ці атрибути і з якими значеннями визначіться самостійно, орієнтуючись на рисунок 1. Періодично переглядайте результати у браузері. Коли внесете всі потрібні атрибути об'єднання клітинок сторінка буде виглядати як на рисунку 5.
Рис. 5. Щоб об'єднання клітинок було більш очевидним, необхідно додати границі клітинок
Границі клітинок, відступи вмісту клітинок від границь, вирівнювання тексту та інші властивості можна задавати за допомогою атрибутів. Але такий підхід застарів. CSS-властивості − це більш потужний і гнучкий інструмент, з яким ви познайомитесь у практикумах по CSS. Зараз пропонуємо вам скористатись готовими стилями.
Відкрийте файл template-style.css у редакторі коду. Скопіюйте його вміст. У верхній частині документа table.html знайдіть тег <style> і вставте скопійований код відразу за ним. Тепер, якщо ви не припустилися помилок у розмітці, ваша сторінка повинна виглядати як на рисунку 1. У разі відмінностей, завантажте і проаналізуйте остаточний результат нашої роботи.
У стилях приберіть усі правила, які не стосуються контейнера nav. У коді вмісту вебсторінки приберіть увесь код після тега </nav> до кінця сторінки.
Відкрийте завантажений файл template.html. Скопіюйте вміст контейнера <body> </body> і вставте його після закриваючого тега </nav>. Сторінка виглядає як на рисунку 2.
Рис. 2. До застосування тегів розмітки таблиці контент сторінки не структурований
Орієнтуючись на рисунок 1, використовуючи теги <table>, <caption>, <tr>,<th>, <td> та атрибути rowspan, colspan, де це потрібно. Поетапно результати роботи відображено на рисунках 3, 4, 5.
Рис. 3. Розмітивши заголовки і рядки, особливих змін не помітиш
Рис. 4. Таблиця розмічена усіма тегами, але атрибути rowspan та colspan ще не застосовані
Рис. 5. Остаточний вигляд розміченої таблиці до застосування стилів
Границі клітинок, відступи вмісту клітинок від границь, вирівнювання тексту та інші властивості можна задавати за допомогою атрибутів. Але такий підхід застарів. CSS-властивості − це більш потужний і гнучкий інструмент, з яким ви познайомитесь у практикумах по CSS. Зараз пропонуємо вам скористатись готовими стилями.
Відкрийте файл template-style.css і скопіюйте його вміст. Вставте скопійований код всередину контейнера <style> </style> документа table.html. Тепер, якщо ви не припустилися помилок у розмітці, ваша сторінка повинна виглядати як на рисунку 1. У разі відмінностей, завантажте і проаналізуйте остаточний результат нашої роботи.
ЗАУВАЖЕННЯ: Ми розглянули один зі способів створення таблиці, коли у наявності контент, який необхідно розмітити тегами. Створюючи таблицю на вебсторінці можна піти іншим шляхом. Спочатку створити структуру таблиці за допомогою формули скороченого коду для плагіна Emmet, а потім заповнити теги клітинок контентом. Наприклад, якщо ви введете table>(tr>th*3{Cell $})+(tr*2>td*3{Cell $}) і натиснете клавішу Tab, то отримаєте наступний код:
<table> <tr> <th>Cell 1</th> <th>Cell 2</th> <th>Cell 3</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table>
Якщо не вводити фігурні дужки з їх вмістом, то клітинки будуть порожні. Ви зможете самі прописати їх вміст.
Додаткове завдання
Аналогічно наведеному вище прикладу, використовуючи формулу скороченого коду та відповідних атрибутів, додайте нижче таблиці меню ще одну за зразком на рисунку 6.
Рис. 6. Таку таблицю можна досить швидко створити, використовуючи формулу скороченого коду
