Html таблица ширина столбцов: Ширина таблицы | htmlbook.ru

Leave a Comment / Html / By /

Атрибут 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
Браузеры

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

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

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

Как работает размерность таблицы

Динамические опции размерности для таблиц и их ячеек, используемые новым редактором Help & Manua,l могут быть немного незнакомыми по сравнению с текстовыми процессорами. Это потому, что они работают больше как таблицы HTML, чем подобные таблицы в текстовых процессорах типа Word или Open Office Writer. Однако, если Вы имеете какой-нибудь опыт с HTML  и web дизайном, то Вы будете чувствовать себя как дома с функцией размерности таблиц Help & Manual.

По умолчанию, размерность таблицы является динамической

Это — самая важная характеристика таблиц Help & Manual, так же, как с таблицами HTML. Содержание ваших ячеек имеет приоритет надо всем остальным при определении ширины и высоты ваших ячеек. Независимо от того, какую ширину и установки Вы применяете, они будут всегда игнорироваться, если ваше содержание будет выше или шире. Ячейки таблицы будут всегда расширяться, чтобы вместить весь текст, графику или другое содержание, которое они содержат. Содержание в ячейках таблицы никогда не скрывается, ячейка всегда делается достаточно большой, чтобы отобразить все.

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

Резюме: Вы не можете сделать ваши ячейки таблицы меньше, чем ваше содержание фиксированной ширины. Обычный текст будет перетекать, чтобы соответствовать определенной ширине ячейки/столбца, но все остальное вынудит ячейки становиться большими, чтобы соответствовать. И даже текст также вынудит ячейки/столбцы становиться выше, чтобы вместить его.

Размеры могут быть динамическими или «блокированными»

Шириной таблиц управляет комбинация установок таблицы и ширины ячейки/столбца. Это кажется очевидным, но важно понять, как это работает, потому что возможно ввести противоречащие значения для таблицы и размеров ячейки/столбца, что произведет неправильные или непредсказуемые результаты.

Ширина таблицы:

Ширина таблицы может устанавливаться на Авторазмер, По ширине или Вручную (пиксели или проценты).

Авторазмер таблицы:

Ширину авторазмерной таблицы диктует содержание, которое она содержит.

Когда Вы создаете авторазмерную таблицу, она первоначально расширяется автоматически, чтобы занять всю ширину текущего параграфа. Ее ширина не может быть изменена мышью, пока ячейки фактически не содержат содержание. Как только они получат содержание, Вы можете изменить размеры и полной ширины таблицы, и размеры столбца мышью.

Если Вы добавите содержание к столбцам, не регулируя размеры столбца вручную, то размеры будут откорректированы автоматически на основе содержания. Все размеры столбца останутся динамическими, если Вы не блокируете их, и ширина всей таблицы также увеличится в случае необходимости – например, если Вы вставите большую графику.

Отметьте, что изменение размеров столбца мышью автоматически блокирует ширину обоих затронутых столбцов, устанавливая ширину в фиксированное значение в пикселях.

По ширине страницы:

Таблица по ширине страницы всегда расширяется, чтобы занять всю ширину текущего параграфа (отступы в параграфе сделают таблицу более узкой, чем фактическая страница). Выбор По ширине страницы - точно то же, как установка ширины таблицы на 100 %.

Если Вы создадите таблицу по ширине страницы без каких-нибудь столбцов динамической ширины, то Help & Manual решит эту проблему, делая все столбцы динамическими, и результаты будут непредсказуемы. Таблица по ширине страницы должна всегда иметь по крайней мере один столбец динамической ширины, иначе она не будет работать должным образом.

Таблица с шириной вручную:

Таблица с шириной вручную может иметь ширину в процентах или абсолютную ширину в пикселях. Ширина в процентах — всегда относительно ширины текущего параграфа, который будет более узким чем страница, если параграф будет иметь отступы.

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

Если этого не будет, то Help & Manual решит эту проблему, делая все столбцы динамическими, и результаты будут непредсказуемы.

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

· Более полные детали относительно установок смотрите в Новая таблица / Свойства таблицы в Справочная информация > Меню и Диалоги > Меню Таблица.

Ширина ячейки/столбца:

Размеры ячеек/столбцов могут быть абсолютными (Предпочтительная ширина установлена в пикселях), относительными (Предпочтительная ширина установлена как процент от ширины таблицы) или динамическими (не установлена Предпочтительная ширина).

Ячейки/столбцы абсолютной ширины:

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

Отметьте, что выбор Блокировать ширину столбца в меню Таблица устанавливает ширину выбранного столбца(цов) на абсолютное значение в пикселях.

Ячейки/столбцы ширины в процентах:

Ячейки/столбцы с размерами в процентах будут иметь назначенные размеры, только если это будет возможно.

