Тег <pre>
Обычно браузер никак не форматирует текст, если текст не окружен тегами XHTML. Хотя в текстовом редакторе код мог быть как-то организован с помощью средств редактора, в браузере все смежные пробелы и пустые строки объединяются в одиночные пробелы и строки. Однако существует один случай, когда сформатированный в редакторе текст может выводиться таким же образом в браузере.
Блок текста, окруженный блочным тегом <pre> ("preformatted" или "preserve"), выводится моноширинным (равномерным) шрифтом (monospace) точно в том же виде, как он был сформирован в редакторе. То есть, пробелы между символами и пустые строки, использованные для форматирования кода XHTML в редакторе, точно воспроизводятся в браузере, пробел за пробелом и строка за строкой. Тег <pre> часто применяется для создания простых таблиц, где выравнивание столбцов создается с помощью пробелов. Следующий код, например, создает таблицу, которая выводится в браузере подобно тому, как она была введена в редакторе.
<pre> Таблица 1 Продажи по регионам ----------------------------------------------- Регион/Год 2000 2001 2002 2003 ----------------------------------------------- Восток 35.2 37.4 39.8 40.0 Запад 28.0 25.6 27.4 29.8 Юг 102.3 86.1 98.6 100.2 Север 10.5 8.6 9.8 10.4 ----------------------------------------------- </pre>
Листинг 4.17. Использование тега <pre> для сохранения форматирования редактора (html, txt)
Так как все строки текста помещены внутри тега <pre>, таблицу можно сформировать в редакторе с помощью пробелов и пустых строк. Это выравнивание возможно, потому что редактор и браузер в данном случае выводят символы моноширинным шрифтом (т.е. шрифтом постоянной ширины), создавая равномерно распределенные символы. Необходимо проверить только, что редактор применяет моноширинный шрифт (например, Courier New), чтобы аккуратно распределить текст. Вывод браузера здесь не показан, так как он совпадает с организацией таблицы, создаваемой в редакторе.
К моноширинному тексту можно добавить небольшое форматирование, если оно не изменяет размера символов, меняя тем самым величину интервала между буквами. Следующий код, например, задает для предыдущей таблицы стили шрифта полужирный и курсив, а также цвет текста.
Проверьте только, что таблица выровнена требуемым образом, прежде чем добавлять дополнительные теги оформления, что визуально смещает выравнивание текста при просмотре в редакторе. Однако эти дополнительные теги внутри тега <pre> не добавляют в таблицу пробелы при просмотре в браузере.
<pre style="color:blue"> <b>Таблица 1</b> <b>Продажи по регионам</b> ---------------------------------------------- <b><i>Регион/Год 2000 2001 2002 2003</i></b> ---------------------------------------------- <b>Восток</b> 35.2 37.4 39.8 40.0 <b>Запад</b> 28.0 25.6 27.4 29.8 <b>Юг</b> 102.3 86.1 98.6 100.2 <b>Север</b> 10.5 8.6 9.8 10.4 ---------------------------------------------- </pre>
Листинг 4.18. Добавление оформления к тексту, форматированному тегом <pre> (html, txt)
4.10. Вывод в браузере таблицы с помощью тега <pre> с дополнительным оформлением
Хотя приведенные выше примеры показывают, как кодировать таблицы данных, в дальнейшем в учебнике описано использование тегов, созданных специально для формирования таблиц. Эти теги таблиц являются наиболее распространенным способом вывода строк и столбцов табличной информации, но можно использовать тег <pre> в качестве быстрого и простого способа создания аналогичного вывода.
