Ширина таблицы html в процентах: Как установить ширину таблицы через стили?

Leave a Comment / Html / By /

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

Синтаксис

(X)HTML

<th width="[значение]"> ... </th>

Описание

Атрибут / параметр width (от англ. «width» ‒ «ширина») указывает рекомендуемую ширину ячейки шапки таблицы.

Условия использования

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

CSS

Аналог: width: <значение>;

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.
Раздел
HTML
2.0—
3.2Tables
4.0111.2.6 Table cells: The TH and TD elements
width = length [CN]…[1]
DTD: Transitional Strict Frameset
5.04.9.10 The th element
5.14.9.10. The th element
XHTML
1.0Extensible HyperText Markup Language[1]
DTD: Transitional Strict Frameset
1. 1Extensible HyperText Markup Language
  • [1] ‒ помечен как «устаревший».

Значения

В качестве значения указывается ширина ячейки. Значение ширины ячейки может быть выражено в виде:

<число>
Если в качестве значения указывается только число, то ширина ячейки таблицы рассчитывается в пикселях. (Например, «height="25"».)
<процент>%
Если в качестве значения указывается число со «%» ЗНАКОМ ПРОЦЕНТА [U+0025], то ширина ячейки таблицы рассчитывается в процентах на основе доступного горизонтального пространства. (Например, «height="37%"».)

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

Листинг кода

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Параметр width (Элемент th)</title>
</head>
<body>
<h2>Пример использования атрибута «width»</h2>
<table border=»1″>
<caption>Математическая матрица</caption>
<tbody>
<tr> <th bgcolor=»silver»>x</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr>
<tr> <th>1</th> <td>0</td> <td>2</td> <td>6</td> <td>3</td> </tr>
<tr> <th>2</th> <td>1</td> <td>0</td> <td>4</td> <td>2</td> </tr>
<tr> <th>3</th> <td>2</td> <td>2</td> <td>0</td> <td>3</td> </tr>
<tr> <th>4</th> <td>3</td> <td>2</td> <td>6</td> <td>0</td> </tr>
</tbody>
</table>
</body>
</html>

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

6.

5. Линия между колонками

Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить атрибут border-left для правой колонки или border-right для левой (tabl_verstka_11.html).

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

Рис. 8. Линия между колонок

7. Макет из трех колонок

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

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

7.1. Ширина колонок в пикселах

Ширина разных колонок зависит от используемого макета  — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В следующем примере ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов (

tabl_verstka_12.html).

7.2. Ширина колонок в процентах

При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:

  • ширина всех ячеек задана в процентах;

  • сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.

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

Для удобства изменения вида колонок параметры в данном примере перенесены в стили.

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

7.3. Сочетание процентов и пикселов

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

Рис. 9. Ширина средней колонки определяется браузером

Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (tabl_verstka_14.html). При этом обязательно следует определить общую ширину всей таблицы.

Во втором варианте ширина двух колонок устанавливается в процентах, а третьей ? в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки ? 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%.

Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.

На рис. 10 показана схема расположения вложенных таблиц относительно друг друга.

Рис. 10. Применение вложенных таблиц

Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах (tabl_verstka_15.html).

При создании подобного макета следует принимать во внимание следующие моменты.

  • ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.

  • для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение параметров cellpadding и cellspacing. Поля можно устанавливать через атрибут padding, как показано в данном примере.

  • ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.

Покажите результат работы преподавателю.

22

Как проценты ширины в ячейках таблицы работают в HTML?

Задавать вопрос

спросил

Изменено 3 месяца назад

Просмотрено 8к раз

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

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

 <таблица>
    
        манго
        яблоко

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

 <таблица>
    
        манго
        яблоко

Случай 3: ширина таблицы не указана, одна строка и столбец занимают более 100% пространства 

 <таблица>
    
        манго
        яблоко
        гуава

Случай 4: не указана ширина таблицы, указано несколько строк и столбцов, которые дают следующие процентные конфигурации 

 <таблица>
    
        манго
        яблоко
        гуава
    
    
        папайя
        поменгранте

Их выходы я не могу сопоставить, пожалуйста, помогите мне в этом

2

Процент будет работать в зависимости от любого разрешения экрана, равного 100%, поэтому вы делите этот процент в соответствии с вашими требованиями.

 <граница таблицы="1">
      
       Манго
       Лимон
      
   
      
       некоторый предмет
       некоторый предмет
     
    
      
       
Это другой тип таблицы
 
       <граница таблицы="1">
       
        Манго
        Лимон
        Что-то
       
   
       
       некоторый предмет
       какой-то предметкакой-то предмет
       
      
       
Это другой тип таблицы
 
      <граница таблицы="1">
      
      Манго
      Лимон
      Что-то
      Что-то
      
      
      
      некоторый предмет
     некоторый предмет
     некоторый предмет
     некоторый предмет

Ячейки будут работать по отношению к своей таблице, но они также должны занимать 100% ширины таблицы. Так что ваш case1 не работает. он разделит его как 50%. Но случай, когда вы установите это, будет работать, так как это 100% ширины таблицы.

Демо

 <таблица>
    
        манго
        яблоко

Если вам нужно что-то, чтобы занять 25-25, то, возможно, вам следует вместо этого использовать div.

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

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Как установить ширину столбца таблицы HTML в процентах (без нижнего колонтитула таблицы, влияющего на тело таблицы)?

спросил

Изменено 1 год, 5 месяцев назад

Просмотрено 794 раза

Мне действительно трудно понять, как задать ширину столбцов в HTML-таблице. Я не могу понять, почему процентная ширина не применяется и почему столбцы внутри tfoot влияют на ширину столбцов в tbody.

Может ли кто-нибудь пролить свет на это и, возможно, объяснить, как я могу установить столбцы в tbody на одну треть (33,333%), а столбцы в tfoot установить на половину (50%) и на самом деле охватывают всю ширину таблицы (сейчас они охватывают только 2 столбца выше, а не 3 столбца)?

Будем очень признательны за любую помощь/рекомендацию.

 корпус,
тфут {
  ширина: 100%;
}
tbody tr td {
  ширина: 33,333%;
}
тфут тр й,
тфут тр тд {
  ширина: 50%;
} 
 <граница таблицы = "1">
<тело>
  
    Основной ряд 1 Столбец 1
    Основной ряд 1, столбец 2
    Строка основного текста 1, столбец 3
  


  
    Строка нижнего колонтитула 1, столбец 1
    Нижний колонтитул, строка 1, столбец 2
  
  
    Строка нижнего колонтитула 2, столбец 1
    Нижний колонтитул, строка 2, столбец 2
  
  
    Строка нижнего колонтитула 3, столбец 1
    Строка нижнего колонтитула 3, столбец 2
  • HTML
  • css
  • HTML-таблица

3

Если вы не ограничены тем, что у вас есть использование одной таблицы, то почему бы просто не использовать таблицу внутри таблицы?

 <фут>
  
    <тд colspan="3">
      <таблица>
        <тело>
          
            Первый тайм
            Второй тайм

Просто убедитесь, что стиль подходит точно так же, и дайте вашей таблице table { width: 100%; } , без границ, полей, отступов и т.

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

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