HTML-теги colgroup и col.

ВИДЕОКУРС HTML. УРОК 47.

Рубрикатор статьи

Сегодня подведем итоги того, о чем мы поговорили в разделе, посвященном таблицам.

Но для начала коротко вспомним, о чем говорили в прошлом видео. А говорили мы о разделении таблицы на части, с помощью HTML-тегов <thead>, <tbody> и <tfoot>. Кроме этого, в прошлом видео уроке мы познакомились с еще одним тегом — <th>, который создает, так называемые, заголовочные ячейки в таблице. Ранее мы знакомились с HTML-тегом <td>, который создает ячейки в таблице. Тег <th> предназначен для выполнения таких же задач и обладает такими же параметрами. Отличие его только в том, что он выделяет текст внутри ячеек жирным начертанием.

HTML-теги colgroup и col.

В этом видео уроке мы познакомимся с двумя последними тегами из раздела таблиц, это <colgroup> и <col>. Сразу хочу оговориться, что данные элементы не особо популярны и могут использоваться довольно редко. Однако в спецификации они существуют, и не являются устаревшими. А значит, мы должны знать, для чего они нужны. Оба тега довольно похожи друг на друга в использовании и выполняют одну и ту же задачу. Отличие только в том, что тег <colgroup> является парным тегом (что это значит?), а <col> является одиночным тегом, и соответственно они прописываются в документе по-разному.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

HTML-теги colgroup и col.

Теперь немного поговорим об их предназначении. Данные HTML-теги могут быть использованы для указания ширины и других характеристик одной или нескольких колонок таблицы. То есть, если мы хотим сделать ширину двух колонок одинаковой, мы будем использовать один из этих тегов. При этом если колонок больше двух, остальные колонки не будут затронуты.

Теги <colgroup> и <col> имеют довольно стандартный набор HTML-атрибутов, которые мы можем применить. Здесь стоит отметить, что существую два основных атрибута, которые мы можем использовать. Атрибут span, с помощью которого мы можем указать количество колонок, для которых будут указаны последующие параметры. Кроме атрибута span, мы можем использовать атрибут ширины (width), в котором необходимо указать количество пикселей. Также здесь стоит отметить, что универсальные атрибуты для этих тегов применять нельзя.

Самое главное, что следует учесть при использовании данных элементов — они должны быть указаны в документе до тегов <tr> и <td>. Это следует всегда помнить и учитывать. В противном случае HTML-документ просто не пройдет валидацию, о которой, кстати, мы уже скоро тоже будем говорить.

Ну и по уже сложившейся традиции, представлю небольшой пример использования тега <colgroup>:

<table border="1">
<caption>Заголовок таблицы</caption>
<colgroup span="2" width="333">
</colgroup>
<thead>
<tr><th>Ячейка 1-1</th><th>Ячейка 1-2</th><th>Ячейка 1-3</th></tr>
</thead>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

В этом примере мы указали, что две колонки (span) будут равны ширине (width) 333 пикселя, а остальные останутся не тронутыми и будут использовать параметр ширины по умолчанию.

Видео урок: HTML-теги colgroup и col.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео уроке мы познакомимся со скриптами в HTML.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 0.0/10 (0 голосов)
Автор: Михаил Веб Дата публикации: 15.07.2014