Таблицы на HTML странице
В настоящее время таблицы в HTML используются, в основном, для форматирования и оформления страниц, хотя и первоначальное их назначение как метода представления информации не утратило своего значения.
Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тегом <TABLE> и завершаться тегом </TABLE>. Тег <TABLE> может использоваться с рядом параметров, каждый из которых можно опустить. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в теге <TABLE> могут использоваться следующие параметры: BORDER(рамка), CELLSPACING(расстояние между рамками двух смежных ячеек, как по горизонтали, так и по вертикали), CELLPADDING (размер отступа между рамкой ячейки и данными внутри ячейки), WIDTH(ширина таблицы), ALIGN(расположение таблицы). Отдельные браузеры позволяют задавать и другие параметры.
Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.
Тэг <TH> используется для создания ячеек с заголовками.
Тэг <TD> - для обыкновенных ячеек с данными.
Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>. Описание заголовка должно располагаться внутри тегов <TABLE> и </TABLE> в любом месте, однако вне тегов <TR>, <TD> и <TH>. По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и размещается в центре. Если значение параметра ALIGN равно BOTTOM, то заголовок располагается в нижней части таблицы.
Параметры WIDTH и HEIGHT могут применяться в тегах <TD> и<TH>, их значение определяет ширину и высоту ячейки, для которой записаны эти параметры. Значения могут задаваться в пикселях или в процентах от размеров всей таблицы.
Каждую ячейку таблицы можно рассматривать как отдельную область для независимого форматирования. Все правила для форматирования текста могут быть использованы для форматирования текста внутри ячейки. Область действия тегов, записанных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тега.
Для форматирования данных внутри ячейки таблицы предусмотрены ряд параметров. Параметр горизонтального выравнивания может принимать значения LEFT, RIGHT, CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>).
Параметр вертикального выравнивания VALIGN может принимать значения:
TOP - по верхнему краю, BOTTOM - по нижнему краю, MIDDLE - посередине, BASELINE - по базовой линии.
По умолчанию происходит выравнивание посередине. Задание параметра выравнивания в теге <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейке строки могут быть определены свои параметры, переопределяющие параметры, заданные в теге <TR>.
При построении сложных таблиц возникает необходимость в объединении в одну ячейку смежных ячеек как по горизонтали, так и по вертикали. Это можно сделать при использовании параметров COLSPAN и ROWSPAN, задаваемых в тегах <TD> и <TH>.
При задании COLSPAN=n целое значение n определяет, на какое количество ячеек следует расширить текущую ячейку по горизонтали.
Параметр ROWSPAN=n, где n целое значение, позволяет указать число строк, которые следует охватить по вертикали.
Параметр BORDERCOLOR определяет цвет всех элементов рамок таблицы.
Другие два параметра BORDERCOLORRIGHT и BORDERCOLORDARK задают цвет отдельных составляющих рамок таблицы, переопределяя значения BORDERCOLOR.
Параметр BORDERCOLORRIGHT окрашивает в заданный цвет левый и верхний края таблицы, а BORDERCOLORDARK соответственно правый и нижний края каждой ячейки.
Внутри одной таблицы можно поместить другую. Такие таблицы называются вложенными. Правила их построения не отличаются от правил, рассмотренных ранее. При использовании вложенных таблиц следует быть осторожным, так как не все браузеры правильно отображают сложные таблицы.
Ссылки в HTML. Навигация по страницам
Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:
<a href="https://www.html.net/">Это ссылка на HTML.net</a>
будет выглядеть в браузере:
Это ссылка на HTML.net
Элемент a обозначает "якорь/anchor". Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.
В примере атрибут href имеет значение "https://www.html.net", которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что"https://" всегда должно входить в состав URLов. Слова "Это ссылка на HTML.net" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a>.
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке.
Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:
<a href="subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>
Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ "#".
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например: <h1 id="heading1">heading 1</h1>
Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id тэга, на который выполняется переход. Например: <a href="#heading1">Ссылка на heading 1</a>
Кроме того, в ссылку можно поместить title. Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст.
<a href="https://www.html.net/" title="Посещайте HTML.net и изучайте HTML">HTML.net</a>