4.3 Оформление группы ячеек

С помощью определенных тегов можно задавать целому столбцу ряд свойств, избегая

^{заполнения тегов} <TD> ^{одинаковым кодом, что значительно экономит время. Для этого в HTML}

существуют следующие конструкции. Свойства группы из нескольких смежных столбцов

^{описываются тегом} <COLGROUP>^.

9

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

остальные выравниваются по левому краю, нужно написать такой код:

<TABLE>

<colgroup align=center>

<!- - содержимое таблицы - -!>

</TABLE>

А как быть, если требуется распространить форматирование на несколько столбцов?

^{Конечно, можно выделить каждому из них по персональному тегу} <COLGROUP>^{, но это очень}

^{долго, хотя и работает. Лучше воспользоваться специальным атрибутом тега} <COLGROUP> ^для

^{объединения столбцов –} span^{. Например, код} <colgroup span=2 align=center>

описывает группу из двух столбцов с выравниванием по центру.

А теперь предположим, необходимо конкретизировать свойства определенного столбца

внутри группы. Например, выровнять новости по верхней границе ячеек, а даты – по нижней. Для

^{этого используется тег} <COL>^{, расположенный внутри тега} <COLGROUP>^{. Этот тег описывает}

атрибуты отдельного столбца, принадлежащего группе. Пример:

<table>

<caption><h1> Название фирмы </h1></caption>

<colgroup align=center>

<colgroup span=2 bgcolor=lightblue>

<col valign=top>

<col valign=bottom>

</colgroup>

<tr>

<th>Ссылки</th>

<th>Новости</th>

<th>&nbsp</th>

</tr>

<tr>

<td> <a href="1.html"> Первая ссылка </a></td>

<td> Первая новость</td>

<td> 01.01.01 </td>

</tr>

<tr>

<td> <a href="2.html"> Вторая ссылка </a></td>

<td> Вторая новость. Все. Больше новостей нет </td>

<td> 02.02.02 </td>

</tr>

<tr>

<td> <a href="3.html"> Третья ссылка </a></td>

<td>&nbsp</td>

<td>&nbsp</td>

</tr>

</table>

в браузере это будет выглядеть так (рис.6):

10

Рис. 6. Форматирование отдельных ячеек таблицы

4.4 Фон таблицы и ячеек

^{Уже известные нам атрибуты} bgcolor ^и background ^{определяют цвет фона (однотонная}

заливка) или фоновый рисунок соответственно для всех ячеек таблицы:

<table background="путь к картинке">

для строки таблицы:

<tr bgcolor=цвет>

для ячейки таблицы:

<td bgcolor=цвет>

причем последующий цвет перекрывает предыдущие.

Цвета могут быть заданы шестнадцатеричными RGB-значениями или стандартными

названиями.

КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

Этот раздел посвящен широко используемому средству HTML, значительно облегчающему

реализацию единого стилевого оформления при разработке больших веб-сайтов , — каскадным

таблицам стилей (CSS, Cascade Style Sheets).

5. Возможности css

Таблицы стилей позволяют управлять отображением практически любого содержимого

HTML- документа. Например, с их помощью можно задать цвет, шрифт и прочие параметры ,

влияющие на то , как должны показываться заголовки первого уровня . Можно задать полужирное

или еще какое-нибудь начертание шрифта определений в соответствующем списке . С

использованием таблиц стилей можно забыть о необходимости физического форматирования

текста , а также о настройке отображения таблиц , тех же списков и других элементов HTML- до -

кументов . Кроме того , таблицы стилей позволяют настраивать даже параметры отображения со -

держимого документа, недоступные при использовании HTML- элементов (отступы абзацев , линии

рамо к рисунков и многое друго е , вплоть до интервала между буквами текста и свободного

позиционирования элементов страницы).

Однако по-настоящему убедиться в полезности CSS можно тогда, когда приходит время

менять дизайн всего сайта . Предположим, что есть сайт, представляющий собой достаточно

большое учебное пособие , например , по программированию на C#, содержащее 100 страниц с 200

примерами ( листингами ). По какой-то причине нужно поменять цвет шрифта этих самых листин -

гов : ничего не поделаешь , придется вносить изменения в каждый тег <FONT> (200 шт ук). А при

использовании CSS достаточно изменить (или добавить ) одну запись в таблице стилей . Наверное,

теперь понятно , почему технология CSS получила большое распространение вскоре после

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

таблиц стилей можно создавать документы , которые по-разному отображаются на различных

типах устройств: от карманного ПК до проектора.

11