HTML/Атрибут width (Элемент colgroup)

Синтаксис

HTML

XHTML

<table>
  <caption> ... </caption>
  <colgroup width="[значение]"> ... </colgroup>
или
  <colgroup width="[значение]">
  <thead> ... </thead>
  <tbody> ... </tbody>
</table>

Описание

Атрибут / параметр width (от англ. «width» ‒ «ширина») задаёт ширину каждого табличного столбца принадлежащего группе столбцов. (Заданная таким образом ширина используется как ширина столбца по умолчанию.)

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0—
3.2—
4.0111.2.4 Column groups: the COLGROUP and COL elements
The COLGROUP element
…width = multi-length [CN]
DTD: Transitional Strict Frameset
5.04.9.3 The colgroup element
5.14.9.3. The colgroup element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1. 1Extensible HyperText Markup Language

Значения

В качестве значения указывается ширина табличного столбца, которая может быть выражена в виде:

<число>
Если в качестве значения указывается только число, то ширина столбца таблицы
рассчитывается в пикселях.

<colgroup>

<число>%
Если в качестве значения указывается число со знаком «%» ПРОЦЕНТ [U+0025], то ширина столбца таблицы рассчитывается в процентах на основе доступного горизонтального пространства.

<colgroup>

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

Листинг кода

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

<title>Параметр width (Элемент colgroup)</title>
<link type=»text/css» href=»/html/col/ex-style. css» rel=»stylesheet» />
</head>
<body>
<h2>Пример использования атрибута «width»</h2>
<table>
<colgroup><col /><col /></colgroup>
<colgroup />
<tbody>
<tr> <td>~1~</td> <td>~2~</td> <td>~3~</td> </tr>
<tr> <td>~1~</td> <td>~2~</td> <td>~3~</td> </tr>
</tbody>
</table>
</body>
</html>

Параметр width (Элемент colgroup)

Атрибут width | HTML | WebReference

  • Содержание
    • Синтаксис
    • Значения
    • Значение по умолчанию
    • Пример
    • Примечание
    • Браузеры

Задаёт ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счёт форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе её содержимого.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<col>

Значения

Обычно применяется любое целое значение в пикселях или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселей, а для колонок — 1*, 2*, то в пикселях это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» quot;http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>COL, атрибут width</title> </head> <body> <table cellpadding=»10″ border=»1″> <col> <col> <tr> <td> . .. </td> <td> … </td> </tr> </table> </body> </html>

Примечание

Для изменения ширины колонок воспользуйтесь псевдоклассом :nth-child и свойством width, добавляя их к селектору td.

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ширина колонок</title> <style> table { width: 100%; /* Ширина таблицы */ } td { border: 1px solid black; /* Рамка вокруг ячеек */ } td:nth-child(1) { width: 20%; /* Ширина первой колонки */ } td:nth-child(2) { width: 80%; /* Ширина второй колонки */ } </style> </head> <body> <table> <tr> <td> … </td> <td> … </td> </tr> </table> </body> </html>

Браузеры

5121411
1161

Браузеры

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

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

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

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

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

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

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

Атрибут ширины HTML

❮ Назад Все атрибуты HTML Далее ❯

Определение и использование

Атрибут width определяет ширину элемента в пикселях.

Примечание: Для элементов ввода атрибут ширина используется только с .

Применяется к

Атрибут ширина может использоваться для следующих элементов:

Элементы Атрибут
<холст> ширина
<встроить> ширина

Попробуйте сами »

Пример изображения

Изображение высотой и шириной 42 пикселя:

Smiley face

Попробуйте сами »

Пример ввода

Определить изображение как кнопку отправки с атрибутами высоты и ширины:


Имя:

Фамилия:


Попробуйте сами »

Пример объекта

Flash-анимация высотой и шириной 400 пикселей::

Попробуйте сами »

Пример видео

Видеоплеер с заданной шириной и высотой:

<управление видео>
 


  ogg» type=»video/ogg»>
Ваш браузер не поддерживает видео тег.

Попробуйте сами »

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

Атрибут width имеет следующую поддержку браузера для каждого элемента:

Элемент
брезент 4,0 9,0 2,0 ​​ 3.1 9,0
встроенный Да Да Да Да Да
iframe Да Да Да Да Да
изображение Да Да Да Да Да
ввод 1,0 Да 16,0 Да 1,0
объект Да Да Да Да Да
ширина Да Да Да Да Да

❮ Предыдущий Все атрибуты HTML Далее ❯


NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛЕТКА ЦВЕТОВ
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

3 902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Ширина ввода HTML Атрибут

❮ Тег HTML

Пример

Определить изображение как кнопку отправки с атрибутами высоты и ширины:


 
 


 




Попробуйте сами »

Определение и использование

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

Примечание: Атрибут ширина используется только с .

Совет: Всегда указывайте высоту и ширина атрибуты для изображений. Если установлены высота и ширина, пространство, необходимое для изображение резервируется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения и не может зарезервировать соответствующее пространство для него. Эффект будет заключаться в том, что макет страницы изменится во время загрузки (пока загружаются изображения).

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.

Атрибут
ширина Да Да 16,0 Да Да

Синтаксис

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

Значение Описание
пикселей Ширина в пикселях (например)

❮ Тег HTML


NEW

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3. CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.

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

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