Тег col – Таблицы в Html — теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания

Leave a Comment / Разное / By /

Содержание

Тег HTML колонки в таблице

Тег <col> позволяет задавать стили сразу одной или нескольких колонок таблицы HTML, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.

Используется в HTML таблицах определенных тегом <table>.

HTML тег <col> должен располагаться внутри тега <table> перед тегами <thead>, <tbody>, <tfoot>, и <tr>. Если в таблице используется подпись <caption>, теги <col> должны ставиться после нее.

Если вам нужно задать стили группы колонок вы также можете использовать тег <colgroup>.

Теги <col> можно также использовать внутри <colgroup>, что позволяет задать стили для конкретных колонок в группе.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<col стили_колонок>

Отображение в браузере

Ячейка 1		 Ячейка 2 Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8
Ячейка 9 Ячейка 10 Ячейка 11 Ячейка 12

Пример использования <col> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Таблица с col</title>
</head>
<body>
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
 <td>Ячейка 6</td>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
<tr>
<td>Ячейка 9</td>
<td>Ячейка 10</td>
<td>Ячейка 11</td>
<td>Ячейка 12</td>
</tr>
</tbody>
</table>
</body>
</html>

Разница между тегами <col> и <colgroup>

Тег <col> не позволяет использовать вложенные теги для определения стилей части колонок из группы, что можно сделать используя <colgroup> с вложенными <col>.

При использовании <colgroup> колонки таблицы будут объединены в группы, что при использовании атрибута rules=»groups» тега <table> в HTML 4.01 даст возможность выводить только границы групп.

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
span число Количество колонок, на которые распространяется действие тега.
Устаревшие атрибуты
align left
right
center
justify		 Задает правило выравнивания содержимого колонок по горизонтали. В HTML5 используйте CSS.
valign top
middle
bottom
baseline		 Задает правило выравнивания содержимого колонок по вертикали. В HTML5 используйте CSS.
width пиксели
проценты		 Ширина колонок. В HTML5 используйте CSS.

| HTML | WebReference

Элемент <col> (от англ. column — колонка) задаёт ширину и другие характеристики одной или нескольких колонок таблицы. При наличии этого элемента браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки. <col> можно использовать совместно с элементом <colgroup>, который задаёт группу колонок, обладающих общими характеристиками.

Для <col> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.

Синтаксис

<table>
  <col>
  <tr>
   <td>...</td>
  </tr>
</table>

Закрывающий тег

Атрибуты

align
Устанавливает выравнивание содержимого колонки по краю.
char
Выравнивает содержимое колонки по заданному символу.
charoff
Сдвигает содержимое ячейки относительно заданного символа.
span
Количество колонок, к которым следует применять параметры.
valign
Задает вертикальное выравнивание содержимого колонки.
width
Ширина колонок.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>COL</title>
 </head>
 <body>
  <table border="0" cellpadding="5" cellspacing="0">
   <col valign="top">
   <col valign="top">
   <tr>
    <td>Рутений распознает окисленный 
    интермедиат, что позже подтвердилось многочисленными опытами.
    </td>
    <td>При осуществлении искусственных 
    ядерных реакций было доказано, что хлорсульфит натрия кристалличен.
    </td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид колонок в браузере

Рис. 1. Вид колонок в браузере

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML

Элемент <col> (от англ. «column» ‒ «столбец, колонка») определяет свойства конкретного столбца, либо столбцов в пределах тега <colgroup> внутри таблицы. Элемент <colgroup> может состоять из одного, либо нескольких элементов <col>.

Для <col> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.

Синтаксис

<table>
  <col>
  <tr>
   <td>...</td>
  </tr>
</table>

Закрывающий тег

Не требуется.

Атрибуты

alignУстарел в HTML5
Устанавливает выравнивание содержимого колонки по краю.
charУстарел в HTML5
Выравнивает содержимое элемента по заданному символу. Атрибут char может быть использован только если атрибут align = «char».
charoffУстарел в HTML5
Атрибут, который позволяет произвести выравнивание элемента с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char».
span
Определяет какое количество столбцов должен охватывать элемент <col>. Число должно быть целым положительным. Если параметр не задан, то его значением по умолчанию будет 1.
valignУстарел в HTML5
Задает вертикальное выравнивание содержимого колонки.
widthУстарел в HTML5
Ширина колонок.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <col> со следующими значениями CSS по умолчанию:

col { 
    display: table-column;
}

Различия между HTML 4.01 и HTML5

В HTML 5 было удалено 5 атрибутов.

Пример использования:

Элемент <col>

Пример HTML:

Попробуй сам
<table>
<caption>Цветная таблица</caption>
<col>
<col>
<tbody>
<tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr>
<tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr>
</tbody>
</table>

Спецификации

Поддержка браузерами

Элемент
<col> 5+ 1+ 4+ 1+ 1+ 1+
Элемент
<col> 1+
1+		 6+ 1+

Тег HTML группа колонок таблицы

Тег <colgroup> определяет группу из одной или нескольких колонок HTML таблицы. Используется в HTML таблицах определенных тегом <table>.

Тег <colgroup> позволяет определить стили сразу для группы колонок, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.

HTML тег <colgroup> должен располагаться внутри тега <table> перед тегами <thead>, <tbody>, <tfoot>, и <tr>. Если в таблице используется подпись <caption>, тег <colgroup> должен ставиться после нее.

Если вам нужно задать стили колонок, вы также можете использовать тег <col>.

Теги <col> можно также использовать внутри <colgroup>, что позволяет задать стили для конкретных колонок в группе.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

Вариант 1. <colgroup> без вложенных тегов <col>:

<colgroup span="количество_колонок">

