HTML, Excel, Word, SEO   HTML профессионально Форматирование таблиц

Форматирование таблиц

Т.к., по сути, весь наш сайт заключен в таблицы, то, перейдем к форматированию оных.

В файле style.css прописываем следующее:

BODY {
	background-image : url(bg.gif);
	margin-top: 5px;
}
TABLE{
	background: #FFFFCC;
	font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
	color: black;
	font-size: 8pt;
}

Вот как будет теперь выглядеть наша html-страница.

Не надо быть семи пядей во лбу, чтобы догадаться, что:

• первый атрибут таблицы определяет ее фоновый цвет;
• второй - задает наименование шрифта для текста (если у клиента не установлен данный шрифт, то берется следующий по списку); имя sans-serif - говорит браузеру, что надо взять любой рубленый шрифт, который установлен на компьютере;
• третий - задает цвет шрифта;
• четвертый - его размер.

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

Вот как будет теперь выглядеть наша html-страница.

Согласитесь, что текст смотрится не очень удобочитаемо.

Для начала сделаем небольшое форматирование абзацев документа.

Для этого пропишем для тега абзаца <P> следующие параметры:

P{
    padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 3px;
	padding-top: 2px;
	text-indent: 10px;
	text-align: justify;
}

• первые четыре атрибута определяют размеры полос чистого пространства вокруг элемента (т.е. текста абзаца).;
• пятый - задает отступ начала абзаца (красную строку);
• шестой - выравнивает текст по ширине;

Справедливости ради следует сказать, что решение выровнять текст абзаца по ширине довольно спорное. Безусловно, в этом случае страница смотрится более строго, однако, удобочитаемость несколько ухудшается. В любом случае, то или иное решение форматирования вебмастер принимает, в каждом конкретном случае, соответственно поставленным задачам. Сейчас же во главу угла мы ставим задачу обучения, прежде всего, разнообразным приемам форматирования.

Заключаем в теги <P> три абзаца средней ячейки.

Вот как будет теперь выглядеть наша html-страница.

И последний штрих на данном этапе - разместим три звездочки, отделяющие первый абзац, по центру колонки. Это можно проделать разными способами, но мы для нашей цели выберем замечательный тег <DIV>.

<div align="center">* * *</div>

Вот как будет теперь выглядеть наша html-страница.

top

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.

Если понравился этот сайт..

© 2005-2008
Юрий Кордык All Rights Reserved

E-mail:
admin@on-line-teaching.com