Особенности таблиц | htmlbook.ru
При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.
Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.
Ширина ячеек
Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Пример 1. Ширина ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Таблица</title> </head> <body> <table cellspacing="0" cellpadding="4" border="1"> <tr> <td>Левая колонка</td><td>Правая колонка</td> </tr> </table> </body> </html>
Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.
Чтобы избежать указанной ситуации применяют несколько средств.
- Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
- Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).
Пример 2. Свойство table-layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Таблица</title> <style type="text/css"> TABLE { table-layout: fixed; /* Ячейки фиксированной ширины */ } </style> </head> <body> <table cellspacing="0" cellpadding="4" border="1"> <tr> <td><img src="images/dino.gif" alt="Динозаврик"></td> <td>...</td> </tr> </table> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Отображение рисунка при использовании свойства table-layout
Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).
Рис. 2. Отображение рисунка в браузере Safari
- Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.
Пример 3. Полосы прокрутки в ячейках
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Таблица</title> <style type="text/css"> TD DIV { overflow: scroll; /* Добавляем полосы прокрутки */ width: 200px; /* Ширина элемента */ } </style> </head> <body> <table cellspacing="0" cellpadding="4" border="1"> <tr> <td><div><img src="images/dino. gif" alt="Динозаврик"></div></td> <td>...</td> </tr> </table> </body> </html>
Результат данного примера показан на рис. 3.
Рис. 3. Отображение рисунка при использовании свойства overflow
Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.
Ячейка 1 | Ячейка 2 |
Ячейка 3 | |
Ячейка 4 |
Для наглядности код этой таблицы приведен в примере 4.
Пример 4. Таблица с объединенными ячейками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Таблица</title> </head> <body> <table border="1" align="center" cellpadding="4" cellspacing="0"> <tr> <td bgcolor="#ffcc33">Ячейка 1</td> <td rowspan="2" valign="top">Ячейка 2</td> </tr> <tr> <td valign="top">Ячейка 3<br><br></td> </tr> <tr bgcolor="#cccccc"> <td colspan="2">Ячейка 4</td> </tr> </table> </body> </html>
Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.
При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.
Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.
Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
HTML/Атрибут width (Элемент th)
Синтаксис
(X)HTML
<th width="[значение]"> ... </th>
Описание
Атрибут / параметр width
(от англ. «width» ‒ «ширина») указывает рекомендуемую ширину ячейки шапки таблицы.
Условия использования
Значение данного атрибута используется только в случаях, когда оно не противоречит требованиям к ширине других ячеек в том же столбце. (Ширина всех ячеек столбца, как правило, устанавливается по значению самой широкой ячейки.)
CSS
Аналог: width: <значение>;
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | Tables |
4.01 | 11.2.6 Table cells: The TH and TD elements width = length [CN]…[1] DTD: Transitional |
5.0 | |
5.1 | |
XHTML | |
1. 0 | Extensible HyperText Markup Language[1] DTD: Transitional |
1.1 |
- [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)
HTML-заголовки td Атрибут
❮ Тег HTML
Пример
Укажите элемент
Name | Электронная почта | Телефон | Адрес |
---|---|---|---|
Джон Доу | someone@example. com | +45342323 | Rosevn 56,4300 Sandnes, Норвегия |
Попробуйте сами »
Определение и использование
Атрибут заголовков
указывает одну или несколько ячеек заголовка, к которым относится ячейка таблицы.
относится к.
Примечание: Атрибут заголовков
не имеет визуального эффекта в обычных веб-браузерах, но может
использоваться программами чтения с экрана.
Поддержка браузера
Атрибут | |||||
---|---|---|---|---|---|
коллекторы | Да | Да | Да | Да | Да |
Синтаксис
Значение | Описание |
---|---|
header_id | Указывает разделенный пробелами список идентификаторов одной или нескольких ячеек заголовка, с которыми связана ячейка таблицы |
❮ Тег HTML
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top6s Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
(устаревший) HTML: таблицы: ширина и высота
Последнее обновление
Эта статья основана на устаревшем программном обеспечении.
ПРИМЕЧАНИЕ. HTML-страницы устарели и не будут обновляться.
Можно управлять шириной и высотой таблиц и отдельных ячеек, назначая фиксированный размер в пикселях или переменный размер, определяемый пропорцией окна. (Таблицы будут различаться от браузера к браузеру, если вы используете параметр пропорции.) Чтобы управлять высотой или шириной всей таблицы, поместите атрибут размера (либо «WIDTH=», либо «HEIGHT=») в код
|
|
A Table With a Fixed Width of 200 Pixels
|
|
A Table Containing a Cell With a Fixed Width of 200 Pixels
|
|
Таблица с фиксированной высотой 200 пикселей
12 | ||
---|---|---|
Красный | Зеленый | Синий |
Оранжевый | Желтый | Фиолетовый |
Красный | Зеленый | Синий |
Оранжевый | Желтый | Фиолетовый |
Стол с пропорциональной высотой 40%
| . |