Table

Люди,помогите,умоляю!Кто-нибудь...Дайте ссылку,где толково и доходчиво
объясняют,как используются сложные таблицы (<table>) У меня уже голова кругом
идёт:в блокноте пишу одно,а в эксплоере вижу абсолютно другое.Измучился вконец.Или может
кто сам решится мне разъяснить?

[Lord Skill]

Элемент <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=имя>

[Lord Skill]

Элемент <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=имя>

[Lord Skill]

Начало строки: элемент <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=имя>

[Lord Skill]

Исходные коды некоторых таблиц.
Таблица с общим заголовком и заголовками в колонках.

<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>

Таблица с общим заголовком и заголовками в колонках, и в строках.

<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>

Таблица с объединенными ячейками в колонках, и в строках.

<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>

Более сложное объединение ячеек в колонках, и в строках.

<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>

Таблица в ячейке таблицы.

<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>

Таблица, состоящая из одной ячейки.

<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>

[RaZEr]

Все куда проще:

<table> - задает таблицу
<tr> - задает строку таблицы
<td> - задает ячейку таблицы

<table>
<tr><td>1</td><td>2</td></tr>
</table>

получим таблицу с двумя ячейками в одном ряду . чтобы добавить еще один ряд нужно добавить еще одну конструкцию:

<tr>....</tr>

и тогда получим:

<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

PS: Тэг <th> полностью аналогичен tr, но имеет несколько другой стиль и тем самым помогает отличить заголовок таблицы (напр: названия столбцов) от содержимого .

[qwebec]

Lord Skill
вместо всей этой байды можно было бы дать просто линк

RaZEr
слишком просто для сложных, вложенных таблиц

[RaZEr]

Ну а чего там в сложных ? В td есть еще атрибуты colspan и rowspan, которые позволяют растянуть <td> на несколько ячеек вправо или на несколько строк вниз соответственно . Пример:

<table>
<tr><td colspan=2>1 и 2</td></tr>
<tr><td>3</td><td rowspan=2>4 и 6</td></tr>
<tr><td>5</td></tr>
</table>

2 qwebec: Ты сам ничего не запостил, чтобы критиковать других .

[qwebec]

RaZEr
зачем постить если рунет ломится от справочников, хелпов, faq и прочей инфе по html

www.ya.ru - найдется все

[RaZEr]

Ты прямо какой умный . Мы все видимо не знали что есть поисковые системы .

Человек спросил - ему ответили . Если не хочешь отвечать - не отвечай .

[qwebec]

RaZEr
че какой злой седня? не с той ноги встал чтоли или еще не ложился?

ты скажи что я и еще и не прав к тому же...
в вопросе Glook2'ера нет конкретики, поэтому даю то что выдал самый "содержательный сайт рунета" на общий запрос: HTML таблицы

1. Концепция таблиц в HTML
2. HTML .::. Таблицы
3. Таблицы от первоисточника
4. Средства описания таблиц
5. Таблицы в дизайне

вот... и т.д. и т.п.,
имхо человек вернется с конкретным вопросом!

[Stasik]

точно... умников тут развелось

Эй! Народ! Хорош ругаться по пустякам!То что человек так подробно ответил на мой неконкретный вопрос,только делает ему честь.На таких людях и держится интернет.Спасибо всем за советы и линки.Теперь конкретно:
Есть только кое что,до сих пор мне не понятное:
вот например, я захотел чтобы в двух ячейках одной таблицы находились
вложенные разные таблицы.Создаю "основную" таблицу и размещаю в её первой ячейке
"вспомогательную" (назову её так),которая по идее является меню.Здесь
всё прошло гладко. Затем создаю простейщую таблицу
с одной ячейкой,в соседней ячейке "основной" таблицы,но при просмотре оказалось,
что верхняя граница её проходит не в ровень с верхней границей первой "вспомогательной"
,а точно посередине.При дальнейшем добавлении ячеек по вертикали (они зелёного цвета
таблица росла не вниз.
как я ожидал,а вверх и вниз.Думаю я оканчательно всех запутал),так что вот код:

<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tbody><tr><td>
<table width="165" border="0" cellspacing="0" cellpadding="0">
<TBODY>
<tr>
<td HEIGHT="20"<tr>
<td HEIGHT="3">
<tr>
<td HEIGHT="20">
<tr>
<td HEIGHT="3">
<tr>
<td HEIGHT="20"
<tr>
<td HEIGHT="3">
<tr>
<td HEIGHT="20">
<tr>
<td HEIGHT="3">
<tr>
<td HEIGHT="20">
<tr>
<td HEIGHT="25">
<tr>
<td HEIGHT="20">
<tr>
<td HEIGHT="330" BGCOLOR="#DCDCDC" align=center valign=top>
</TBODY></table>
<td>
<TABLE width="700"border="0" BGCOLOR="#006400"><tbody>
<TR><TD HEIGHT="20" BACKGROUND="head.gif">
<TR><TD HEIGHT="205">Ячейка 2
<TR><TD HEIGHT="205">Ячейка 3
</tbody></table>
</tbody></table>

В чём моя ошибка?

[RaZEr]

В том, что прочитал глупую статью Lord Skill'а ...

[qwebec]

я же говорил что он вернется с конкретным вопросом...

Glook2
кошмар...
начнем с того что теги надо закрывать: открыл <table><tr><td> обязательно закрой </td></tr></table> - на этом и закончим )))

и еще забей на tbody - глупость это!

[Stasik]

точно..... не пудри себе мозги

[Lord Skill]

RaZEr
ЭЭЭээ чё в ней глупово - я там тэги все закрывал!!!

[qwebec]

Lord Skill
ты еще скажи что ты сам статью набивал?! ))

а теги в твоем топике и правда не закрыты... может форум покоцал их

[Lord Skill]

а че это он только - </tr> & </td> пообрубал???........так не чесно
Хотел как лучше а получилось как всегда!!

По поводу незакрытых тегов:мною было просмотрено некоторое количество справочников и во многих пишут ,что закрывающие теги </tr> и </td> необязательные.Например так сказано в справочнике по тэгам господина А.Климов http://winchanger.narod.ru
Далее,я всё же закрыл все теги и убрал <tbody> но ничего не произошло,ошибка явно не в этом.