Создание таблиц.
Практика.
|
Тонкая рамка.
Иногда при создании таблицы необходимо
обрамить её тонкой рамкой размером в один пиксел.
Если выставить параметр border равный 1, то
получится не просто тонкая рамка, толщиной в один
пиксел, а псевдотрехмерное изображение этой
рамки, толщина которой будет совсем не
соответствовать указанному параметру.
Вот пример таблицы, построенной при
использовании параметра Border.
|
<table width="100" border="1"
cellspacing="0" cellpadding="0" height="100">
<tr>
<td> </td>
</tr>
</table> |
|
Если рассматривать эту таблицу в разрешении
1024х768, то она выглядит более или менее приемлемо.
Но в разрешениях 800х600 и 640х480 все по прежнему
ужасно.Для того чтобы сделать тонкую рамку
придется прибегнуть к некоторым ухищрениям.
в таблице можно менять расстояние между ячейками
с помощью параметра Cellspacing. Мы
создадим таблицу с одной ячейкой, сделаем фон
таблицы черным, фон ячейки - белым, а расстояние
между ячейками - 1 пиксел.
|
<table width="100" cellspacing="1"
cellpadding="0" height="100" bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td> </td>
</tr>
</table> |
|
Как вы видите у нас получилась таблица с тонкой
черной рамочкой. Для полного счастья в ячейку
можно вставить таблицу, в которой будет
размещаться вся ваша информация:
|
<table width="100" cellspacing="1"
cellpadding="0" height="100" bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td>
<table width="100%" cellspacing="0"
cellpadding="0" height="100%">
<tr bgcolor="#9999FF">
<td> </td>
</tr>
</table>
</td>
</tr>
</table> |
|
Заметьте, что размер вложенной таблицы выражен в
процентах для того, чтобы таблица полностью
заполнила предоставляемое пространство.
Итак, для того, что бы сделать тонкую рамку
придется немного потрудиться, но ваши труды
окупятся с лихвой, когда вы увидите, насколько
сильно преобразится ваша страница, где будет
использована таблица с элегантной тонкой рамкой. |
Жесткий и резиновый
дизайн.
Для начала стоит объяснить, что обозначает
словосочетания "жесткий дизайн" и
"резиновый дизайн".
Жесткий дизайн - дизайн, при котором все части и
значения размеров элементов страницы строго
фиксированы.
Резиновый дизайн - один или более элемент
страницы не фиксирован и может изменять свою
форму в зависимости от размеров окна.
Начнем с жесткого дизайна, который является
самым простым и наиболее распространенным.
Примером жесткого дизайна является
непосредственно этот сайт. В каком бы разрешении
вы не просматривали бы страницу, она все равно
будет выглядеть одинаково. Для этой страницы
оптимальное разрешение - 800х600, если её
просматривать в 640х480 внизу страницы появится
ползунок (scroll bar), а в 1024х768 - страница занимает
лишь часть экрана (посередине).
Размер ячеек строго фиксирован и не изменяется в
зависимости от размеров окна.
Типичный пример: фиксированная таблица с
четырьмя ячейками.
|
<table width="200"
cellspacing="0" cellpadding="0" height="200">
<tr>
<td bgcolor="#000066" width="100"
height="100"> </td>
<td bgcolor="#006600" width="100"
height="100"> </td>
</tr>
<tr>
<td bgcolor="#006666" width="100"
height="100"> </td>
<td bgcolor="#660000"> </td>
</tr>
</table>
|
|
|
Повторюсь, жесткий (фиксированный)
дизайн прост в исполнении, а вот для того, чтобы
создать действительно стоящую страницу,
необходимо приложить некоторые усилия, и
использовать резиновый дизайн.
Попробуйте изменять размеры окна, и вы увидите,
что страница меняется вместе с окном броузера.
Для того, что бы достичь такого результата,
необходимо выставлять значения размеров таблицы
в процентах:
|
<table width="80%" border="1"
cellspacing="0" cellpadding="0" height="200">
<tr bgcolor="#000066">
<td> </td>
</tr>
</table>
|
|
Кроме того, в процентах можно выставлять
не только размеры таблицы и ячеек, но и картинок:
<img src="images/logo.jpg" width=100% height=100% > |
|