УЧЕБНИК HTML для новичков - Комбинированные таблицы

Атрибуты ячеек

Всеобщий психоз

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

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

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

В общем, вы поняли, что можно вытворять с обыкновенными ячейками, да? Теперь перед вами - безграничные возможности! Это вам не left или right, тут - полет фантазии!

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

align
выравнивает содержимое ячеек по центру center, левому left или правому right краю

<TABLE border=1 width=200 bgcolor=aqua>
  <TR>
    <TD align=left>
      содержимое ячейки выровнено по левому краю
    </TD>
  </TR>
  <TR>
    <TD align=center>
      содержимое ячейки выровнено по центру
    </TD>
  </TR>
  <TR>
    <TD align=right>
      содержимое ячейки выровнено по правому краю
    </TD>
  </TR>
</TABLE>

содержимое ячейки выровнено по левому краю

содержимое ячейки выровнено по центру

содержимое ячейки выровнено по правому краю

background
указывает изображение, которым заполнится фон ячейки

<TABLE border=1>
  <TR>
    <TD background="fon.jpg">
      Ячейка с фоном
    </TD>
  </TR>
  <TR>
    <TD>
      Ячейка без фона
    </TD>
  </TR>
  <TR>
    <TD background="fon.jpg>
      а эта тоже с фоном
    </TD>
  </TR>
</TABLE>

Ячейка с фоном

Ячейка без фона

а эта тоже с фоном

bgcolor
цвет фона ячейки

<TABLE border=0>
  <TR>
    <TD bgcolor=red>
      красный
    </TD>
  </TR>
  <TR>
    <TD bgcolor=yellow>
      желтый…
    </TD>
  </TR>
  <TR>
    <TD bgcolor=green>
      зеленый!
    </TD>
  </TR>
</TABLE>

красный

желтый…

зеленый!

(*) bordercolor
цвет рамки для ячейки

<TABLE border=1>
  <TR>
    <TD bordercolor=red>
      красная рамка
    </TD>
  </TR>
  <TR>
    <TD bordercolor=yellow>
      желтая рамка...
    </TD>
  </TR>
  <TR>
      <TD bordercolor=green>
      зеленая рамка!
    </TD>
  </TR>
</TABLE>

красная рамка

желтая рамка...

зеленая рамка!

(*) height
высота ячейки в пикселах

<TABLE border=1 bgcolor=#cccccc>
  <TR>
    <TD height=20>
      высота 20 пикселов!
    </TD>
  </TR>
  <TR>
    <TD height=40>
      высота - 40 пикселов!
    </TD>
  </TR>
  <TR>
    <TD height=60>
      высота - 60 пикселов!
    </TD>
  </TR>
</TABLE>

высота 20 пикселов!

высота - 40 пикселов!

высота - 60 пикселов!

width
ширина ячейки в пикселах или в процентах
(Однако, если содержимое ячейки больше указанной ширины, то ячейка расширяется)

<TABLE border=1 bgcolor=#cccccc>
  <TR>
    <TD width=100% colspan=2>
      ширина ячейки - 100%
    </TD>
  </TR>
  <TR>
    <TD width=20%>
      ширина ячейки - 20%
    </TD>
    <TD width=80%>
      ширина ячейки - 80%
    </TD>
  </TR>
</TABLE>

ширина ячейки - 100%
ширина ячейки - 20%	ширина ячейки - 80%

(*) valign
выравнивание содержимого ячейки по вертикали

<TABLE border=1 bgcolor=#cccccc>
  <TR>
    <TD valign=top height=150>
      содержимое ячейки выравнено по верхнему краю
    </TD>
    <TD valign=middle>
      содержимое выравнено по середине ячейки
    </TD>
  </TR>
<TR>
    <TD valign=bottom>
      содержимое ячейки выравнено по нижнему краю
    </TD>
    <TD valign=baseline>
      ну, а тут - по базовой линии, только не спрашивайте меня, что это такое
    </TD>
    </TR>
</TABLE>

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

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

А кто не верблюд?

Для начала создадим таблицу, состоящую из двух ячеек, в левую ячейку поместим изображение, а в правую - просто текст. Думаю, это вы сделаете играючи!

<table border=1>
  <tr>
    <td>
      <img src="foto/verblud.jpg" width=300 height=230>
    </td>
    <td bgcolor=aqua>
      Я верблюд. А ты не верблюд? Я верблюд! А ты не верблюд! Или верблюд? А я верблюд? Или верблюдиха?
    </td>
  </tr>
</table>

И у меня получилось вот так:

Я верблюд. А ты не верблюд? Я верблюд! А ты не верблюд! Или верблюд? А я верблюд? Или верблюдиха?

А пока я буду пыхтеть над следующим уроком, не сидите сложа руки, а ковыряйтесь, ковыряйтесь и ковыряйтесь с таблицами, исследуйте их вдоль и поперек. Пусть они вам даже снятся ночами! Только смотрите не чокнитесь! А то ведь всякое бывает...