Это означает, что таблица должна или также содержать столбцы с динамическими размерами, которые могут компенсировать ширину так, чтобы столбец(цы) ширины в процентах мог иметь правильные размеры процента, или все размеры всех столбцов должны составить в целом точно 100 %. Здесь также, ширина, которую Вы устанавливаете, будет игнорироваться, если ячейки будут содержать содержимое фиксированной ширины, которое вынуждает их быть более широкими.

Ячейки/столбцы динамической ширины:

Ячейки/столбцы динамической ширины — внизу приоритетов масштаба. Они всегда корректируют свои размеры, чтобы дать возможность вашим установкам для таблицы и/или других столбцов быть выполнимыми.

Отметьте, что снятие выделения Блокировать ширину столбца в меню Таблица устанавливает ширину отобранного столбца(цов) на динамическую (то есть никакой определенной ширины).

· Более полные детали относительно установок смотрите в Новая таблицу / Свойства таблицы в Справочная информация > Меню и Диалоги > Меню Таблица.

Высота строки:

Высота строки может быть динамической (нет установки Предпочтительной высоты) или абсолютной (Предпочтительная высота установлена на значение пикселей). По умолчанию - динамической, и это — также лучшая опция почти для всех приложений. Абсолютные высоты строки будут всегда игнорироваться, как только содержание любой ячейки превышает высоту, которую Вы устанавливаете.

Фактически желательно расценивать высоту строки как всегда динамическую. Если Вы хотите создать строки с незаполненным пространством, самый легкий способ достигнуть этого, — вводя пустые параграфы в любую ячейку в строке. Используйте абсолютные значения пикселя, только когда Вы действительно должны уточнить размеры для PDF или печатного вывода.

Управление размерами таблицы и ячейки/столбца

Управление высотой таблицы и строк таблицы действительно не проблема. Строки в основном всегда просто достаточно высоки для их содержания, или выше, если Вы добавляете пустое пространство. Может быть хитрым управление отношениями между размерами ячеек/столбцов и шириной таблицы. Вместо того, чтобы пробовать все возможные комбинации, лучше выделить эти два основных принципа:

Принцип 1: столбцы динамической ширины делают таблицы управляемыми

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

Ипользуйте Блокировку ширины столбца, чтобы включать и выключать динамические столбцы:

Самый легкий путь устанавливать столбец динамической ширины — с установкой Блокировать ширину столбца: Щелкните правой кнопкой мыши в столбце и выберите Таблица в контекстном меню. Если Блокировать ширину столбца активизирована, только нажмите на нее, чтобы дезактивировать. Потом повторите, чтобы проверить установку Блокировки для других столбцов в таблице.

· Больше деталей относительно этого смотрите в Управление размерами столбца в Основные рабочие процедуры > Работа с таблицами и Новая таблица / Свойства таблицы в Справочная информация > Меню и Диалоги> Меню таблица.

Принцип 2: Избегайте логических противоречий

Это — в основном вопрос размышления о ваших установках и эффектах, которые они могут иметь друг на друга. Если ваши установки приведут к логическим противоречиям, то результаты будут непредсказуемы. В большинстве случаев Help & Manual просто установит все размеры на динамические, регулируя их на основе содержимого.

Примеры противоречий:

· Все размеры столбца определены как значения процента, которые составляют в целом больше или меньше чем 100 %. Идеально, Вы должны всегда иметь по крайней мере один динамический столбец, когда Вы используете размеры в процентах.

· Ширина таблицы устанавливается 100 % и размеры столбца устанавливаются на абсолютные значения в пикселях, которые составляют в целом меньше чем 100 % текущей ширины страницы/параграфа.

См. также:

Работа с таблицами

Перестаньте использовать для установки ширины таблицы в HTML: вот почему »

В атрибутах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Атрибут
Решение проблем с макетом Td в HTML5 — краткое руководство
Что перестает использовать для установки ширины таблицы в HTML: вот почему делает?
Используется для установки ширины ячейки данных таблицы на значение, которое переопределяет ширину по умолчанию. Этот атрибут устарел. Используйте CSS для управления расположением ячеек данных в таблицах HTML.

Настройка ширины столбца таблицы

Атрибут width , который сейчас устарел, когда-то был правильным способом настройки ширины столбцов таблицы. По умолчанию браузер настраивает столбцы таблицы в соответствии с содержимым таблицы. Однако, если вы хотите контролировать ширину каждого столбца, вы можете сделать это, отрегулировав ширину каждого или одной строки. Давайте посмотрим, как это раньше делалось с помощью атрибута width , а затем посмотрим, как то же самое теперь можно сделать с помощью CSS. Но сначала нам нужен базовый уровень для сравнения.

 
 
 Тонкий Действительно Очень Очень Широкий 
 
 Маленький Много-много-много и много контента, настолько много, что нам даже может понадобиться разрыв строки.

