ПРОГРАММИРОВАНИЕ! СОЗДАНИЕ САЙТОВ И ИХ ОПТИМИЗАЦИЯ
| Главная » Статьи » Создание Сайтов » Ucoz |
Учебник HTML >>Создание таблиц.
Учебник 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> используется с целью задания групп колонок таблицы, может иметь атрибуты: width Этот атрибут задает ширину ячеек. <COLGROUP width=число> 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 Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывный мнемонический объект &nbsp; 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> | |
| Просмотров: 5122 | Комментарии: 3 | Рейтинг: 5.0/1 |
| Всего комментариев: 3 | ||||
| ||||
