русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Создание таблиц в HTML-документе


Дата добавления: 2015-07-09; просмотров: 1186; Нарушение авторских прав


Таблица в HTML-документах задаётся парным тегом <TABLE>…</TABLE>. Она может содержать заголовок таблицы, определяемый парным тегом <CAPTION>…</CAPTION>, и строки таблицы, задаваемые парным тегом <TR>…</TR>.

Строки таблицы могут содержать ячейки двух типов. Ячейки в заголовках строк и столбцов задают парным тегом <TH>…</TH>, а обычные ячейки – <TD>...</TD>. Теги </TR>, </TD> и </TH> можно опускать. Атрибуты тегов, используемые при создании таблиц, приведены в таблице 3.5.

Таблица 3.5.Атрибуты тегов таблиц

Атрибут Возможные значения Элемент Назначение
ALIGN=тип LEFT CENTER RIGHT Таблица, заголовок, строка, ячейка Выравнивание таблицы, данных в строках и ячейках по горизонтали
BORDER=n   Таблица Ширина рамки таблицы в пикселах
VALIGN=тип TOP CENTER BOTTOM BASELINE Строка, ячейка Вертикальное выравнивание данных в ячейках строки
WIDTH=n   Таблица, ячейка Ширина таблицы в пикселах
HEIGHT=n   Ячейка Минимальная высота ячейки
CELLPADDING=n   Таблица Зазор в пикселах между границами ячейки и ее содержимым
CELLSPACING=n   Таблица Интервал в пикселах между ячейками таблицы
COLSPAN=n   Ячейка Ячейка занимает n соседних столбцов
ROWSPAN=n   Ячейка Ячейка занимает n соседних строк
WIDTH=n   Таблица, ячейка Ширина ячейки в пикселах
BGCOLOR=   Таблица, ячейка Цвет фона

Теги ячеек <TH> и <TD> имеют одинаковые с тегом строки <TR> атрибуты выравнивания. Значения атрибутов, установленные для отдельных ячеек таблицы, будут иметь приоритет над значениями этих же атрибутов, установленных в целом для строки.



Пример простейшей таблицы:

<TABLE WIDTH="200" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>1</TD>
<TD>2</TD>

</TR>

 

<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>

При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну ячейку. Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.

Примеры таблиц, в которых используется слияние ячеек.

<TABLE WIDTH="150" BORDER="2" CELLPADDING="0" CELLSPACING="0">

<TR>

<TD ROWSPAN="2">1</TD>

<TD>2</TD>

</TR>

<TR>

<TD>3</TD>

</TR>

<TR ALIGN="CENTER">

<TD>4</TD>

<TD>5</TD>

</TR>

</TABLE>

 

 

<TABLE WIDTH="200" BORDER="1" CELLPADDING="0" CELLSPACING="2">

<TR>

<TD>1</TD>

<TD ALIGN="CENTER" ROWSPAN="2">3</TD>

</TR>

<TR>

<TD>2</TD>

<TR ALIGN="CENTER">

<TD>4</TD>

<TD>5</TD>

</TR>

</TABLE>

 

 

<TABLE WIDTH="250" BORDER="1" CELLPADDING="7" CELLSPACING="1">

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

<TR>

<TD COLSPAN="2" ALIGN="CENTER">Список</TD>

</TR>

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

<TR>

<TD ALIGN="RIGHT">1</TD>

<TD>2</TD>

</TR>

<TR ALIGN="CENTER">

<TD>3</TD>

<TD>4</TD>

</TR>

</TABLE>

Пример создания таблицы в Web-документах:

<HTML>

<HEAD>

<TITLE>Созданиетаблицы</TITLE>

</HEAD>

<BODY BGCOLOR="#E6E6FA">

<TABLE BORDER="2" ALIGN="CENTER" BGCOLOR="#D1EEEE"

CELLPADDING="3">

<CAPTION><H2><FONT COLOR="#00008B">Методическая и научная

работа преподавателей кафедры ВИТ <BR> за 2009/10 учебный год </H2></FONT></CAPTION><BR>

<TR BGCOLOR="#A4D3EE"><TH HEIGHT="70" ROWSPAN="2">№

<TH ROWSPAN="2">Ф.И.О.<TH ROWSPAN="2">Опубликовано

учебников<TH ROWSPAN="2">Издано методических указаний

<TH COLSPAN="3">Опубликовано<TH ROWSPAN="2">Подано заявок

на изобретение</TR>

<TR BGCOLOR="#A4D3EE"><TH>Статей в центральной печати

<TH>Статей в сборниках университета<TH>Тезисов доклада</TR>

<TR ALIGN="CENTER"><TD>1.<TD ALIGN="LEFT">Рыбанов<TD>1

<TD>2<TD>3<TD>4<TD>5<TD>6</TR>

<TR ALIGN="CENTER"><TD>2.<TD ALIGN="LEFT">Лясин<TD>1<TD>2

<TD>3<TD>4<TD>5<TD>6</TR>

<TR ALIGN="CENTER"><TD>3.<TD ALIGN="LEFT">Свиридова<TD>1

<TD>2<TD>3<TD>4<TD>5<TD>6</TR>

</TABLE>

</BODY>

</HTML>

В результате получится изображение страницы на рис. 3.5.

Рис. 3.5. Пример таблицы на странице Создание таблицы



<== предыдущая лекция | следующая лекция ==>
Задание №6 | СОЗДАНИЕ WEB-ДОКУМЕНТОВ В РЕДАКТОРЕ WEBEDITOR


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.105 сек.