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

999.9 школа дизайна Выпуск 22 (HTML)


Добро пожаловать в школу дизайна


школа web-дизайна
Выпуск 22 ( HTML )
бог даст не последний

 

Здравствуйте,

Продолжим рассмотрение способов оформления таблицы:

:: пример 4

<TABLE border="1" bordercolor="#FFFFFF"
bgcolor="#FF0000">
<CAPTION>
<font color="#FFFFFF"> Заголовок данной таблицы</font>
</CAPTION>
<TR>
<TH width="205" ALIGN=CENTER><font color="#FFFFFF">Заголовок 1 строки</font></TH>
<TD width="306" bgcolor="#CCCCCC"> <font color="#003399">Содержимое
ячейки</font></TD>
</TR>
<TR>
<TH ALIGN=CENTER><font color="#FFFFFF">Заголовок 2 строки</font></TH>
<TD bgcolor="#CCCCCC"> <font color="#003399">Содержимое ячейки</font></TD>
</TR>
<TR>
<TH ALIGN=CENTER><font color="#FFFFFF">Заголовок 3 строки</font></TH>
<TD bgcolor="#CCCCCC"> <font color="#003399">Содержимое ячейки</font></TD>
</TR>
</TABLE>

В примере 4 к элементу <TABLE> добавлен аргумент bordercolor="#FFFFFF" , который дает инструкцию для браузера нарисовать контур нашей таблицы белым цветом;
и аргумент
bgcolor="#FF0000" ,
который определяет красный цвет фона всей таблицы.

Контейнер <font>
указывает как отобразить текстовые данные.
<font color="#FFFFFF"> означает написание шрифта белым цветом для заголовков строки.
<font color="#003399"> означает написание шрифта темно-синим цветом для содержимого ячейки.
Видим в результате

 
Заголовок данной таблицы
Заголовок 1 строки Содержимое ячейки
Заголовок 2 строки Содержимое ячейки
Заголовок 3 строки Содержимое ячейки


:: ???


Необходимо остановиться на одном важном моменте. В примере выше мы должны были получить фон всей таблицы красного цвета. Почему же содержимое ячеек отображается серым цветом. Это вопрос объясняет иерархическая структура расположения элементов и приоритет действия их аргументов.
Каждая ячейка с данными определена элементом
<TD>, который имеет аргумент bgcolor="#CCCCCC" задающий серый цвет фона данной ячейки.
Этот локальный аргумент, как видно, отменяет действие аргумента
bgcolor="#FF0000" глобального элемента <TABLE>, но только в пределах отдельной ячейки.
Если, скажем, в ячейке третьей строки убрать аргумент
bgcolor="#CCCCCC" из контейнера <TD>, то данная ячейка будет иметь фон красного цвета, как и вся таблица.


<TABLE border="1" bordercolor="#FFFFFF" bgcolor="#FF0000">
<CAPTION>
<font color="#FFFFFF"> Заголовок данной таблицы</font>
</CAPTION>
<TR>
<TH width="205" ALIGN=CENTER><font color="#FFFFFF">Заголовок 1 строки</font></TH>
<TD width="306" bgcolor="#CCCCCC"> <font color="#003399">Содержимое
ячейки</font></TD>
</TR>
<TR>
<TH ALIGN=CENTER><font color="#FFFFFF">Заголовок 2 строки</font></TH>
<TD bgcolor="#CCCCCC"> <font color="#003399">Содержимое ячейки</font></TD>
</TR>
<TR>
<TH ALIGN=CENTER><font color="#FFFFFF">Заголовок 3 строки</font></TH>
<TD><font color="#003399">Содержимое ячейки</font></TD>
</TR>
</TABLE>


Видим в результате




Заголовок данной таблицы
Заголовок 1 строки Содержимое ячейки
Заголовок 2 строки Содержимое ячейки
Заголовок 3 строки Содержимое ячейки


Оставляем Вас в ожидании продолжения...

Команда школы дизайна

Рекомендуем посмотреть одну из лучших работ слушателей коммерческого отделения www.mobile4you.info !!!

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

:: тематический архив лекций по web-дизайну (машина времени)

Выпуск 1 : Ради чего создается свой сайт (10 причин для владения сайтом)
Выпуск 2 : Три кита - основа любого сайта (четвертый кит-популярность)
Выпуск 3 : Текстовое содержание - еда для "пауков" (дайте им "хлеба")
Выпуск 4 : Графика с альтернативным текстом (комментарии к фото)
Выпуск 5 : Успех в подборе ключевых слов (ключи к вратам рая)
Выпуск 6 : Цвет фона и текста должен радовать глаз (забота о ближнем)
Выпуск 7 : Смена цветов просто двойным кликом (на любой вкус и цвет)
Выпуск 8 : Таблица "правильных" цветов (рекомендации "акулы дизайна")
Выпуск 9 : Стильный дизайн стандартной кнопки (мелочь, а как приятно)
Выпуск 10: Выбор дальнейшего пути (я с детства выбрал верный путь)



В избранное