Теги table, tr, td, th, thead, tbody, tfoot, caption, colgroup, col
QR код

Теги table , tr , td , th , thead , tbody , tfoot , caption , colgroup , col формирующие таблицу с атрибутами border , colspan , rowspan , cellspacing , cellpadding , align , valign , frame , border-collapse , style
Главная страница сайта .
srcsrc

Тег - table , tr , td , th , thead , tbody , tfoot , caption , colgroup , col
border , colspan , rowspan , cellspacing , cellpadding , align , valign , frame , border-collapse
inf

Теги формирующие таблицу

infПримеры , подробности , детали

Пример написания таблицы :
<table border="1" style="width: 100px;">
<tr>
<td>Содержание</td>
</tr>
</table>
Пример таблицы .
Содержание
Тег border="1" в составе тега table , прорисовывает бордюр как таблицы так и ячейки таблицы , толщиной 1px .
По умолчанию содержимое ячеек таблицы образованных тегом td прижимается к левой стороне ячеек .
 Пример написания таблицы :
<table border="1" style="width: 200px;">
<tr><td rowspan="2">Содержание 1</td><td>Содержание 2</td></tr>
<tr><td>Содержание 3</td></tr>
</table>
Пример таблицы . ( в таблице использован тег rowspan="2" )
Содержание 1Содержание 2
Содержание 3
Первая строка таблицы с тегом rowspan="2" прописанном теге ячейки таблицы , растягивает ячейку строки на высоту всей таблицы , замещает две ячейки одной . То же самое место по высоте в строках таблицы занимают две ячейки .
По умолчанию содержание ячеек центруется по высоте .
Пример написания таблицы :
<table border="1" style="width: 200px;">
<tr>
<td colspan="2">Содержание 1</td>
</tr>
<tr>
<td>Содержание 2</td><td>Содержание 3</td>
</tr>
</table>
Пример таблицы . ( в таблице использован тег colspan="2" )
Содержание 1
Содержание 2Содержание 3
Тег border="1" в составе тега table , прорисовывает бордюр как таблицы так и каждой отдельной ячейки таблицы , толщиной 1px .
Первая строка таблицы с тегом colspan="2" прописанном теге ячейки таблицы , растягивает ячейку строки на длинну всей таблицы , замещает две ячейки одной . То же самое место во второй строке таблицы занимают две ячейки .
По умолчанию длинна ячеек во второй строке составляет по 50 % от общей длинны таблицы , при условии что содержание двух ячеек второй строки равноценны по длинне и к тегам не применяются стили длинны .
 Пример написания таблицы :
<table border="1" style="width: 200px;">
<tr><td colspan="2">Содержание 0</td></tr>
<tr><td rowspan="2">Содержание 1</td><td>Содержание 2</td></tr>
<tr><td>Содержание 3</td></tr>
</table>
Пример таблицы . ( в таблице использованы теги colspan="2" и rowspan="2" )
Содержание 0
Содержание 1Содержание 2
Содержание 3
Первая строка таблицы с тегом colspan="2" прописанном теге ячейки таблицы , растягивает ячейку строки на длинну всей таблицы , замещает две ячейки одной .
Вторая строка таблицы с тегом rowspan="2" прописанном теге ячейки таблицы , растягивает ячейку строки на высоту двух строк таблицы , замещает две ячейки одной . То же самое место по высоте в двух нижних строках таблицы занимают две ячейки .
Пример написания таблицы :
<table cellspacing="0" border="1" style="width: 200px;">
<tr><td colspan="2">Содержание 0</td></tr>
<tr><td rowspan="2">Содержание 1</td><td>Содержание 2</td></tr>
<tr><td>Содержание 3</td></tr>
</table>
Пример таблицы . ( таблица дополнена тегом cellspacing="0" )
Содержание 0
Содержание 1Содержание 2
Содержание 3
Предыдущий пример дополнен тегом cellspacing со значением равным 0 , прописанном в строке тега table , в следствие чего схлопываются отступы бордюров ячеек и таблицы между собой , в следсвие чего толщина бордюра таблицы и ячеек складываясь становится равной 2 px .
 Пример написания таблицы :
