Таблицы html страницы (ч.2)
Задание цвета элементов таблицы
Задание цвета элементов таблицы html страницы
При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.
Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.
Пример:
|
HTML-код: <table border="1">
<tr bgcolor="#ff00ff">
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="#5555ff">
<td>3</td>
<td>4</td>
</tr>
</table>
|
Отображение в браузере:
|
Графический фон таблицы html страницы
При помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта.
Пример:
|
HTML-код: <table background="img/sea.jpg">
<tr>
<td>11111</td>
<td>22222</td>
</tr>
<tr>
<td>33333</td>
<td>44444</td>
</tr>
</table>
|
Отображение в браузере:
|
Выравнивание данных в таблице html страницы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине. Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.
Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.
Пример:
|
HTML-код: <table border="1" cellpadding="5">
<tr>
<td align="right">1111<br>2222</td>
<td valign="top" align="center">22222</td>
</tr>
<tr>
<td>Нижняя ячейка</td>
<td>Нижняя ячейка</td>
</tr>
</table>
|
Отображение в браузере:
|
Изменение размеров таблицы html страницы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.
То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
Пример:
|
HTML-код: <table border="1" width="200">
<tr>
<td><p>Ширина 200 пикселей</p></td>
</tr>
</table>
<br>
<table border="1" width="60%">
<tr>
<td><p>Ширина 60%</p></td>
</tr>
</table>
|
Отображение в браузере:
|
