Содержание
- Создать таблицу в HTML
- Шаг 1
- Шаг 2
- Шаг 3
- Шаг 4
- Шаг 5
- Настроить календарь
- Шаг 1
- Шаг 2
- thead calendar {
- Шаг 3
- й календарь
- td calendar {
- Шаг 4
- td span calendar {
Несмотря на то, что таблицы вышли из моды, когда дело доходит до создания макетов веб-страниц, они по-прежнему хорошо работают для кодирования календарей HTML. Календари отображают табличные данные определенным образом, если они организованы в виде сетки дат со столбцами, названными, например, днями недели. Дополнительный код CSS сделает утомительную сетку с именами и числами больше похожей на календарь. Поскольку для событий в календаре требуется место как для количества дат, так и для событий, также необходимо будет использовать CSS для форматирования дат таким образом, чтобы обе части информации были удобочитаемыми.
Создать таблицу в HTML
Шаг 1
Создайте таблицу для структурирования календаря. Для этой таблицы требуется заголовок с семью ячейками, по одной на каждый день недели. Также необходимо создать шесть рядов обычных ячеек таблицы. Скопируйте и вставьте отрывок на веб-страницу с помощью Блокнота или редактора кода.
| Воскресенье | понедельник | вторник | Среда | Четверг | Пятница | суббота |
|---|
Этот код создаст таблицу и заголовок. В таблице используется идентификационное имя, называемое «календарь», если на веб-сайте используются таблицы на других страницах.
Шаг 2
Добавьте пару тегов body под тегом "":
Шаг 3
Скопируйте следующий код и вставьте его между "
" шесть раз:Этот код создаст каждую строку с семью ячейками, так что, добавив шесть из них, в календаре будут все пространства данных, которые вам нужны для всех месяцев года.
Шаг 4
Добавьте даты в календарь в соответствии с месяцем, который вы хотите показать. Сверьтесь с реальным календарем и будьте осторожны, чтобы не пропустить и не повторить дату. Заключите каждую дату в теги "", чтобы вы могли настроить числа позже:
Шаг 5
Обратите внимание на события в ячейках, которые содержат соответствующие даты. События должны находиться вне тегов "", но внутри "
’:
Halloween Party!
Последний день регистрации.
Настроить календарь
Шаг 1
Найдите "
Контур не является обязательным, но это наиболее подходящий способ добавления границ к таблицам на текущих веб-страницах.
Шаг 2
Настройте заголовок таблицы, задав цвет букв и другой цвет фона:
thead calendar {
цвет: #ffffff; цвет фона: темно-синий; font-weight: жирный; }
Возможно использование шестнадцатеричного кода или названия цветов. В этом заголовке будет отображаться белый текст на темно-синем фоне.
Шаг 3
Заливка, границы, ширина и положение относительно ячеек таблицы:
й календарь
td calendar {
отступ: 20 пикселей; граница: сплошной черный 1px; ширина: 100 пикселей; положение: относительное; }
Относительное размещение позволяет программисту размещать даты в виде чисел в углах ячеек таблицы позже. Не устанавливайте высоту, так как это ограничит количество текста, которое вы можете добавить к любой дате.
Шаг 4
Создайте числа, используя заливку, цвет фона и абсолютное позиционирование:
td span calendar {
font-weight: жирный; позиция: абсолютная; внизу: 0; справа: 0; дисплей: блок; отступ: 5 пикселей; цвет фона: #eeeeee; }
Вы должны включить "display: block", чтобы теги "" действовали как поля на веб-странице, иначе вы не сможете их заполнить. Этот пример кода создает бледное серое поле в нижнем левом углу каждого поля даты, отображающее номер даты.