Изменение ширины столбца
Теперь, когда вы использовали всю правильную семантику, вы можете изменить ширину каждого столбца — на данный момент каждый столбец имеет ширину 33%. Допустим, мы хотим, чтобы первый столбец составлял 40% таблицы, а два оставшихся столбца — 30% (например, 40% + 30% + 30% = 100%).
Fruits Vitamin A Vitamin C Apples 98 ui 8.4 mg Oranges 295 ui 69.7 mg Bananas 76 ui 10.3 mg
Таким образом, вы можете контролировать ширину столбцов таблицы. В качестве примера я использовала атрибут style и значение width: 40%, но в идеале это должно быть в файле стилей, так как это имеет отношение к внешнему виду и не имеет отношения к семантике.
Если бы вы использовали свою таблицу стилей, вы могли бы создать три класса, в которых вы определили ширину каждого столбца, и тогда ваша разметка будет выглядеть примерно так:
Fruits Vitamin A Чему вы научились
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
Особенности таблиц
При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.
Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.
Ширина ячеек
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width=»200″ (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Пример 1. Ширина ячеек
Таблица Левая колонка Правая колонка
Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.
Чтобы избежать указанной ситуации применяют несколько средств.
Пример 2. Свойство table-layout
Таблица .
Результат данного примера показан на рис. 1.
Рис. 1. Отображение рисунка при использовании свойства table-layout
Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).
Рис. 2. Отображение рисунка в браузере Safari
Пример 3. Полосы прокрутки в ячейках
Таблица .
Результат данного примера показан на рис. 3.
Рис. 3. Отображение рисунка при использовании свойства overflow
Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | |
| Ячейка 4 | |
Для наглядности код этой таблицы приведен в примере 4.
Пример 4. Таблица с объединенными ячейками
Таблица Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.
При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.
Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.
Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout , применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
или ширина ячейки таблицы html
Атрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах .
Настройка ширины столбца таблицы в HTML
| Thin | Really Really Really Wide |
|---|---|
| Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
Как видите, в первом случае мы не применили CSS или HTML td width . Что браузер сделает с такой таблицей?
| Thin | Really Really Really Wide |
| Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
Браузер выделил для второго столбца намного больше места, чем для первого. Теперь сделаем то же самое, но воспользуемся атрибутом width , чтобы принудительно задать столбцам одинаковый размер:
| Thin | Really Really Really Wide |
|---|---|
| Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
В обоих случаях браузер должен предоставить каждому столбцу одинаковую ширину. Но первая таблица должна автоматически устанавливать размер, чтобы заполнить доступное пространство, в то время как вторая имеет фиксированную ширину.
| Thin | Really Really Really Wide |
| Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
Довольно неплохо. К сожалению, это некорректный HTML- код , поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS :
.equal-width td
| Thin | Really Really Really Wide |
|---|---|
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width :
| Thin | Really Really Really Wide |
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Регулируемая высота строки таблицы
Еще один атрибут, тесно связанный с шириной, это высота ( height ). Этот атрибут также устарел, поэтому его не следует использовать. Но поскольку мы говорим о настройке ширины столбцов, то нужно рассмотреть и регулировку высоты строк. Вот как это делалось раньше с помощью устаревшего атрибута:
| Thin | Really Really Really Wide |
|---|---|
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Как браузер выводит этот пример:
| Thin | Really Really Really Wide |
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Поскольку HTML table column width устарел, мы покажем, как сделать то же самое с помощью CSS :
.tall-row td
| Thin | Really Really Really Wide |
|---|---|
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Браузер должен отобразить этот код практически идентично предыдущему. Давайте посмотрим, так ли это:
| Thin | Really Really Really Wide |
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
.tall-row td
| Thin | Really Really Really Wide |
|---|---|
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
| Thin | Really Really Really Wide |
| Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Как установить ширину таблицы через стили?
Установить ширину таблицы в пикселах или процентах через стили.
Решение
Для определения ширины таблицы используйте стилевое свойство width , применяя его к селектору table , как показано в примере 1.
Пример 1. Ширина таблицы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Ширина таблицы
В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 100px. Это достигается за счёт добавления свойства width к селектору td с именем определённого класса ( ).
При использовании стилей для изменения ширины таблицы допустимо применять любые допустимые единицы измерения, а не только пикселы и проценты.
HTML по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?