Тег предназначен для группирования свойств столбца (колонки) или столбцов таблицы. Он удобен в использовании и сокращает HTML-код, если все ячейки каждого столбца имеют одинаковые характеристики, но при этом сами столбцы отличаются. Кроме этого, его допускается применять совместно с тегом , для переопределения свойств некоторых столбцов в группе.
Теги можно указывать неоднократно. При этом каждый из них будет действовать на столбец (столбцы) согласно своего появления в коде страницы (сверху вниз, слева направо), а также в зависимости от значения атрибута span . Например, мы указали два раза, при этом у второго значение span равно 2. Значит, первый будет действовать на первый столбец, а второй — на второй и третий.
Если вы хотите переопределить свойства для отдельной ячейки столбца, то используйте атрибуты тегов , .
Если для всех столбцов применить данный тег с указанием ширины, а также указать ширину таблицы, то браузер начнет отображать таблицу сразу, по частям, а не после того, как она полностью загрузится.
Атрибуты
- align — Горизонтальное выравнивание содержимого ячеек.
- span — Указывает количество столбцов, на которые распространится действие элемента.
- valign — Вертикальное выравнивание содержимого ячеек.
- width — Указывает ширину столбцов.
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Модель тега: может располагаться внутри таблицы сразу после элемента либо, если он не указан, после открывающего тега . Или внутри элемента . Комбинировать варианты нельзя.
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Тег col
Тег (англ. column — колонка) позволяет задать общие свойства сразу для всего столбца таблицы.
Элемент таблицы.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
Атрибуты
| align | выраванивание содержимого столбца
не работает в Firefox |
|---|---|
| char | определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки |
| charoff | определяет смещение первого в строке символа выравнивания |
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный индетификатор |
| lang | определяет язык отображаемого документа |
| onclick | щелчек на элементе |
| ondblclick | двойной щелчек на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| span | количество столбцов, к которым будет применяться оформление (по умолчанию 1) |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
| valign | вертикальное выравнивание в ячейке таблицы
не работает в Firefox |
| width | ширина столбца |
Пример
Задаем ширину и горизонтальное выравнивание (в FireFox отображается некорректно!).
| № п/п | Фамилия |
|---|---|
| 1 | Иванов |
| 2 | Петров |
Распространяем форматирование на несколько колонок. Выравнивание по вертикали (в FireFox отображается некорректно!). Приведен код только одной строки таблицы
HTML тег col
Тег определяет свойства для каждого столбца таблицы.
Элемент должен использоваться внутри элемента .
Элемент полезно использовать для определения стилей для столбцов таблицы целиком вместо того, чтобы назначать стили для каждой ячейки по отдельности.
Разница между HTML 4.01 и HTML5
В HTML5 большинство атрибутов не поддерживаются.
В HTML тег — одиночный элемент без закрывающего тега. В XHTML тег должен закрываться должным образом, а именно — .
| Атрибут | Описание |
|---|---|
| align | Определяет горизонтальное выравнивание содержимого элемента |
| char | Определяет символ выравнивания связанного с элементом содержимого |
| charoff | Определяет количество символов смещения |
| span | Определяет количество колонок, на которые влияет элемент |
| valign | Определяет вертикальное выравнивание содержимого ячейки |
| width | Определяет ширину столбца |
Общие атрибуты
HTML пример
Устанавливаем фоновый цвет трех колонок таблицы при помощи тегов и :
CSS стили по умолчанию
Большинство браузеров будут отображать тег со следующими стилями
IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.
Таблица HTML. Тег COL. Оформление HTML таблицы
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу . Описание тега , атрибуты тега , синтаксис тега , пример использования тега . Тег относится к группе тегов HTML таблицы.
HTML тег . Описание тега .
HTML тег относится к тегам предназначенным для формирования HTML таблиц. Тег служит для изменения характеристики одной или нескольких колонок таблиц. При помощи тега вы можете задать ширину колонки в HTML таблице, выровнять содержимое колонки в таблице и т.д. У тега есть особенность – если тег задан для HTML таблицы, то любой браузер начнет отображать содержимое таблицы, даже если она загружена не полностью.
Тег может находиться только внутри тега
| Item | Qty. | Price | Cost |
|---|---|---|---|
| Bananas | 5 | 0.50 | 2.50 |
| Apples | 2 | 0.25 | 0.50 |
| Oranges | 3 | 0.75 | 2.25 |
| TOTAL | 5.25 | ||
The problem with
The element seems like a very handy element for styling columns in a table — and it does have some benefits. But there is a big problem: the individual table cells aren’t actually contained inside the column. The element only serves to provide information about columns: it isn’t the column itself. HTML tables are defined by their rows, not by columns. The result of this is that any style applied to a row will override any style applied to column. Further complicating things is that only a handful of CSS properties can be controlled via the element. The properties that can be controlled are:
So you can control the cell color ( background-color ) in a column, you cannot control the color of the text. And if one of your rows is colored, the row color will override the column color.
The CSS solution
You can create columns of styling within CSS by using the nth-child selector. The idea here is that you can target the third (or fourth, or whatever) cell in each row, which results in styling a column of rows.
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
You can also use the odd or even keywords to highlight every other column in a table.
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell | Cell |
Finally, you can also use the last-child selector to re-create the styling in the invoice-list above. This also allows you to avoid styling the header if you want to, and also add additional styling unavailable with the element.
| Item | Qty. | Price | Cost |
|---|---|---|---|
| Bananas | 5 | 0.50 | 2.50 |
| Apples | 2 | 0.25 | 0.50 |
| Oranges | 3 | 0.75 | 2.25 |
| TOTAL | 5.25 | ||
The problems with this solution
The nth-child solution breaks down if you have a complicated table with a lot of merged cells. But so does the (already not very good) styling. If you are creating a very complicated table with merged cells, you will probably need to add CSS classes or ids to individual cells, or to table rows. You can combine these approaches too, by specifying the nth-child table cell within specific classes of rows.
Don’t use ?
There are not a lot of compelling reasons to use the element. It is really only useful for presentational (styling) reasons, which are supposed to be left to CSS. Moreover, it isn’t even very effective at providing styling control. There may be some semantic reasons for grouping columns together, or for naming columns, but there are better ways of doing that. Moreover, if you want to make your tabular data machine-readable, it is probably better to provide the data in a more machine-friendly format such as JSON. The element still exists and is valid in HTML, but we can’t find many really great reasons to bother with it.
HTML Tag
The HTML tag is used for specifying column properties for each column within a element.
The tag can be handy if you need to specify styles across one or more columns. Rather than apply the styles at the individual level, you can apply it to the element. Then all (and ) elements contained within that will be styled accordingly.
Note: You can only apply 4 CSS properties to table columns. See «CSS Limitation» below for more information.
Syntax
The tag is written as (no end tag). You can use the span attribute to specify the number of columns to span.
The tag be used within a tag that doesn’t have a span attribute.
Examples
Basic tag usage
Here we apply a different background color to the columns using the tag in conjunction with the CSS background property.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The element accepts the following attributes.
Element-Specific Attributes
This table shows the attributes that are specific to the tag/element.
| Attribute | Description |
|---|---|
| span | Specifies how many columns to span. This attribute’s value must be a valid non-negative integer greater than zero.
Global AttributesThe following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.
For a full explanation of these attributes, see HTML 5 global attributes. Event Handler Content AttributesEvent handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event. Below are the standard HTML5 event handler content attributes. Again, you can use any of these with the element, as well as any other HTML5 element.
For a full explanation of these attributes, see HTML 5 event handler content attributes. Differences Between HTML 4 & HTML 5The width , align , char , charoff , and valign attributes (which were supported in HTML 4) have been made obsolete in HTML5. To see more detail on the two versions see HTML5 Tag and HTML4 Tag. Also check out the links to the official specifications below. CSS LimitationThere are only four CSS properties that can be applied to column and column-group elements. They are as follows:
And in case you’re interested, here’s the reasoning behind why only four CSS properties can be applied to table columns. TemplateHere’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need. For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag. Tag DetailsFor more details about the tag, see HTML5 Tag and HTML4 Tag. SpecificationsHere are the official specifications for the element. What’s the Difference?W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification. Тег colОписание тега COLТег предназначен для задания ширины и ряда других атрибутов для одной или нескольких колонок таблицы. Располагается внутри тега |
