- •Структура html документа
- •Параметры фона
- •Параметры текста
- •Параметры гиперссылок
- •Создание простейших html-таблиц
- •Выравнивание Параметр align Горизонтальное выравнивание
- •Параметры valign Вертикальное выравнивание
- •Параметр border
- •Параметр bordercolor
- •Параметры bordercolordark и bordercolorlight
- •Частичное отображение рамок
- •Размеры таблицы Параметры width и height
- •Внутренние отступы
- •Параметр cellspacing
- •Параметр cellpadding
- •Фон таблицы и ячеек
- •Заголовок таблицы
- •Колонтитулы таблицы
- •Параметры выравнивания содержимого ячеек — align и valign
- •Параметры bgcolor и background
- •Параметры width и height
- •Параметр nowrap
- •Слияние ячеек. Параметры colspan и rowspan
- •Заголовки строк и столбцов
- •Группировка данных
- •Отображение пустых ячеек в таблицах
- •Вложенные таблицы
- •Свойства текста
- •Свойства шрифта
- •Внедрения индивидуальных шрифтов.
- •Свойства цвета и фона
- •Блочная модель верстки
- •Позиционирование
Отображение пустых ячеек в таблицах
В процессе построения таблиц может возникнуть необходимость оставления одной или более ячеек незаполненными. Однако банальное отсутствие каких-либо символов внутри тегов <TD> и <TH> в зависимости от браузера может привести к самым разнообразным вариантам визуального отображения таблицы на экране. Internet Explorer и Netscape не прорисовывают внутреннюю структуру пустых ячеек, a Opera к тому же оттеняет правую границу ячеек с информацией, размещенных слева от пустых табличных ячеек
Чтобы избежать различий в отображении таблиц, внутри тегов ячеек <TD> и <TH> следует размещать не видимые на экране данные, позволяющие браузерам не отображать такие ячейки как пустые. Подобные данные могут быть следующих типов:
теги структурного форматирования. В данном случае под этим понятием подразумевается тег принудительного переноса строки <BR> и конструкция запрета такого переноса . При использовании этих элементов следует помнить, что размер пустой (в визуальном плане) ячейки будет зависеть от свойств шрифта, заданных для HTML-документа в целом или же предопределенных для конкретного блока (<SPAN>, <DIV>) или ячейки цветные текстовые блоки. Разместив в ячейке, которая должна визуально казаться пустой, текст небольшого объема цветом, аналогичным значению параметра BGCOLOR тега <TD> или <TH>, при просмотре такого документа в браузере мы получим "пустую" табличную ячейку;
прозрачные графические распорки. Это способ отображения пустых ячеек, практически не зависящий от модели браузера и свойств шрифта. Заключается в размещении прозрачного графического изображения нужных размеров (распорки, спейсера) в пределах табличной ячейки. Прозрачная распорка (в формате GIF) невидима на странице и очень гибка в масштабировании. К примеру, невидимый спейсер исходного размера 10 х 10 пикселов при необходимости можно искусственно увеличить или уменьшить путем переназначения его параметров WIDTH и HEIGHT.
Вложенные таблицы
Отдельные ячейки таблицы могут содержать практически любые тэги языка и данные, разрешенные в разделе <BODY> документа. В том числе, внутри ячейки таблицы может быть целиком размещена другая таблица. Такие таблицы называются вложенными.
Правила построения вложенных таблиц ничем не отличаются от создания таблиц одного уровня — используются те же теги и параметры, задаются те же свойства и значения. Единственное, о чем нельзя забывать в ходе создания сложных вложенных таблиц, это:
каждая таблица последующего уровня размещается внутри тега-контейнера <TD> или <TH> таблицы предыдущего уровня;
вложенная таблица не может быть создана за пределами вышеназванных тегов ячейки таблицы;
таблица одного уровня может содержать любое количество вложенных таблиц другого уровня, идущих друг за другом в пределах тега ячейки таблицы верхнего уровня;
количество тегов таблиц всех уровней должно соответствовать количеству закрывающих тегов этих же таблиц.
Отметим, что не все браузеры, поддерживающие таблицы, правильно отражают сложные таблицы с несколькими уровнями вложенности, поэтому их использование требует осторожности.
Особенность вложенных таблиц, в отличие от других способов представления данных в электронном документе, позволяет более точно размещать отдельные элементы страницы относительно друг друга и относительно границ самого документа, отображаемого браузером.
Например, два разнородных блока текста и нумерованный список, размещенные внутри тега <BODY>, невозможно разместить на одном уровне, а тем более на одном уровне со смещением в какую-либо сторону. Использование таблиц с легкостью решает эту проблему, позволяя располагать различные элементы и их комбинации в разных местах документа посредством видимых и невидимых ячеек рядов таблицы.
Вот почему в последнее время преобладающее большинство HTML-документов создается на основе таблиц, где в качестве несущей основы берется таблица с невидимыми краями, содержащая вложенные таблицы с разным оформлением, отличающимися значениями параметров.
Подводя итог сказанному, можно выделить следующие преимущества вложенных таблиц:
гибкая масштабируемость структуры электронного документа в целом;
широкие возможности позиционирования отдельных элементов страницы;
многоуровневое представление разнородных информационных данных;
расширенные оформительские возможности;
поддержка популярными браузерами.
CSS
Cascading Style Sheets(CSS) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания. В классическом HTML структура и дизайн были вперемешку: рядом с текстовым абзацем его цвет, размер шрифта, тип шрифта и т.п. Если ты захочешь изменить такой простой параметр, как размер шрифта на своем сайте - придется переписывать все странички. CSS позволяет назначить всем объектам стиль, описание которого может храниться вообще в отдельном файле. Используя CSS, ты можешь изменить размер шрифта во всех страницах сайта, исправив только один файл с описанием стилей. Чем больше разных стилей ты придумаешь, тем круче менять дизайн. Самое главное, что не придется менять уже готовые HTML документы, лежащие на сервере. Браузер пользователя сам обратится к файлу (по ссылке) со стилями и придаст страничке нужный облик.
Пример
<style type="text/css"><!--
BODY {FONT-FAMILY: arial; FONT-SIZE: 8pt; color:#797979;}
TD {FONT-FAMILY: arial; FONT-SIZE: 8pt; color:#797979;}
A:link {text-decoration: underline; color:#4D4D4D;}
A:visited {text-decoration: underline; color:#4D4D4D;}
A:hover {text-decoration: underline; color:#4D4D4D;}
A.menu:link {text-decoration: none; color:#808080;font-size:8pt;font-weight:bold;}
A.menu:visited {text-decoration: none; color:#808080;font-size:8pt;font-weight:bold;}
A.menu:hover {text-decoration: underline; color:#808080;font-size:8pt;font-weight:bold;}
A.menu1:link {text-decoration: none; color:#346D9F;font-size:10px;font-weight:bold;}
A.menu1:visited {text-decoration: none; color:#346D9F;font-size:10px;font-weight:bold;}
A.menu1:hover {text-decoration: underline; color:#346D9F;font-size:10px;font-weight:bold;}
.header {color:#808080;font-size:9pt;font-weight:bold;}
--></style>