«Создание сайтов»: 5 : УРОВЕНЬ 2 : ТАБЛИЦА как способ организации пространства

От Музея: 5-я лекция курса «Создание сайтов» / Уровень 2: Основы html и практика применения — от Ани Амасовой «для творцов, любителей и заказчиков» — инструмент для вашего самостоятельного творчества или пособие для лучшей коммуникации с программистами. В этой лекции рассматривается и принцип создания таблиц в целом, и использование создаваемой таблицы в качестве технической разметки страницы сайта: чтобы все элементы и тексты стояли на своих местах. Что возможно сделать и, главное, как именно это делается?

Текст: Аня Амасова
Илл. на обл.: то, к чему мы придем на занятии

Содержание лекции 5 «ТАБЛИЦА как способ организации пространства»: функционал и место тега table, теги tr и td (th)  — строка и ячейка,  основные атрибуты тега table, основные атрибуты тегов tr и td (th), практика применения

Вступление

Итак, у вас было время хорошенько разобраться с предыдущими лекциями и опробовать на практикке: придумать доменное имя и зарегистрировать сайт (лекция 1), сочинить оглавление — структуру будущего сайта (лекция 2), вникнуть в грамматику и синтексис языка html, где, что и как мы пишем (лекция 3), а также опробовать свои силы в написании первых текстов (лекция 4). Самое время организовывать пространство страницы!

Вопреки распространенному мнению, что таблицы могут пригодиться лишь для прайсов и статистических сведений (хотя и для них тоже), табличный способ весьма удобен для разметки документа страницы в целом. Взять, к примеру, заголовки: наверняка вы обращали внимание, что каким-то волшебным образом они распределяется равномерно по всей длине экрана? Если приглядеться, то можно заметить, что удобные сайты визуально как будто поделены на части: какая-то часть информации справа, какая-то слева, какая-то — всегда вверху. И ведь каждая часть еще может быть самостоятельно окрашенной! Как это получается?

Будет не совсем честным с моей стороны заявить, что это всегда непременно таблица. Иногда это деление страницы с помощью специальных тегов или составление страницы из нескольких фреймов — если вы обращали внимание на сайты, в которых вы двигаете какую-то часть, а другая остается при этом неподвижной — это оно. Хотя этот способ сложнее и не так уж часто применяется. (Раньше не применялся из-за того, что страницы, созданные из нескольких фреймов, каждый из которых является самостоятельной страницей, были слишком тяжелы для медленного интернета; теперь не применяется из-за того, что экраны смартфонов слишком маленькие, чтобы там еще что-то и делить.) Поэтому в нашем курсе — Основы HTML — мы другие способы рассматривать не будем — захотите, изучите факультативно.

Хорошая новость: в большинстве элементарных сайтов нам с вами хватит одной страницы и грамотно размещенной на ней таблицы (или пары таблиц)! Ну, и в целом это удобный и полезный пример для изучения основ html.

Tег table. Теги tr и td (+ th)

Таблица встраивается, разумеется, в тело вашего документа. То есть вставленный между двумя тегами body свеженький тег table — открывающий и закрывающий — определит, что это таблица и она охватывает весь документ. Следовательно, вся последующая информация, размещаемая на странице, — будет располагаться именно между этими тегами: table и /table.

Рис. 1. Главная страница сайта в Блокноте с основной структурой.

Сам тег table, наравне с head и body никак невозможно увидеть в браузере, он ничего не меняет. Чтобы что-то наблюдать в браузере — таблицу необходимо заполнить содержанием. Чтобы вы сразу могли наблюдать «плоды своих трудов», познакомимся еще с двумя тегами — tr и td.

Тег tr — от table row, табличная строка — следующий после тега table. Он определяет наличие в таблице строки.
Тег td — от table division, табличное деление — внутренний для тега tr. Определяет наличие в строке ячейки.

(Тег th абсолютно равен тегу td, но понадобится нам чуть позже, когда мы будем учиться определять ячейкам или текстам в них стили. Просто запомните, что использовать можно оба варианта начертания.)

Важно: оба тега, разумеется, имеют места открытия и закрытия. Но идут они только в такой последовательности — никак иначе! Нельзя сначала нарисовать ячейку, а потом создавать внутри нее строку. Нельзя проигнорировать наличие ячейки, если строка пустая или состоит только из одной ячейки. Как и нельзя проигнорировать наличие строки, если ячейка всего одна. Поэтому все, что вы можете сделать, это запомнить порядок: таблица содержит внутри себя строки, а строки делятся на ячейки-колонки. И уже в этих ячейках внутри строки — размещается ваш контент!

Рис. 2. Html-запись для таблицы с одной строкой и пятью колонками,
содержащими текст разных цветов