<table cellspacing="0" border="1" style="width: 200px; border-collapse: collapse;">
<tr><td colspan="2">Содержание 0</td></tr>
<tr><td rowspan="2">Содержание 1</td><td>Содержание 2</td></tr>
<tr><td>Содержание 3</td></tr>
</table>
Пример таблицы . ( таблица дополнена стилем border-collapse: collapse; )
Содержание 0
Содержание 1Содержание 2
Содержание 3
Предыдущий пример дополнен стилем border-collapse со значением collapse , прописанном в строке тега table , общие бордюры таблицы и ячеек сливаются и отображаются как один бордюр толщиной 1px . Стиль border-collapse так же отменяет действие тега frame
Пример написания таблицы :
<table cellspacing="0" border="1" style="width: 200px; border-collapse: collapse;">
<caption>Название таблицы</caption>
<tr>
<td colspan="2">Содержание 0</td>
</tr>
<tr>
<tr>
<td rowspan="2">Содержание 1</td><td>Содержание 2</td>
</tr>
<tr>
<td>Содержание 3</td>
</tr>
</table>
Пример таблицы . ( таблица дополнена тегом caption )
Название таблицы
Содержание 0
Содержание 1Содержание 2
Содержание 3
Предыдущий пример дополнен тегом caption , образующим название таблицы расположенном по центру и отображаемым снаружи таблицы .
 Пример написания таблицы :
<table cellspacing="0" border="1" style="width: 200px; border-collapse: collapse;">
<caption>Название таблицы</caption>
<thead><tr><th>Заголовок таблицы</th></tr></thead>
<tr><td colspan="2">Содержание 0</td></tr>
<tr><td rowspan="2">Содержание 1</td><td>Содержание 2</td></tr>
<tr><td>Содержание 3</td></tr>
</table>
Пример таблицы . ( таблица дополнена тегами thead и th )
Название таблицы
Заголовок таблицы
Содержание 0
Содержание 1Содержание 2
Содержание 3
Предыдущий пример дополнен тегоами thead и th , образующими заголовок таблицы .
Тег thead включающий в себя теги tr и th образует заголовок отображаемый первой строкой в таблице , независимо от фактического расположения этого тега , независимо от того какой строкой он стоит .
Тег ячейки th применяемый в теге заглоловка , центрует надпись заголовка и выделяет его жирным шрифтом . Вместо тега th может быть применён тег td , равно тег td в строках таблицы может быть заменяться тегом th .
Пример написания таблицы :
<table cellspacing="0" border="1" style="width: 200px; border-collapse: collapse;">
<caption>Название таблицы</caption>
<thead><tr><th>Заголовок таблицы</th></tr></thead>
<tfoot><tr><th>Footer таблицы</th></tr></tfoot>
<tr>
<td colspan="2">Содержание 0</td>
</tr>
<tr>
<tr>
<td rowspan="2">Содержание 1</td><td>Содержание 2</td>
</tr>
<tr>
<td>Содержание 3</td>
</tr>
</table>
Пример таблицы . ( таблица дополнена тегами tfoot и th )
Название таблицы
Заголовок таблицы
Footer таблицы
Содержание 0
Содержание 1Содержание 2
Содержание 3
Предыдущий пример дополнен тегами tfoot и th , образующими низ таблицы . Тег tfoot включающий в себя теги tr и th образует footer таблицы отображаемый в конце таблицы последней строкой , независимо от фактического расположения этого тега , независимо от того какой строкой он стоит .
Тег th в теге tfoot , центрует надпись заголовка и выделяет его жирным шрифтом .
В примере footer прописан второй строкой но отображается последней строкой .
В таблице так же может применяться тег tbody , как " контейнер " для строк не входящих в состав тегов thead и tfoot . Но он не оказывает ни какого влияния на порядок отображения строк в таблице .
Например часть строк может быть включена в состав тега tbody , другая часть может быть вне тега tbody . При этом строки будут отображаться в той последовательности в какой они прописаны в HTML таблицы .
В таблице так же может применяться тег cellpadding , задающий отступ содержимого ячеек по всей таблице .
Пример написания первой стоки таблицы , строки тега table :
<table cellspacing="0" cellpadding="10" border="1" style="width: 200px; border-collapse: collapse;">
Пример таблицы . ( таблица дополнена тегом cellpadding )
Название таблицы
Заголовок таблицы
Footer таблицы
Содержание 0
Содержание 1Содержание 2
Содержание 3
В большинстве случаев для задания отступов в таблице вместо тега cellpadding в стилях ячеек используется тег padding , а тег cellpadding прописывается в строке тега table со значением равным 0 .
В таблице так же может применяться теги colgroup , col .
Пример предидущего примера таблицы с дополнением первой стоки таблицы , написания первых четырёх сток таблицы с применением тегов caption , colgroup , col :
<table cellspacing="0" border="1" style="width: 200px; border-collapse: collapse;">
<caption>Название таблицы</caption>
<col>Группа
<colgroup>Группировка</colgroup>
Пример таблицы . ( таблица дополнена тегами colgroup , col )
Группа Группировка
Название таблицы
Заголовок таблицы
Footer таблицы
Содержание 0
Содержание 1Содержание 2
Содержание 3
Применяемые в таблице теги colgroup , col выводят своё содержимое вне таблицы , содержание тегов прижимается к левой стороне . Тег col применяется без закрывающего тега . Последовательность вывода содержимого тегов caption , colgroup , col зависит от взаимного расположения тегов .
infВажно ! Особенность трактовки работы элементов с применением тегов caption , colgroup , col в обозревателях ( Mozilla FireFox , Google Chrome , Safari ) выражается в том что содержание тега caption выводится всегда сразу перед таблицей , а содержимое тегов colgroup , col выводится последовательно выше содержимого тега caption .
inf

