Отправляет email-рассылки с помощью сервиса Sendsay

Сайтостроительство. Раскрутка. Практические решения

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Ноябрь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
26.11.2002
11:26:34
15:26:42
27
28
29
30
Автор
Александр Левитас

Статистика

10.020 подписчиков
-11 за неделю
←   Все выпуски   →

Сайтостроительство. Практические решения.


Информационный Канал Subscribe.Ru

Здравствуй дорогой читатель!
Сегодня мы поговорим о том, как можно использовать таблички.
Итак, начнем...

Красивые таблицы.

Уже давно так сложилось, что страничку лучше всего размечать таблицами, они очень удобны для этого. Сначала обратимся к специфике HTML и опишем теги и атрибуты таблицы, для того что бы не возникало в дальнейшем вопросов.
Основной синтаксис:
<TABLE>
строки (элементы TR)
</TABLE>
Возможные атрибуты

Имя атрибута Смысл
ALIGN Горизонтальное выравнивание всей таблицы (left,center,right)
WIDTH Ширина всей таблицы (в пикселях или процентах)
BORDER Ширина рамки (в пикселях)
CELLSPACING Промежуток между ячейками (в пикселях)
CELLPADDING Промежуток между содержимым ячейки и рамкой вокруг ячейки (в пикселях)
BGCOLOR Цвет фона

Теперь строки и столбцы
<TR></TR> - строка
<TD></TD> - столбец
Возможные атрибуты для строк и столбцов

Имя атрибута Смысл
ALIGN Горизонтальное выравнивание всей таблицы (left,center,right)
VALIGN Вертикальное выравнивание (top,middle,bottom,baseline)
WIDTH Ширина строки (в пикселях)
HEIGHT Высота строки (в пикселях)
BGCOLOR Цвет фона

В таблицах описаны не все возможные атрибуты, подробнее можно прочитать в спецификации HTML.
Хватит на этом понятий, теперь будем конкретно дизайнить. И так поехали.
Допустим мы хотим сделать красивые таблички, но пока без использовании графики. Что это нам это даст. Во первых - в скорости загрузки странички. А во вторых, графику всегда можно наложить после, никуда она от нас не денется.
Создадим такой файл и назовем его table.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="240" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><b>Новости</b></td>
</tr>
<tr>
<td>Мы открыли рассылку новостей.<br>Этот и другие материалы вы можете прочитать на сайте http://st5.hut.ru/news/</td>
</tr>
</table>
</body>
</html>
В окне браузера он будет выглядеть следующим образом:

Новости
Мы открыли рассылку новостей.
Материалы вы можете прочитать на сайте http://st5.hut.ru/design/

Начнем подбор цвета к нашей табличке, уж больно она некрасиво выглядит:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="240" border="0" cellspacing="1" cellpadding="1" bgcolor="#336699">
<tr>
<td align="center"><b><font size="2" face="Tahoma" color="#FFFFFF">Новости</font></b></td>
</tr>
<tr>
<td bgcolor="#E0F0FF"><font size="2">Мы открыли рассылку новостей.<br>
Этот и другие материалы вы можете прочитать на сайте http://st5.hut.ru/news/</font></td>
</tr>
</table>
</body>
</html>
Теперь таблица выглядит так:

Новости
Мы открыли рассылку новостей.
Материалы вы можете прочитать на сайте http://st5.hut.ru/design/

Что мы сделали и что изменили?
У таблицы сделали цвет фона синим (bgcolor="#336699"), промежутки между ячейками в один пиксель (cellspacing="1") и отодвинули со всех сторон надписи на один пиксель (cellpadding="1").
Первую строку таблицы оставили основным цветом (таким же, как и фон таблицы), изменили шрифт, цвет и размер надписи "Новости" (<font size="2" face="Tahoma,Arial" color="#FFFFFF">).
Вторую строку сделали голубым, ближе к белому, цветом (<td bgcolor="#E0F0FF">).
Рамка вокруг появилась за счет изменения цвета во второй строке. Если изменить цвет первой строки на цвет, как и во второй строке (<td bgcolor="#E0F0FF">), то и заголовок, и следующая надпись будут обведены со всех сторон рамкой цвета фона.
Сделаем закругленные концы в заголовке нашей таблички. Для этого создадим такие графические элементы: и - у этих картинок есть прозрачный цвет, это синий. И теперь вставим эти картинки в нашу табличку. Для этого добавим с права и слева по колонке. Вставим графические элементы в в правую и вслевую ячейку верхней строки. Посмотрим, что получилось.