Рис. 3. Результат записи в браузере

Основные атрибуты тега table

Любимые атрибуты тега table, которые нам могут понадобиться в дальнейшем, определяют:

1. Положение и размеры

align — расположение таблицы
height — высота
width — ширина

Это очень полезное знание! Например, нам бы хотелось, чтобы сверстанная страница сайта отражалась одинаково и на смартфоне, который по узкой стороне имеет порядка 600-700 пикселей, и на мониторе компьютера, с количеством вариантов по «пикселям в ширину», равному количеству решений производителей... Что мы могли бы сделать? Верно: мы можем задать нашей таблице ширину смартфона и задать расположение «центр» (center) относительно любого экрана.

2. Графическое отражение

border — толщина рамки в пикселях
bordercolor — цвет рамки
bgcolor — цвет фона
cellpadding — доп. пустое место между ячеек

3. Дополнения

cols — заданное число колонок в таблице

Основные атрибуты тегов tr и td (th)

К рядам и ячейкам также применимы атрибуты высоты (height), ширины (width). Также, если нет заданных для таблицы в целом фонов, цветов и параметров рамки , то можно задать через html-разметку фоны и цвета рамки для отдельных строк или ячеек. (Как все-таки задать индивидуальные параметры ячеек, если для таблицы есть общие, расскажу, когда доберемся до 3 уровня — стилей.) Как вы поняли из примера, цветовой палитрой мы пользуемся той же, что и для текста — она универсальна!

Но чаще всего нам понадобятся такие действия:

1. Действия с ячейками

"colspan" — для тега td — число ячеек, объединяемых по горизонтали
"rowspan" — для тега tr — число ячеек, объединяемых по вертикали

2. Действия с элементами внутри ячеек

"valign" — для тега tr в целом и td в частности — выравнивание элементов строки или ячейки по вертикали
"align" — для тега td — выравнивание элементов ячейки по горизонтали

Ну что, пробуем?

Рис. 4. Html-запись для таблицы в четыре строки и пять ячеек.

На что хочется обратить ваше внимание:

Общими параметрами для таблицы заданы — ширина, местоположение, размер рамки, цвет таблицы и цвет рамки. Надеюсь, все ясно. 

Как видите, не обязательно задавать через атрибуты таблицы количество ячеек в ней: вам достаточно просто знать, сколько у вас максимально ячеек в строках таблицы. (Здесь - пять, по количеству разделов сайта в содержании — будущем навигаторе.) Так, в первой, третьей и четвертой строке эти пять ячеек объединены вместе. Во второй строке используются все пять и им даны равные значения по ширине. А пятая строка поделена на две части: ту, что объединяет три ячейки, и ту, что объединяет две ячейки.

В строчках местоположение элементов по вертикали по умолчанию — центр. Это хорошо видно при сопоставлении рис. 4 с рис. 5. Поэтому в первой строке мы выбрали атрибут «местоположение по вертикали» (valign) и присвоили ему значение «верх» ("top"), что дало нам необходимый эффект для текста первой строки.

Также видно, что значения местоположения текста можно задавать и через атрибут тега td, и через обычный атрибут текстовых тегов (h или p), но знать возможности этого атрибута в теге td необходимо, потому что элементом ячейки в дальнейшем может быть не только текст.

Итак, результат (центральный кусок моего монитора):

Рис. 5. Результат записи: страница, распланированная таблицей.

Еще несколько слов про размеры и пиксели. Проектируя таблицу в пикселях, лучше, чтобы эти пиксели делились без остатка на все необходимые элементы. Например, 600 пикселей удачно делится на 5 ячеек по 120 пикселей, если мы хотим, чтобы ячейки под заголовки были одинаковыми. Также я проверила свои изображения, которые я планирую в дальнейшем вставлять в ячейки и иллюстрировать текст.  А сами ячейки — по ширине и / или высоте — складывались между собой в то, что вам необходимо: например, если мои изображения — иллюстрации к текстам — 250х360 пикселей, то в аналогичном случае одно изображение займет три ячейки в ширину и две строки по 125 пикселей в высоту)...

Домашнее задание:

Вы же придумали заголовки рубрикации своего сайта? (О премии. - Наше жюри. - Участникам. - Контакты.) А основные тексты? Представили, где что будет располагаться? Попробуйте, используя знания из сегодняшней лекции распределить тексты и информацию о будущих изображениях на первой странице. Пора начинать конструировать свой сайт!

На следующей лекции будем учиться расставлять ссылки — внутренние и внешние. А значит, научимся расставлять по тексту изображения: фотографии, картинки и, конечно, — фоны!.. 

Перейти к 6 лекции курса >>>>>

[февраль, 2024]