Шаг 12 - Божественные таблицы

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

Таблицы

Тег таблиц называется <table>. Вся таблица должна находиться внутри него, и при этом закрывающую скобку </table> надо обязательно указывать.

Параметрами этого тега задается обший вид таблицы, ее цвет, толщина рамки и многое другое. И вот какие аргументы могут быть:

align
Ну как и всегда этот параметр задает выравнивание таблицы. Если таблица находится в выравненных участках текста, т.е. где указаны <div> или <center> то сами понимаете выравнивание можно не указывать. По умолчанию таблица выравнивается по левому краю.
width
Этот параметр задает ширину таблицы. Как правило браузер подбирает размер таблицы таким образом, чтобы там все хорошенько уместилось, но вы если вам нужен конкретный размер, то вы можете его указать в пикселах или в процентах от свободного пространства.
border
Используется для указания ширины границы таблицы в пикселах. По умолчанию имеет размер равный 0, и при этом границы таблицы не отображаются, т.е. получается прозрачная таблица :-).
cellspacing
Каждую ячейку браузер обводит своей собственной рамкой, и этот параметр задает ширину пространства между ними.
cellpadding
Этот параметр тоже задает ширину пространства, но только уже между рамкой ячейки таблицы и ее содержанием внутри.
bgcolor
Задает цвет фона таблицы.
background
Изображение, которое будет отображатся в виде фона таблицы. Этот параметр поддерживает не много браузеров.
Сразу после <table> может идти заголовок таблицы, который будет отображатся над ней. Он помещается внутри <caption>...</caption>.

Далее уже начинается сама таблица. Для того чтобы создать новый ряд ячеек в таблице существует тег <tr>. Закрывающую скобку можно не указывать. Для создания новой ячейки предназначен тег <td> или <th>. Количество ячеек (т.е. элементов <td> и <th>) должно быть одинаково в каждом ряду таблицы, т.е. внутри каждого тега <tr>

Пример простейшей таблицы:

<table border=1>
<tr><td>Первая ячейка<td>Вторая ячейка
<tr><td>новый<td>ряд
</table>
В этом случае будет такая вот таблица :
Первая ячейкаВторая ячейка
новыйряд

Тег <tr> имеет несколько атрибутов.

align
Задает выравнивание внутри всех ячеек таблицы. Если, например указать align=center, то содержимое каждой ячейки будет выравнено по центру.
valign
Также задает выравнивание, но уже по вертикали. Может принимать значения top - выравнивание по верху,middle - по центру, ну и bottom по низу.
bgcolor и background
Задают цвет или изображение фона одной строки таблицы.

Ячейки таблицы более богаты своими параметрами. Чтобы не писать снова, скажу что в них входят все параметры строк таблицы описанные выше, ну и еще парочка другая следующих :-) :

rowspan
Объединяет указанное количество ячеек в одну по вертикали.
colspan
Объединяет ячейки по горизонтали.
width и height
Задают рекомендуемые размеры ячейки по горизонтали и вертикали.
Если ячейка пустая, т.е. такая :
  <td></td>
То она не отображается браузером (по крайней мере у меня в IE 4.0), т.е. не появляется рамка ячейки. Для этого по идее надо пользоваться
  <td nospan></td>
Но и тут прикол, IE и ее не отображает. А вот Opera 3.51 отображает все эти дела в любом сочетании :-), я вот только еще в Netscape Navigator'е не проверил, потому что лень второй винт подключать с Линуксом. Ну короче не знаю, что об этом сказать, по видимому специально для IE вам придется пользоваться закодированным пробелом &nbsp;, потому что что-то типа <td>[пробел]</td> не сработает из-за того что все пробелы игнорируются браузерами.

Наверно многие не поняли как это могут ячейки объединяться. А вот как !!! Пример:

<table border=2>
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
</table>
А вот как это все выглядит :

12345
678
910
1112131415

Как видите в первой строке 5 элементов <td>. Вот во второй строке уже те самые чудеса творятся !!! Элементов <td> теперь уже всего 3, НО заметьте что если просуммировать все значения colspan, то снова получится 5. Ксати по умолчанию для каждой ячейки параметр colspan равен 1.

Третья строчка еще веселее, потому что над ней можно час думать и голову сломать, но всеже тут все просто. Вы должны взять и посмотреть сколько ячеек у вас "выростает" вниз и посмотреть их ширину. А нашем примере у нас есть 2 ячейки параметр rowspan в которых не равен 1, причем первая расширяется на 2 ячейки. Итого значит в этой строчке остаются незаполненными всего 5-3=2 ячейки. Что и соответствует дейстительности :-).

Вобщем понять это не просто, но Вы научитесь. Кстати очень замечательная особенность Html, в том что в ячейке можно сделать вложенную таблицу, а в ней еще одну и т.д. пока таблицы не кончатся :-).

Еще хотелось сказать немного о элементе <th>. Он, как уже говорилось ранее, также задает ячейку, но только отличается тем что текст внутри такой ячейки отображается жирным шрифтом. И ИМХО этот элемент просто эквивалентен <td><b>...</b>, только короче и проще.

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

Если они вас очень интересуют, то изучайте коды своих браузеров :-). Ну или на худой конец запустите FrontPage и узнайте, что же все-таки дорогой Билли заложил в свой IE !!! Только смотрите не найдите тайные ходы в нем, а то он обидится :-))) !!!


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей - 03.10.99