Новости
  Мы открыли рассылку новостей.
Материалы вы можете прочитать на сайте http://st5.hut.ru/design/		  

Давай те посмотрим код таблички:
<table width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#336699" align="center">
<tr>
<td align="left" valign="top" width="10"><img src="lc.gif" width="10" height="11"></td>
<td align="center" width="220"><b><font size="2" face="Tahoma" color="#FFFFFF">Новости</font></b></td>
<td align="right" valign="top" width="10"><img src="rc.gif" width="10" height="11"></td>
</tr>
<tr>
<td bgcolor="#E0F0FF">&nbsp;</td>
<td bgcolor="#E0F0FF"><font size="2">Мы открыли рассылку новостей.<br>
Материалы вы можете прочитать на сайте http://st5.hut.ru/design/</font></td>
<td bgcolor="#E0F0FF">&nbsp;</td>
</tr>
</table>

Видите, в пустых ячейках кода присутствует пустой символ &nbsp; от него необходимо избавиться. Можно использовать такой элемент, как прозрачный пиксел (картинка размером 1х1 с прозрачным цветом) и растянуть его по ширине картинки (в нашем случае это 10 писелей), но мы же делаем красивую табличку с рамочкой. Почему нельзя использовать пустой символ? Да потому, что при увеличении размера шрифта в браузере наша табличка расплывется и будет совсем корявой. Тогда сделаем так, создадим для правого и левого края еще две картинки: - это две линии размерами 10х1 пикселей с прозрачной основой. Вставим их табличку.

Новости
Мы открыли рассылку новостей.
Материалы вы можете прочитать на сайте http://st5.hut.ru/design/

Получилась красивая табличка, обрамленная, текст лучше выглядит за счет, того что отодвинут от края. Теперь код:

<table width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#336699" align="center">
<tr>
<td align="left" valign="top" width="10" height="17"><img src="lc.gif" width="10" height="11"></td>
<td align="center" width="220" height="17"><b><font size="2" face="Tahoma" color="#FFFFFF">Новости</font></b></td>
<td align="right" valign="top" width="10" height="17"><img src="rc.gif" width="10" height="11"></td>
</tr>
<tr>
<td bgcolor="#E0F0FF" background="ll.gif"><img src="1.gif" width="1" height="1"></td>
<td bgcolor="#E0F0FF"><font size="2">Мы открыли рассылку новостей.<br>
Материалы вы можете прочитать на сайте http://st5.hut.ru/design/</font></td>
<td bgcolor="#E0F0FF" background="rl.gif"><img src="1.gif" width="1" height="1"></td>
</tr>
<tr>
<td bgcolor="#336699" colspan="3" height="1"><img src="1.gif" width="1" height="1"></td>
</tr>
</table>

Как видно, мы использовали прозрачный пиксел для прорисовки нижней линии таблички и высоту строки в один пиксел (<td bgcolor="#336699" colspan="3" height="1"><img src="1.gif" width="1" height="1"></td>). Для правой и левой линии использован атрибут background , который задает фон ячейки таблицы, атрибут colspan объединяет солонки таблицы в одну. Может протестировать эту страничку изменя размер шрифта и Вы увидите, что сделанная табличка всегда выглядит хорошо.

Автор: SeeGo

Свои отзовы вы можете направлять по адресу: subscribe@st5.hut.ru

материалы сайта
Пятая Студия
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное