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

Исходный код таблицы


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


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

 

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

Для представления таблиц используются нескольких видов тегов HTML:

<TABLE>
которые обрамляют всю табличную спецификацию необязательный элемент
<CAPTION> специфицирующий заголовок (имя) таблицы
<
TR> специфицирующие строки таблицы теги
<TH> специфицирующие заголовки строк и столбцов
<TD>, специфицирующие данные в таблице, т.е. содержимое табличных ячеек

:: Пример 1

<TABLE>
<CAPTION>Заголовок данной таблицы</CAPTION>
<TR>
<TH>Заголовок 1 строки</TH>
<TD> Содержимое ячейки</TD>
</TR>
<TR>
<TH>Заголовок 2 строки</TH>
<TD> Содержимое ячейки</TD> </TR>
<TR>
<TH>Заголовок 3 строки</TH>
<TD>Содержимое ячейки</TD>
</TR>
</TABLE>

В результате на странице видим:

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

 

 

Каждый контейнер может иметь аргумент, определяющий способ форматирования в пределах данного элемента.

:: Пример 2

<TABLE BORDER="1">
<CAPTION>Заголовок данной таблицы</CAPTION>
<TR>
<TH ALIGN="CENTER">Заголовок 1 строки</TH>
<TD> Содержимое ячейки</TD>
</TR>
<TR>
<TH ALIGN="CENTER">Заголовок 2 строки</TH>
<TD> Содержимое ячейки</TD> </TR>
<TR>
<TH ALIGN="CENTER">Заголовок 3 строки</TH>
<TD>Содержимое ячейки</TD>
</TR>
</TABLE>

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

В примере 2 к элементу <TABLE> добавлен аргумент BORDER со значением равным единице, что придает видимую границу данной таблице.
А к элементу <TH> добавлен аргумент ALIGN со значением CENTER, что означает выравнивание по центру.

 


:: Пример 3

<TABLE BORDER="1">
<CAPTION>Заголовок данной таблицы</CAPTION>
<TR>
<TH ALIGN="CENTER">Заголовок 1 строки</TH>
<TD BGCOLOR="#CCCCCC"> Содержимое ячейки</TD>
</TR>
<TR>
<TH ALIGN="CENTER">Заголовок 2 строки</TH>
<TD BGCOLOR="#CCCCCC"> Содержимое ячейки</TD> </TR>
<TR>
<TH ALIGN="CENTER">Заголовок 3 строки</TH>
<TD BGCOLOR="#CCCCCC">Содержимое ячейки</TD>
</TR>
</TABLE>

В примере 3 к элементу <TD> добавлен аргумент BGCOLOR со значением "#CCCCCC" , которое определяет цвет фона ячеек.

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

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

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

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

 

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

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



В избранное