Из примеров хорошо видно, как браузер тиражирует изображение. Горизонтальная линия.

Для построения горизонтальной линии используется тег <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.

 

<hr align="center" color="#666666" width="400">

Правильное использование графики на веб-страницах способствует созданию необходимой атмосферы на сайте. Цветовые и графические схемы необходимо подбирать в зависимости от ситуации и от нацеленности всего проекта. Например на информационных сайтах, содержащих преимущественно текстовую информацию отлично работают теплые тона, с небольшим контрастом между областью с содержанием текста и остальной областью сайта, на продающих сайтах отлично работают светлые схемы оформления с элементами высокой контрастности (красный и синий). Вообще правильный выбор дизайна сайта – это отдельная и очень объемная тема, которая с легкостью может занять целую книгу.

Таблицы HTML

Таблицы HTML» – седьмой урок учебника HTML. В этом уроке мы поговорим об очень важной вещи, а именно – об использовании таблиц в HTML.

Использование таблиц в html разметке гипертекстовых документов играет очень важную роль, т.к. открывает почти безграничные возможности в позиционировании элементов.

Таблицы являются незаменимым инструментом структурирования информации.

Создание таблиц.

Для создания таблицы html используется контейнер <table>...</table>. Для создания строк служит тег <tr> ,а для столбцов – <td>. Давайте создадим простую таблицу, состоящую из 3х строк и 3х столбцов.

 

<table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

Ячейки таблицы без содержимого в большинстве браузеров могут выводиться некорректно, поэтому внутри каждого столбца я помещаю символ неразрывного пробела &nbsp. Если не помните, то можете прочитать про символьные элементы разметки.

Атрибуты таблиц в HTML.

У таблиц в HTML существуют следующие атрибуты:

• align – задает выравнивание по горизонтали. Возможные значения: left, center, right. По умолчанию таблицы выравниваются по левому краю окна браузера.

• valign – вертикальное выравнивание содержимого таблицы. Принимаемые значения: top, bottom, middle.

• border – Задает внешнюю рамку таблицы. 1 – рамка есть, 0 – рамки нет. Тоесть, при использовании 0 таблица визуально не будет видна. 

• cellpadding – расстояние между границей каждой отдельной ячейки и ее содержимым.

• cellspacing – расстояние между границами близлежащих ячеек.

• width – ширина таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты). 

• height – высота таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты). 

• bgcolor – задает цвет фона для таблицы.

• background – устанавливает рисунок в качестве фона таблицы.

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

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

 

Объединение 2х ячеек по горизонтали, цвет фона красный			Объединение 3х ячеек по вертикали и выравнивание по верху, цвет фона синий
	Выравнивание по низу и цвет рамки синий
	Выравнивание по верху и цвет рамки белый, цвет фона белый
	Объединение 2х ячеек по горизонтали выравнивание по низу и цвет рамки синий

 

<table width="358" height="452" border="1" align="right" bordercolor="#FF0000"> <tr> <td height="107" colspan="2" class="text" bgcolor="#FF0000"> </td> <td width="37" class="text"> </td> <td width="111" rowspan="3" valign="top" class="text" bgcolor="#0000FF"> </td> </tr> <tr > <td width="69" height="169" class="text"> </td> <td width="113" valign="bottom" bordercolor="#0000FF" class="text"> </td> <td class="text"> </td> </tr> <tr> <td height="102" class="text"> </td> <td valign="top" bordercolor="#FFFFFF" class="text" bgcolor="#FFFFFF"> </td> <td class="text"> </td> </tr> <tr> <td height="60" class="text"> </td> <td colspan="2" valign="bottom"  bordercolor="#0000FF" class="text"> </td> <td class="text"> </td> </tr> </table>

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