3. Размеры таблицы
Ширину и высоту таблицы в целом и ее ячеек, в частности, можно регламентировать атрибутами width и height для соответствующих тегов. Атрибуты принимают целочисленные значения без указания размерности (подразумеваются пикселы), а также с указанием % или auto (размер определяется содержимым с учетом других факторов).
Пример:
<table width="80%" height="400">.
Возможно также применение стилевых параметров width и height с указанием единиц измерения. Для ячеек значения width в процентах задают их ширину относительно ширины таблицы, а для таблицы - относительно ширины содержащего ее контейнера (если это <body>, то относительно ширины клиентской области окна браузера).
Если размеры таблицы не указаны, то браузер вычисляет их в зависимости от содержимого ячеек и, возможно, с учетом других параметров. Даже если размеры таблицы заданы, то все равно нет абсолютной гарантии, что они будут в точности выдержаны браузером. В спецификации HTML 4.01 не определено, как браузер должен выводить на экран таблицу. Спецификация CSS 2 также не накладывает на алгоритм вывода таблицы ограничений, если только не задан стилевой параметр text-layout: fixed.
Возможные значения параметра text-layout:
auto - алгоритм автоматического вывода таблицы, например ширина таблицы определяется шириной ее столбцов, но браузеры вольны использовать свои "фирменные" алгоритмы, которые обычно сначала загружают всю таблицу с данными, анализируют ее и только затем отображают; данное значение принято по умолчанию;
fixed - алгоритм фиксированного вывода; горизонтальный вывод таблицы зависит от ширины таблицы, ширины столбцов, а также от рамок и заполнения ячеек, но не зависит от содержимого ячеек (данных); таким образом, данный алгоритм сразу начинает вывод таблицы без предварительного анализа ее содержимого; если ширина таблицы задана параметром width со значением auto, то используется алгоритм автоматического вывода; данный алгоритм работает быстрее, чем автоматический вывод;
inherit - алгоритм вывода такой же, что и у родительской таблицы.
Если вам необходимо возможно полнее контролировать размеры таблицы и. к тому же, отображать ее как можно быстрее, то следует явно задать ее размеры и применить алгоритм фиксированного вывода. Если задать ширину всех ячеек первого ряда, то алгоритм фиксированного вывода построит таблицу с учетом этих данных. При этом все столбцы будут иметь указанную ширину. Однако реальная ширина может отличаться от указанной параметром width. Она может быть скорректирована в зависимости от содержимого ячеек, ширины клиентской области окна браузера и других обстоятельств. Так, ячейка может быть расширена в случае переполнения, чтобы все ее содержимое было видно или же, наоборот, ширина ячейки сохраняется, а содержимое усекается. Например, Internet Explorer версий 7 и 8 в режиме предоставления совместимости в данном случае усекает содержимое ячеек, а остальные браузеры расширяют ячейки. Если ширина клиентской области браузера меньше ширины таблицы, то ячейки могут быть несколько сужены. Internet Explorer версий 7 и 8 в режиме предоставления совместимости не делает этого, а остальные браузеры уменьшают ширину ячеек.
Рассмотренное поведение ячеек характерно в случае применения параметра table-layout: fixed и явного задания ширины столбцов, отличной от auto. Если при этом задать еще и ширину таблицы в целом, отличную от auto, то реальная ширина таблицы и столбцов определится с учетом соотношения значений параметра width для этих элементов. Если значение width для таблицы (элемента <table>) больше суммы значений этого же параметра для столбцов, то реальная ширина таблицы будет равна значению width, а в противном случае - сумме значений width для столбцов. При этом еще учитывается ширина рамок. Когда заданы отличные от auto значения параметра width для таблицы и столбцов, ширина столбцов уже не зависит от содержимого ячеек и ширины клиентской области браузера, но при переполнении ячейки содержимое выходит за ее пределы, накладываясь на соседнюю ячейку. В Internet Explorer версий 7 и 8 в режиме предоставления совместимости вместо наложения переполняющего содержимого происходит его усечение. Впрочем, отображением содержимого, переполняющего ячейку, можно управлять стилевым параметром overflow со значениями visible (показать все) или hidden (усечь).
Высота таблицы зависит от количества рядов и высоты ячеек, а также от значения атрибута или стилевого параметра height. Высота ячейки, в свою очередь, зависит от высоты содержимого. Она всегда не меньше той величины, при которой содержимое полностью помещается в ячейке по высоте. Вы можете для ячейки задать атрибут или стилевой параметр height. Однако реальная высота ячейки вычисляется как наибольшее из значений height и высоты содержимого. Если height имеет значение auto, то выбирается высота содержимого. Такой выбор выполняется для всех ячеек одного и того же ряда и максимальная из полученных величин становится реальной высотой всех ячеек данного ряда. Например, если для ячейки указан параметр height:30рх, а в ней расположена картинка высотой 50 рх, то данная ячейка в действительности будет не ниже 50 рх. Таким образом (с учетом толщины рамок) вычисляется высота ряда. Реальная высота таблицы в целом определяется как наибольшее из суммы высот рядов и значения height, указанного для таблицы (элемента <table>).
О
бобщая
и упрощая ситуацию, можно сказать, что
значение height,
отличное от auto,
может влиять на реальную высоту ячейки,
если только оно не меньше минимальной
величины, необходимой для размещения
содержимого целиком. Этого еще
недостаточно. Необходимо также, чтобы
все ячейки в одном и том же ряду имели
одинаковую высоту. Так что реальная
высота ячейки может быть больше, чем
указанное
для нее значение параметра height.
Далее, если сумма высот всех рядов
Листинг 2
о
кажется
меньше значения параметра height
для таблицы в целом, то разница равномерно
распределится между всеми рядами или
будет прибавлена к высоте только первого
ряда. Так или иначе, реальная высота
ячейки может стать еще больше.
В листинге 2 в качестве примера приведен код таблицы, а на рис. - ее вид в окне браузера при различных значениях параметра table-layout. Данная таблица содержит текстовые данные, а в одной ячейке расположено еще и графическое изображение размером 128x96рх. Размеры таблицы и ячеек заданы стилевыми параметрами width и height для элементов <table> и <th> соответственно.
При фиксированном алгоритме вывода таблицы (table:layout:fixed) браузер пытается выдержать указанную ширину ячеек и таблицы. Однако в рассматриваемом примере размеры заданы неудачно и поэтому возникает переполнение ячеек т. е. содержимое выходит за их границы. В случае автоматического вывода (table-layout: auto) увеличиваются так, чтобы они не переполнялись.
Чтобы исключить наложение данных соседних ячеек при фиксированном алгоритме вывода, следует правильно подобрать размеры ячеек. Кроме того, можно применить параметр overflow:hidden, чтобы усечь невмещающееся содержимое. Заметим, что overflow со значениями scroll и auto для ячеек не создает полосы прокрутки. На рис. показана таблица с лучше подобранными размерами и фиксированным алгоритмом вывода. Данный вариант определения размеров далек от идеального, но достаточно поучителен. Обратите внимание, что реальная ширина таблицы в целом явно больше заданного для нее значения 300 рх и близка к сумме значений width для столбцов (80 х 5 = 400). Если значение параметра width для таблицы задать больше суммарной ширины столбцов, то оно и определит реальную ширину таблицы. При этом ширина столбцов также пропорционально увеличится. Приблизительность оценок размеров обусловлена тем, что действительные размеры учитывают еще и толщину рамок, а также небольшие размеры отступов и полей, принятые по умолчанию.