Тег frame

infПримеры , подробности , детали

Пример написания таблицы :
<table border="1" style="width: 200px;" frame="void">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="void" )
Содержание 1Содержание 2
Тег frame со значением void отменяет действие тега border , что равносильно отсутствию этих тегов в строке тега table вообще .
 Пример написания таблицы :
<table border="1" style="width: 200px;" frame="above">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="above" )
Содержание 1Содержание 2
Тег frame со значением above отменяет действие тега border , оставляя видимым участок бордюра сверху таблицы . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .
Пример написания таблицы :
<table border="1" style="width: 200px;" frame="rhs">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="rhs" )
Содержание 1Содержание 2
Тег frame со значением rhs отменяет действие тега border , оставляя видимым участок бордюра с правой стороны таблицы . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .
 Пример написания таблицы :
<table border="1" style="width: 200px;" frame="below">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="below")
Содержание 1Содержание 2
Тег frame со значением below отменяет действие тега border , оставляя видимым участок бордюра снизу таблицы . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .
Пример написания таблицы :
<table border="1" style="width: 200px;" frame="lhs">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="lhs" )
Содержание 1Содержание 2
Тег frame со значением lhs отменяет действие тега border , оставляя видимым участок бордюра с левой стороны таблицы . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .
 Пример написания таблицы :
<table border="1" style="width: 200px;" frame="vsides">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="vsides" )
Содержание 1Содержание 2
Тег frame со значением vsides отменяет действие тега border , оставляя видимым участок с левой и правой сторон таблицы . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .
Пример написания таблицы :
<table border="1" style="width: 200px;" frame="hsides">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице использован тег frame="hsides" )
Содержание 1Содержание 2
Тег frame со значением hsides отменяет действие тега border , оставляя видимым участок бордюра сверху и снизу таблицы . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .
 Пример написания таблицы :
<table border="1" style="width: 200px;" frame="border">
<tr><td>Содержание 1</td><td>Содержание 2</td></tr>
</table>
Пример таблицы . ( в таблице может быть использован тег frame со значением border или box )
Содержание 1Содержание 2
Тег frame со значением border или box равнозначно действию тега border . Наличие тега border со значением отличным от нулевого значения обязательно , теги применяются совместно .

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2025 Хостинг от uCoz