Как видите, в этом первом случае мы не применяли никаких CSS или атрибутов. Что браузер будет делать с этой таблицей?

Тонкий Really Real Really Wide
Little Много-много-много-много контента, так много, что может даже понадобиться разрыв строки.

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

 
 
 Тонкий Действительно Очень Очень Широкий 
 
 Маленький Много-много-много и много контента, настолько много, что нам может даже понадобиться разрыв строки.

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

Тонкий Действительно Очень Очень Широкий
Маленький Много-много-много-много контента, настолько много, что нам может даже понадобиться разрыв строки.

Очень приятно. К сожалению, он также не является допустимым HTML с версии 9. Атрибут 0014 width устарел. Однако мы можем сделать то же самое с помощью простого CSS.

 <стиль> .equal-width td { ширина: 50%; }  
 
 Тонкий Действительно Очень Очень Широкий 
 
 Мало Много и много-много-много контента, настолько много, что потребуется разрыв строки.

Давайте посмотрим, что наш браузер делает с этой таблицей, используя CSS, а не ширина атрибут:

.equal-width td{width: 50%;}

тонкий действительно очень очень широкий
маленький 900 46 Много-много-много-много контента, столько, что это потребует разрыва строки.

Регулируемая высота строки таблицы

Другой атрибут, тесно связанный с ширина , это высота . Этот атрибут также устарел, поэтому вам не следует его использовать, но пока мы говорим о регулировке ширины столбца, мы также должны охватывать регулировку высоты строки. Вот как вы бы сделали это в прошлом с устаревшим атрибутом:

 
 
 Тонкий Действительно Очень Очень Широкий 
 
 Маленький Много-много-много и так много контента, что потребуется разрыв строки.

И вот что ваш браузер делает с этой информацией.

Тонкий Очень Очень Очень Широкий
Маленький Много-много-много-много контента, настолько много, что потребуется разрыв строки.

Поскольку этот атрибут устарел, мы должны показать вам, как сделать то же самое с помощью CSS. Вот как это сделать:

  
 
 Тонкий Действительно Очень Очень Широкий 
 
 Мало Много и много-много-много контента, настолько много, что потребуется разрыв строки.

Ваш браузер должен отображать этот код таким образом, который практически идентичен эффекту атрибута width . Посмотрим, получится ли:

.tall-row td{height: 200px;}

Тонкий Действительно Очень Очень Широкий
Маленький Много-много-много-много контента, так много, что это потребует разрыва строки.

Честно говоря, я не понимаю, зачем вам нужно контролировать высоту строки. Гораздо разумнее контролировать поля и отступы вокруг содержимого блока 9.0014 и позволить браузеру автоматически устанавливать высоту строки на основе этой информации. Вот как можно применить эту стратегию:

  
 
 Тонкий Действительно Очень Очень Широкий 
 
 Мало Много и много-много-много контента, настолько много, что потребуется разрыв строки.

Эта часть CSS добавляет 80 пикселей отступа выше и ниже каждого элемента и 10 пикселей отступа слева и справа от каждого элемента . Вот результат:

.tall-row td{padding: 80px 10px;}

9004 5 Много-много-много-много контента, столько, что потребуется разрыв строки.
Тонкий Действительно Очень Очень Широкий
Маленький

Узнайте больше о таблицах стилей

Таблицы создают множество проблем для веб-разработчиков. Чтобы узнать больше о таблицах HTML и о том, как их стилизовать, ознакомьтесь с нашим руководством по таблицам.

Адам Вуд

Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.

Как установить ширину столбца таблицы

Если вы хотите установить ширину столбца таблицы, вы можете использовать CSS. Вам нужно использовать свойство ширины.

В приведенном ниже примере мы установили ширину элемента

на 100%. Затем в части HTML мы распределяем ширину таблицы 100% между элементами, имеющими атрибуты span. Но вы можете указать свойства в HTML или CSS.

Здесь мы используем псевдоклассы :first-child, :nth-child и :last-child для элементов

<колл. промежутка = "1"> <колл. промежутка = "1"> <колл. промежутка = "1"> <тело> <тд>20% <тд>50% <тд>30%

Попробуй сам »

Результат

и стилизуем их с помощью background-color.

Пример установки ширины столбца таблицы: 

 

  <голова>
    Название документа
    <стиль>
      стол {
        ширина: 100%;
      }
      td: первый ребенок {
        цвет фона: #32a852;
      }
      td: n-й ребенок (2) {
        цвет фона: #аааааа;
      }
      тд: последний ребенок {
        цвет фона: #5696c7;
      }
    
  
  <тело>
    <таблица>
20% 50% 30%

Как расширить последний столбец в таблице, не расширяя таблицу?

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

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

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