Атрибут span задает количество колонок в группе. Если атрибут span не задан, считается, что его значение равно единице.

Вариант 2. <colgroup> с вложенными тегами <col>:

<colgroup>вложенные теги col</colgroup>

Отображение в браузере

Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8
Ячейка 9 Ячейка 10 Ячейка 11 Ячейка 12

Пример использования <colgroup> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Таблица с colgroup</title>
 
</head>
<body>
<table>
<colgroup>
<col>
<col span="2">
</colgroup>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
<tr>
<td>Ячейка 9</td>
<td>Ячейка 10</td>
<td>Ячейка 11</td>
<td>Ячейка 12</td>
</tr>
</tbody>
</table>
</body>
</html>

Разница между тегами <colgroup> и <col>

Тег <colgroup> позволяет использовать вложенные теги <col> для определения стилей части колонок из группы.

При использовании <colgroup> колонки таблицы будут объединены в группы, что при использовании атрибута rules=»groups» тега <table> в HTML 4.01 даст возможность выводить только границы групп.

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
span число Количество колонок, которые будут объединены в группу. Используется, если <colgroup> задан без вложенных тегов <col>.
Устаревшие атрибуты
align left
right
center
justify		 Задает правило выравнивания содержимого группы колонок по горизонтали. В HTML5 используйте CSS.
valign top
middle
bottom
baseline		 Задает правило выравнивания содержимого группы колонок по вертикали. В HTML5 используйте CSS.
width пиксели
проценты		 Ширина группы колонок. В HTML5 используйте CSS.

HTML тег col

Тег <col> определяет свойства для каждого столбца таблицы.

Элемент <col> должен использоваться внутри элемента <colgroup>.

Элемент <col> полезно использовать для определения стилей для столбцов таблицы целиком вместо того, чтобы назначать стили для каждой ячейки по отдельности.

Разница между HTML 4.01 и HTML5

В HTML5 большинство атрибутов не поддерживаются.

Различия между HTML и XHTML

В HTML тег <col> — одиночный элемент без закрывающего тега. В XHTML тег <col> должен закрываться должным образом, а именно — <col />.

Атрибуты тега <col>

Атрибут Описание
align Определяет горизонтальное выравнивание содержимого элемента
char Определяет символ выравнивания связанного с элементом содержимого
charoff Определяет количество символов смещения
span Определяет количество колонок, на которые влияет элемент <col>
valign Определяет вертикальное выравнивание содержимого ячейки
width Определяет ширину столбца

Общие атрибуты

Тег <col> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Устанавливаем фоновый цвет трех колонок таблицы при помощи тегов <colgroup> и <col>:


<table>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Название</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>Мой первый HTML</td>
    <td>$53</td>
  </tr>
</table>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <col> со следующими стилями


col { 
    display: table-column;
}

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+6.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.

Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами тегов <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определенные группы, также при добавлении атрибута rules=»groups» к тегу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.

Синтаксис

HTML
<table>
  <colgroup атрибуты>
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <colgroup атрибуты />
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

align
Устанавливает выравнивание содержимого колонки по краю.
char
Выравнивает содержимое колонки по заданному символу.
charoff
Сдвигает содержимое ячейки относительно заданного символа.
span
Количество колонок, к которым следует применять атрибуты.
valign
Задает вертикальное выравнивание содержимого колонки.
width
Ширина колонок.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег COLGROUP</title>
 </head>
<body> 

 <table cellpadding="2" cellspacing="0" border="1" rules="groups">
  <colgroup>
  <colgroup span="9" align="center">
   <col span="5">
   <col span="4">
  </colgroup>
  <tr> 
   <td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
   <td>1998</td><td>1999</td><td>2000</td><td>2001</td>
   <td>2002</td><td>2003</td>
  </tr>
  <tr> 
   <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
   <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
  </tr>
  <tr>
   <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
   <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
  </tr>
  <tr>
   <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
   <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
  </tr>
 </table>

 </body>
</html>

Результат данного примера показан на рис. 1. Браузеры Chrome и Safari не поддерживают атрибут align.

Рис. 1. Вид таблицы при использовании тега <colgroup>

Атрибут width HTML тега col

Атрибут width определяет ширину элемента <col>.

Обычно элемент <col> получает такую ширину, которая необходима для отображения его содержимого. Атрибут width используется для установки предопределенной ширины элемента <col>.

Этот атрибут переопределяет любые значения ширины, заданные в элементе <colgroup>.

Атрибут width поддерживается всеми основными браузерами. Тем не менее, ни один из браузеров не поддерживает значение relative_length.

Атрибут width для тега <col> не поддерживается в HTML5.

Вместо него следует использовать стили CSS.

Пример синтаксиса CSS: <td>.

Синтаксис

<col % | relative_length«>

Значения атрибута

ЗначениеОписание
pixelsШирина в пикселях (например, «100»)
%Ширина в процентах относительно родительского элемента (например, «10%»)
relative_length

Делит доступные пиксели на части. (например, ширина таблицы 100px, ширина первой колонки 20px, второй — 50%. В этом случае доступными будут 30px). Одна часть устанавливается как «1*».

Пример: Если доступно 30px ширины, то можно задать одно значение в «1*» и одно в «2*», которые будут интерпретированы как 10 и 20 px (1* воспринимается как одна часть, а 2* как две части).

Пример использования атрибута

Два элемента <col> с предустановленной шириной:


<table>
   <col>
   <col>
   <tr>
     <th>Месяц</th>
     <th>Сэкономлено</th>
   </tr>
   <tr>
     <td>Январь</td>
     <td>$100</td>
   </tr>
   <tr>
     <td>Февраль</td>
     <td>$80</td>
   </tr>
</table>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *