• Авторизация
Дневник Kuma_1 Лента друзей - Дневник - Полная версия


Таблицы: Теги, атрибуты и значения. 14-11-2016 00:01 к комментариям - к полной версии - понравилось!


Теги, атрибуты и значенияПояснения к тегам, атрибутам и значениям
< table>< /table> Данный парный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него.
< table border="2"> задает рамку указанной ширины (в пикселах) вокруг всей таблицы, если атрибут border отсутствует или его значение равно 0 – границ не будет.
< table width="800"> задает ширину таблицы в пикселах от ширины экрана
< table width="%"> задает ширину таблицы % от ширины экрана
< table align="center" > задает выравнивание таблицы: слева (right), справа (left), по центру (center)
< table cellpadding="10"> задает расстояние в пикселях между текстом и внутренней границей ячейки таблицы
< table cellspacing="5"> определяет расстояние между ячейками таблиц, а также между границами ячеек и границей таблицы
< table bgcolor="#$$$$$$"> задает цвет фона ячеек таблицы
< table background-color:"#$$$$$$"> заливает фон таблицы рисунком
< table color:"#$$$$$$"> определяет цвет текста
Пример кода таблицы с несколькими параметрами:

< table border="1" width="60%" align="center" cellpadding="5" cellspacing="0" bgcolor="#ffffff" color:"#000000" > < /table>
< tr> < /tr> Строка таблицы. Таблицы формируются построчно. Количество горизонтальных строк таблицы определяется количеством парных тегов < tr>< /tr>. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать параметр:
< tr align=left|right| center| middle|bottom> выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center)
< tr valign=middle|bottom> выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle)
< tr bgcolor="#$$$$$$"> задает цвет строки
< td>< /td> Ячейка таблицы (должна быть внутри строки).
Элемент (td) создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги (td)(/td), расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек (td) должно быть равно количеству пар ячеек (th). Для элемента доступны атрибуты:
< td align=left|right|center| middle|bottom> выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center), вверх (top), вниз (bottom), по центру (middle)
< td width="5"> задает ширину столбца в пикселах
< td width="30%"> задает ширину столбца в процентном соотношении, где за 100% принимается ширина таблицы
< td height ="10"> задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты
< td bgcolor="#$$$$$$"> Цвет фона ячейки
< td color="#$$$$$$"> Цвет текста ячейки
< td> &*nbsp; < /td> Символ пробела &*nbsp; в этом месте заполняет пустое пространство (без текста) внутри ячейки.
< td nowrap> Без перевода строки
< td colspan="?"> объединение ячеек столбцов (по горизонтали)
< td rowspan="?"> объединение ячеек строк (по вертикали)
< th>< /th> Заголовок таблицы (как данные, но жирный шрифт и центровка). Элемент < th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов < th>< /th>. Для элемента доступны атрибуты
< th align=left|right|center| middle|bottom> выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center), вверх (top), вниз (bottom), по центру (middle)
< th width="5"> задает ширину столбца в пикселах
< th width="30%"> задает ширину столбца в процентном соотношении, где за 100% принимается ширина таблицы
< th height ="10"> задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты
< th bgcolor="#$$$$$$"> Цвет фона ячейки
< th color="#$$$$$$"> Цвет текста ячейки
< th nowrap> Без перевода строки
< th colspan="?"> объединение ячеек столбцов (по горизонтали)
< th rowspan="?"> объединение ячеек строк (по вертикали)
< caption>< /caption> Заглавие таблицы.
Элемент < caption> создает подпись таблицы. Добавляется непосредственно после тега < table>, вне строки или ячейки.
< caption align=top|bottom> задает расположение заглавия (сверху/снизу таблицы)
< colgroup> < /colgroup> Элемент < colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки.
Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки.
Добавляется непосредственно после тегов < table> и < caption>, вне строки или ячейки.

Элемент < col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа.
Позволяет задавать свойства столбцов для каждого столбца в пределах элемента < colgroup>.
С помощью атрибута < style> можно изменить основной цвет фона ячеек.
Для элемента < col> доступен атрибут span, задающий количество столбцов для объединения.
< colgroup>
< col span="2" style="background:Khaki"> -- С помощью этой конструкции задаем цвет фона для первых двух столбцов
< col style="background-color:LightCyan"> -- Задаем цвет фона для следующего(щих) столбца таблицы
< /colgroup>
За границы таблицы отвечают два параметра:
frame - задает вид рамки вокруг таблицы и может принимать следующие значения:
void рамки нет
above только верхняя рамка
below только нижняя рамка
hsides только верхняя и нижняя рамки
vsides только левая и правая рамки
lhs только левая рамка
rhs только правая рамка
box все четыре части рамки
rules - задает вид внутренних границ таблицы и может принимать следующие значения:
none между ячейками нет границ
rows границы только между строками
cols границы только между столбцами
all отображать все границы
groups границы только между группами строк и группами столбцов

ВНИМАНИЕ!!!
Если вы цитируете этот пост
обязательно перед тем как опубликовать цитату, УБЕРИТЕ галку с
"Сохранять переводы строк в тексте."
Иначе расположение текста и таблиц
в процитированном вами посте исказиться.



вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Таблицы: Теги, атрибуты и значения. | Kuma_1 - Цитатник «Копилочка» - с миру по нитке... | Лента друзей Kuma_1 / Полная версия Добавить в друзья Страницы: раньше»