Для усложнения задачи предположим, что в статье встречается очень важный абзац, который, по мнению ее автора, содержит ключевую информацию. Например, это может быть важное замечание или полезный совет. Существует несколько способов выделить такой абзац в тексте.

Способ первый - изменить плотность текста. Менять при этом расстояние между словами или буквами не рекомендуется - для текста это не лучший способ выделения, эффективнее просто изменить начертание на курсив или полужирный.

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

Приведем пример. Пусть у нас есть некая таблица с данными:



HTML-код этой таблицы:

<TABLE cellspacing="0" cellpadding="2" border="l"> <TR> <TH>ФИО сотрудника</TH> <TH>Оклад</TH> <TH>Выдано под авансовый отчет</TH> <TH>Начислено зарплаты</TH> <TH>Удержано из зарплаты</TH> </TR> <TR align="center"> <TD align="left">Иванов Петр</ТD> <TD>5 000 p.</ТD> <TD>1 000 p.</ТD> <TD>4 850 p.</ТD> <TD>530 p.</ТD> </TR> <TR align="center"> <TD align="left">Cмирнов Алексей</ТD> <TD>8 000 p.</ТD> <TD>&nbsp;</ТD> <TD>8 000 p.</ТD> <TD>905 p.</ТD> </TR> <TR align="center"> <TD align="left">Петров Сергей</ТD> <TD>7 000 p.</ТD> <TD>2 500 p.</ТD> <TD>6 000 p.</ТD> <TD>700 p.</ТD> </TR> </TABLE>

По ширине в окне браузера Internet Explorer такая таблица занимает примерно 740 пикселей при среднем размере шрифта. Это уже слишком много, если ориентироваться на минимальное разрешение экрана 800x600 пикселей. С помощью CSS-свойства letter-spacing эту таблицу можно немного сжать, а также можно убрать отступы внутри ячеек, установив нулевое значение атрибута cellpadding.

Давайте создадим новый CSS-класс TABLE.narrow для новой узкой таблицы, при этом начальный тег таблицы должен стать таким:

CSS-правило для класса TABLE.narrow будет очень простым:

TABLE.narrow{letter-spacing:-0.05em;}

В результате таблицу удалось сократить по ширине приблизительно на 100 пикселей, и новая таблица выглядит уже вполне приемлемо. Оцените полученный результат визуально:

Еще один способ состоит в разбиении текста заголовков на две строки простым добавлением элемента BR в код таблицы. В этом случае разбиение можно выполнить довольно просто, поскольку в остальных строках хранятся только цифры, не занимающие по ширине много места. Этот прием можно применить, даже не меняя расстояния между буквами.

ФИО сотрудника	Оклад	Выдано под авансовый отчет	Начислено зарплаты	Удержано из зарплаты
Иванов Петр	5 000 p.	1 000 p.	4 850 p.	530 p.
Cмирнов Алексей	8 000 p.		8 000 p.	905 p.
Петров Сергей	7 000 p.	2 500 p.	6 000 p.	700 p.