Задание цвета элементов таблицы

При помощи атрибута 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>

Отображение в браузере: 1 2 3 4

Графический фон таблицы

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

Пример:

HTML-код: <table background="img/sea.jpg">  <tr>   <td>11111</td>   <td>22222</td>  </tr>  <tr>   <td>33333</td>   <td>44444</td>  </tr> </table>

Отображение в браузере: 11111 22222 33333 44444

Выравнивание данных в таблице

Для выравнивания данных в таблице предназначены атрибуты 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>

Отображение в браузере: 1111 2222 22222 Нижняя ячейка Нижняя ячейка

Изменение размеров таблицы

Ширина таблицы задается атрибутом 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>

Отображение в браузере: Ширина 200 пикселей Ширина 60%

Таблицы ч.3

Слияние ячеек таблицы

Улучшение внешнего вида таблицы

Отображение границ таблицы

Перенос слов в ячейках таблицы

Вложенные таблицы

Обтекание таблицы текстом