Часть третья. Табличный дизайн.

В этом уроке будем разбираться из чего состоит таблица. Таблица, в коде состоит из: открывающего «<table>» и «</table>» закрывающего тегов, строки «<tr> </tr>» и колонки «<td></td>». Еще у таблицы может быть заголовок, который обозначается вот так «<caption> </caption>», заголовок может быть и у столбца, обозначается он вот таким образом «<th> </th>».

Вот пример кода таблицы и сама таблица

<table border="2" bgkolor="#5E9F9F" align="center">

<caption>Заголовок таблицы</caption>

<tr>

<th>Заголовок столбца 1</th><th>Заголовок столбца 2</th>

</tr>

<tr>

<td>1 ячейка</td><td>2 ячейка</td>

</tr>

<tr>

<td>3 ячйка</td><td>4 ячейка</td>

</tr>

</table>

Заголовок таблицы

Заголовок столбца 1	Заголовок столбца 2
1 ячейка	2 ячейка
3 ячейка	4 ячейка

В коде появились неизвестные нам значеня «border="2"», «bgkolor="#5E9F9F"» и «align="center"». «border="2"» - это обозначение толщины линий таблицы, если ее изменить на «"0"», то границ не будет видно, есть теги при помощи которых можно отображать только одну грань или попарно, об этом ниже. «bgkolor="#5E9F9F"» как вы, наверно, уже догадались это фоновый цвет таблицы в шестнадцатиричном формате, это не что иное как отображение цвета кинескопом ЭЛТ телевизора по трем основным цветам RGB, R-красный G-зеленый B-синий, на каждый цвет по два значения. Можно обозначать только буквами «A,B,C,D,E,F» или только цифрами «от 0 до 9», а правильно в перемешку. Для напоминания приведу пример счета шестнадцатиричного «0,1,2,3,4,5,6,7,8,9,0A,0B,0C,0D,0E,0F» для наглаядности.

Попробуйте самостоятельно изменить параметры и посмотрите, что из этого получится.

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

Это можно сделать если убрать все слова и цифры между тегами. Теперь попробуем задать ширину и высоту таблице, это можно сделать таким образом, например добавим в этот открывающий тег

<table width="100%" height="500%" border="2" bgkolor="#5E9F9F" align="center">

width="100%"-ширина, height="500%"-высота Здесь значения даны в процентах, по отношению к окну браузера и при изменении окна браузера, будут изменяться и размеры. Если их вставить в код нашей таблицы, ничего не произойдет, она будет так же, как и прежде, маленьким квадратиком. Если убрать знак процентов, то браузер будет интерпретировать эти значения в пикселах и при изменении размера окна браузера, в этом случае, размер таблицы изменяться не будет, вот как это будет выглядеть

В этой таблице ширина «width="1000"»(пикселов), высота «height="200"» (пикселов). Такой дизайн является «"жестким" неизменным», а в процентах «"резиновым" изменяемым.»

Вы обратили внимание, что наша таблица размещается всегда посредине страницы, в центре. Это все благодаря атрибуту, так называются значения ширины, высоты, цвета, положения таблицы, «align="center"», который может иметь значения «riht, left, center» право, лево, центр относительно окна браузера. Подробности читайте в учебниках