1ПИ / Учебник HTML / 113
.htmlУчeбник HTML.<TABLE><TD><TH><CAPTION><TR><COL><COLGROUP><THEAD><TBODY> guide
<dimas>
help On-line учебник HTML с примерами,
справочник по созданию Web-сайтов. guide
<dimas>
help Главная Учебник HTML Учебник CSS Web- mastering Раскрутка Полезности FAQ Е- mailer Взять banner bookmark Контакты Отослать ссылку
Учебник HTML >>Создание таблиц. Элемент <TABLE> Элемент <COL> Элемент <COLGROUP> Элемент <THEAD> Элемент <TBODY> Элемент <TFOOT> Элемент <TR> Элемент <CAPTION> Элемент <TH> Элемент <TD> Примеры написания таблиц.
Элемент <TABLE> Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.
В этом случае хочется предостеречь от совершения очень распространенной ошибки, когда для выравнивания текста и задания отступов дизайнеры вставляют всю страницу в одну единственную таблицу, но забывают о такой особенности, что содержимое таблицы не прорисовывается частями и посетителю придется ждать пока загрузится все содержимое таблицы, особенно досадно, если общий объем текста достаточно велик.
По правде говоря само по себе использование таблиц для визуального форматирования есть нарушение того принципа, которого рекомендует придерживаться W3C - таблицы должны использоваться только для внедрения таблиц, а позиционировать элементы необходимо при помощи слоев. При создании таблиц используется принцип вложения: между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>, создается ряд элементов <TR>, определяющих начало строки, а внутри этих элементов размещаются элементы <TD>, описывающие ячейки и <TH>, описывающие заглавные ячейки.
Элемент <TABLE> может иметь атрибуты:
bgcolor
Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background.
<TABLE bgcolor=цвет> background
Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.
<TABLE background=URL файла изображения> bordercolor
Этот атрибут задает цвет рамки, используется только с атрибутом border.
<TABLЕ border=число bordercolor=цвет > bordercolorlight
Этот атрибут задает цвет рамки, используется только с атрибутом border.
<TABLE border=число bordercolorlight=цвет> bordercolordark
Этот атрибут задает цвет рамки, используется только с атрибутом border.
<TABLE border=число bordercolordark=цвет> align
Этот атрибут задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right .
<TABLE align= способ > width
Этот атрибут задает ширину таблицы в пикселях или процентах от всего окна.
<TABLE width=число или %> border
Этот атрибут задает ширину внешнего обрамления таблицы в пикселях.
<TABLE border=число > cellspacing
Этот атрибут задает ширину внутреннего обрамления в пикселях.
<TABLE сellspacing=число > сellpadding
Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселях.
<TABLE сellpadding=число > summary
Этот необязательный атрибут задает краткое описание таблицы для некоторых браузеров.
<TABLE summary=описание > rules
Этот атрибут задает линии между ячейками.
<TABLE rules=all > none
Нет линий, значение используется по умолчанию. groups
Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL. rows
Линии отображаются только между строками. cols
Линии отображаются только между столбцами. all
Линии отображаются между строками и столбцами. frame
Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы.
<TABLE frame=void> Возможные значения: void
Сторон нет. Это значение используется по умолчанию. above
Только верхняя часть. below
Только нижняя часть. hsides
Только верхняя и нижняя часть. vsides
Только левая и правая части. lhs
Только левая часть. rhs
Только права часть. box
Все четыре части. border
Все четыре части. id
Этот атрибут задает имя для ссылки.
<TABLE id=имя>
Элемент <COL> Элемент <COL> используется с целью задания колонок таблицы, может иметь атрибуты: width
Этот атрибут задает ширину ячеек в колонке.
<COL width=число> bgcolor
Этот атрибут задает цвет фона ячеек.
<СOL bgcolor= цвет > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<СOL align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<СOL valign=значение> id
Этот атрибут задает имя для ссылки.
<COL id=имя> Элемент <COLGROUP> Элемент <COLGROUP> используется с целью задания групп колонок таблицы, может иметь атрибуты: bgcolor
Этот атрибут задает цвет фона ячеек.
<COLGROUP bgcolor= цвет > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<COLGROUP align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<COLGROUP valign=значение> span
Этот атрибут задает количество колонок в группе.
<COLGROUP span=число> width
Этот атрибут задает ширину ячеек в колонках.
<COLGROUP width=число> id
Этот атрибут задает имя для ссылки.
<COLGROUP id=имя> Элемент <THEAD> Элемент <THEAD> используется с целью логического задания групп строк для верхней "шапки".
<THEAD ><TR ><TD >...<TD >...</THEAD> bgcolor
Этот атрибут задает цвет фона ячеек.
<THEAD bgcolor= цвет > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<THEAD align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<THEAD valign=значение> id
Этот атрибут задает имя для ссылки.
<THEAD id=имя> Элемент <TBODY> Элемент <TBODY> используется с целью логического задания групп строк "тела" таблицы.
<TBODY ><TR ><TD >...<TD >...</TBODY> bgcolor
Этот атрибут задает цвет фона ячеек.
<TBODY bgcolor= цвет > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TBODY align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TBODY valign=значение> id
Этот атрибут задает имя для ссылки.
<TBODY id=имя> Элемент <TFOOT> Элемент <TFOOT> используется с целью логического задания групп строк для нижней "шапки".
<TFOOT ><TR ><TD >...<TD >...</THEAD> bgcolor
Этот атрибут задает цвет фона ячеек.
<TFOOT bgcolor= цвет > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TFOOT align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TFOOT valign=значение> id
Этот атрибут задает имя для ссылки.
<TFOOT id=имя> Начало строки: элемент <TR> Элемент <TR> открывает строку определений ячеек и не требует конечного тэга, хотя такой элемент можно использовать для наглядности обозначения каждой строки, поддерживает атрибуты, которые задают стиль оформления всех ячеек в строке. Отдельные ячейки могут быть отформатированы иначе. bgcolor
Этот атрибут задает цвет фона ячеек.
<TR bgcolor= цвет > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TR align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TR valign=значение> id
Этот атрибут задает имя для ссылки.
<TR id=имя>
Заголовок таблицы: элемент <CAPTION> Элемент <CAPTION> задает заголовок вне рамки таблицы, имеет атрибут align, который может принимать значения top и bottom, left и right, а также id
- имя для ссылки.
<CAPTION> текст </CAPTION>
Ячейки заголовка: элемент <TH> Элемент <TH> задает ячейку, которая содержит заголовок, поддерживает атрибут id
- имя для ссылки.
<TH атрибуты > текст заголовка
Ячейки с данными <TD> Элемент <TD> определяет ячейку с данными bgcolor
Этот атрибут задает цвет фона ячейки.
<TD bgcolor= цвет > width
Этот атрибут задает ширину ячейки в пикселях или %.
<TD width= число или % > height
Этот атрибут задает высоту ячейки в пикселях.
<TD height=значение> rowspan
Этот атрибут задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
<TD rowspan=количество строк > colspan
Этот атрибут задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
<TD colspan=количество колонок > align
Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
<TD align= способ > valign
Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
<TD valign=значение> nowrap
Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывный мнемонический объект id
Этот атрибут задает имя для ссылки.
<TD id=имя>
Исходные коды некоторых таблиц. Таблица с общим заголовком и заголовками в колонках.
<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </CAPTION>
<TR><TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR><TD>Ячейка 1 <TD>Ячейка 2
<TR><TD>Ячейка 3 <TD>Ячейка 4
</TABLE> Заголовок таблицы Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Таблица с общим заголовком и заголовками в колонках, и в строках.
<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </caption>
<TR><TH bgcolor="white">
<TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR<TH bgcolor="white">Заголовок 3
<TD>Ячейка 1
<TD>Ячейка 2
<TR><TH bgcolor="white">Заголовок 4
<TD>Ячейка 3
<TD>Ячейка 4
</table> Заголовок таблицы Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1 Ячейка 2 Заголовок 4 Ячейка 3 Ячейка 4
Таблица с объединенными ячейками в колонках, и в строках.
<TABLE border=4 cellspacing=0 >
<CAPTION>Заголовок таблицы </caption>
<TR><TD bgcolor="white">Заголовок 1
<TD bgcolor="white">Заголовок 2
<TR><TD rowspan=3 bgcolor="white">Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=2 bgcolor="white" align="center">Ячейка 5
</table> Заголовок таблицы Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5
Более сложное объединение ячеек в колонках, и в строках.
<TABLE border=4 cellspacing=0 >
<TR><TD bgcolor="white">Заголовок 1
<TD bgcolor="white">Заголовок 2
<TD bgcolor="white">Заголовок 3
<TR><TD rowspan=4 colspan=2 bgcolor="white">Ячейка 1
<TR><TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=3 bgcolor="white" align="center">Ячейка 5
</table> Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5
Таблица в ячейке таблицы.
<TABLE border=4 cellspacing=0>
<TR><TD bgcolor="white">Ячейка 1
<TD>
<TABLE border=2>
<TR><TD>Ячейка 2-1
<TD>Ячейка 2-2
<TR><TD>Ячейка 3-2
<TD>Ячейка 4-2
</table>
<TR><TD bgcolor="white">Ячейка 3-1
<TD bgcolor="white">Ячейка 4-1
</table> Ячейка 1 Ячейка 2-1 Ячейка 2-2 Ячейка 3-2 Ячейка 4-2 Ячейка 3-1 Ячейка 4-1
Таблица, состоящая из одной ячейки.
<TABLE border=4 cellspacing=3 cellpadding=10>
<TR><TD bgcolor="white">Одна ячейка
</table> Одна ячейка
Таблица размещена в центре, толщина рамки 1 пиксель, имеет синий фон, верхний и нижний, по-разному отформатированные заголовки, с красным и aqua фоном, таблица разбита на две неравные части, одна из них - левая колонка имеет белый фон и текст, располагающийся по центру, а вторая представляет собой группу из трех колонок, цвет фона не указан, поэтому отображен общий фон таблицы с текстом, сдвинутым влево.
<TABLE bgcolor="#0000ff" border="1"
align="center" rules="all" frame="box">
<caption align="top"> Заголовок таблицы </caption>
<COL width="100" bgcolor="#ffffff" align="center">
<COLGROUP span="3" width="50">
<CAPTION align="top">CAPTION</CAPTION>
<THEAD bgcolor="#ff0000">
<TR><TD><TD><TD><TD>
</THEAD>
<TFOOT bgcolor="aqua">
<TR><TD><TD><TD><TD>
</TFOOT>
<TBODY>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
</TBODY>
</TABLE> Заголовок таблицы .... .... .... .... .... .... ....
Взять banner bookmark Контакты Отослать ссылку Раскрутка Полезности FAQ Е- mailer Главная Учебник HTML Учебник CSS Web- mastering guide
<dimas>
help u="u227.69.spylog.com";d=document;nv=navigator;na=nv.appName;t="";p=1; sz=" width=88 height=31 "; hl=history.length;d.cookie="b=b";c=0; bv=Math.round(parseFloat(nv.appVersion)*100); if (d.cookie) c=1;n=(na.substring(0,2)=="Mi")?0:1; if((n==0)||(bv >= 300)){rn=Math.random();t=(new Date()).getTimezoneOffset();} else {rn=0;} z="p="+p+"&rn="+rn+"&t="+t+"&c="+c+"&hl="+hl; if (self != top) { fr=1;} else { fr=0;} r=escape(d.referrer);r1=""; sl="1.0";h=0; pl="";sl="1.1"; if((n==1) && (bv >= 300)) { for(var i = 0; i < nv.plugins.length; i++) pl += nv.plugins[i].name+":"; } j = (navigator.javaEnabled() ? "Y" : "N"); sl="1.2";s=screen;wh=s.width+'x'+s.height; px=(n==0)?screen.colorDepth:screen.pixelDepth;z+="&wh="+wh+"&px="+px; sl="1.3" y=""; y+=""; y+=""; y+=""; d.write(y); On-line учебник HTML с примерами,
справочник по созданию Web-сайтов. guide
<dimas>
help