Сайтостроение

HTML. Tаблицы. Задание цвета, фон, выравнивание, размеры

Используя атрибут BGCOLOR, существует возможность изменять цвет содержимого столбцов, группы столбцов, строки, группы строк, ячейки, а также таблицы html страницы полностью.
Цвет можно задать как английским наименованием цвета (например, red), так и большим выбором шестнадцатеричных значений (например, #ff00ff) кода цвета со знаком #.

Например:

<table border="2">
<tr bgcolor="green">
<td>5</td>
<td>6</td>
</tr>
<tr bgcolor="#4444ff">
<td>7</td>
<td>8</td>
</tr>
</table>

Результат:

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

Например:

<table background="fon.jpg">
<tr>
<td>55555</td>
<td>66666</td>
</tr>
<tr>
<td>77777</td>
<td>88888</td>
</tr>
</table>

Результат:

Для того, чтобы выравнивать данные в таблице html страницы используются атрибуты VALIGN, ALIGN.
Атрибут ALIGN применяется для выравнивания данных в таблице по горизонтали. По умолчанию принято, что содержимое заголовков отображается по центру страницы, а ячеек – по левой стороне.
Атрибут VALIGN используется для выравнивания данных в таблице по вертикали. По умолчанию принято, что информация выравнивается по центру страницы. Средства выравнивания можно применять в отдельной ячейке, строке, группе строк, столбце, группе столбцов. Самым значительным приоритетом является атрибут выравнивания данных в ячейках таблицы.
Когда вы ограничиваете расстояние между информацией находящейся в ячейке и ее кромками, используя атрибут CELLPADDING, то это влияет на результат выравнивания. К примеру, при CELLPADDING=4 и ALIGN="bottom", данные будут сосредоточены на расстоянии четырех пикселей от нижней границы ячейки.

Например:

<table border="2" cellpadding="6">
<tr>
<td align="left">3333<br>4444</td>
<td valign=" bottom " align="center">44444</td>
</tr>
<tr>
<td>Верхняя</td>
<td>Верхняя</td>
</tr>
</table>

Результат:

Для того, чтобы изменить ширину таблицы html страницы пользуемся атрибутом WIDTH. Значение ширину таблицы можно задавать как в пикселях - абсолютных числах (WIDTH=185), так и в относительных единицах (процентах) (WIDTH="75%"). К примеру, задав значение ширины в шестьсот пикселей, можно быть полностью уверенным, что таблица всегда поместится в окне браузера, какое бы не выставили разрешении монитора.
Подобные же операции можно осуществить и с высотой таблицы применяя атрибут HEIGHT.
Если вы хотите задать чрезмерно малые параметры высоты или ширины таблицы, то браузер определяет наименьшее значения, которые позволяют качественно отображать данные.
Все вышеперечисленные методы также относится и к ячейкам таблицы html страницы. При этом вовсе не требуется задавать параметры каждой отдельной ячейки. Когда вы меняете ширину ячейки все остальные ячейки в пределах данного столбца, будут отображаться, учитывая получение нового значения. Те же нюансы справедливы и в отношении задания высоты ячейки.

Например:

<table border="2" width="195">
<tr>
<td><p>Общая ширина составляет 195 пикселей</p></td>
</tr>
</table>
<br>
<table border="2" width="55%">
<tr>
<td><p> Общая ширина составляет 55 процентов</p></td>
</tr>
</table>

Результат:

© HouseOfHorse.ru, 2009-2011