Основы работы с XHTML и CSS


Ячейки таблицы без переноса слов


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

Таблица с заголовками столбцов и строк без переноса

Рис. 8.31.  Таблица с заголовками столбцов и строк без переноса

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

Таблица со свернувшимися заголовками строк и столбцов

Рис. 8.32.  Таблица со свернувшимися заголовками строк и столбцов

Нет ничего неправильного в отношении содержимого таблицы; она просто выглядит не так, как предполагалось. Однако можно отключить перенос слов в ячейках таблицы, задавая свойство стиля white-space для тех ячеек, где нежелательно сворачивание текста.

Таблица 8.2. Свойство стиля white-space

СвойствоЗначение
white-spacenormal nowrap pre

Это свойство стиля определяет, как браузер должен обрабатывать пробелы в текстовой строке. Значение normal сжимает все смежные пробелы в один пробел и переносит строку текста на пробеле, где остающийся в строке текст не помещается в указанную ширину его контейнера. В противоположность этому значение nowrap интерпретирует пробелы как неразрывные (&nbsp;) и не переносит строку. Значение pre действует как тег <pre> и сохраняет столько пробелов, сколько было закодировано, также интерпретируя их как неразрывные пробелы.

Если ячейка таблицы недостаточно широка для вывода своего текста на одной строке, то текст обычно переносится в позиции пробела в текстовой строке. Это происходит с заголовками столбцов и строк в таблице на рисунке 8-32. Однако, задавая свойство white-space:nowrap для этих ячеек таблицы, переноса строк в заголовках можно избежать. Такие спецификации приводят к выводу таблицы следующим образом.

Таблица с заголовками столбцов и строк без переноса

Рис. 8.33.  Таблица с заголовками столбцов и строк без переноса

Следующий листинг содержит весь код приведенной выше таблицы без переноса в ячейках. В данном случае определен класс стиля .NOWRAP с заданным свойством white-space:nowrap. Все ячейки, которые не должны допускать сворачивание текста, присваиваются этому классу.

<style type="text/css"> table {border:0; width:230px} table td {border:inset 1; padding:3px} table tr#C-HEAD {font-weight:bold; background-color:#F0F0F0; text-align:center} table td#R-HEAD1 {font-weight:bold; background-color:#F0F0F0; text-align:left} table td#R-HEAD2 {font-weight:bold; background-color:#F0F0F0; text-align:left} table td#BLANK {background-color:#FFFFFF} .NOWRAP {white-space:nowrap} </style>

<table> <tr id="C-HEAD"> <td id="BLANK"> class="NOWRAP"</td> <td class="NOWRAP">Table Column 1</td> <td class="NOWRAP">Table Column 2</td> <td class="NOWRAP">Table Column 3</td> </tr> <tr> <td id="R-HEAD1" class="NOWRAP">Table Row 1</td> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td id="R-HEAD2" class="NOWRAP">Table Row 2</td> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> </table>

Листинг 8.33. Использование отключения переноса в ячейках таблицы




Начало  Назад  Вперед



Книжный магазин