Зміст
- Створіть таблицю в HTML
- Крок 1
- Крок 2
- Крок 3
- Крок 4
- Крок 5
- Налаштуйте календар
- Крок 1
- Крок 2
- thead календар {
- Крок 3
- й календар,
- td календар {
- Крок 4
- td span календар {
Незважаючи на те, що таблиці впали в немилість, коли мова заходить про створення макетів веб-сторінок, вони все ще добре працюють для кодування HTML-календарів. Календарі відображають табличні дані таким чином, як тільки вони впорядковані у сітку дат із стовпцями, названими, наприклад, днями тижня. Додатковий код CSS зробить нудну сітку з іменами та цифрами більше схожою на календар. Оскільки для подій у календарі потрібен простір як для кількості дат, так і для подій, також потрібно буде використовувати CSS для форматування дат таким чином, щоб забезпечити читання обох частин інформації.
Створіть таблицю в HTML
Крок 1
Створіть таблицю для структурування календаря. Для цієї таблиці потрібен заголовок із семи комірок, по одній на кожен день тижня. Також необхідно створити шість рядків звичайних комірок таблиці. Скопіюйте та вставте уривок на веб-сторінку за допомогою Блокнота або редактора коду.
| Неділя | Понеділок | Вівторок | Середа | Четвер | П’ятниця | Субота |
|---|
Цей код створить таблицю та заголовок. У таблиці використовується ідентифікаційна назва, яка називається "календар", якщо веб-сайт використовує таблиці на інших сторінках.
Крок 2
Додайте пару тегів тіла під тегом "":
Крок 3
Скопіюйте наступний код і вставте його між "
"шість разів:Цей код створить кожен рядок із семи комірок, так що, додавши шість з них, календар матиме всі простори даних, необхідні для всіх місяців року.
Крок 4
Додайте дати до календаря відповідно до місяця, який ви хочете показати. Перегляньте справжній календар і будьте обережні, щоб не пропустити або не повторити дату. Запишіть кожну дату тегами "", щоб ви могли налаштувати цифри пізніше:
Крок 5
Зверніть увагу на події в клітинках, які містять відповідні дати. Події повинні бути поза "" тегами, але всередині ""
’:
Вечірка на Хелловін!
Останній день для реєстрації.
Налаштуйте календар
Крок 1
Знайдіть "
Контур не є обов’язковим, але це найбільш підходящий спосіб додати межі до таблиць на поточних веб-сторінках.
Крок 2
Налаштуйте заголовок таблиці кольором для літер та іншим для фону:
thead календар {
колір: #ffffff; фон-колір: темно-синій; шрифт-шрифт: жирний; }
Можна використовувати шістнадцятковий код або назву кольорів. Цей заголовок відображатиме білий текст на темно-синьому фоні.
Крок 3
Заповнення, межі, ширина та положення щодо комірок таблиці:
й календар,
td календар {
заповнення: 20 пікселів; межа: 1px суцільно чорний; ширина: 100 пікселів; положення: відносне; }
Відносне розміщення дозволяє програмісту розміщувати дати у вигляді цифр у кутах комірок таблиці пізніше. Не встановлюйте висоту, оскільки це обмежить кількість тексту, який можна додати до будь-якої дати.
Крок 4
Створіть цифри, використовуючи заливку, колір фону та абсолютне розташування:
td span календар {
шрифт-шрифт: жирний; позиція: абсолютна; знизу: 0; праворуч: 0; дисплей: блок; заповнення: 5 пікселів; фон-колір: #eeeeee; }
Ви повинні включити "display: block", щоб теги "" діяли як поля на веб-сторінці, інакше ви не зможете їх заповнити. Цей зразок коду створює тьмяне сіре поле в лівому нижньому куті кожного простору дат, відображаючи номер дати.