Практика разработки Web-страниц


Неправильный шрифт в таблице - часть 2


Создавайте таблицы, используя тэги <TABLE>, <TR>, и <TD> (и тэг <TH> для заголовков столбцов). Всегда включайте закрывающий тэг для каждого блока в таблице.

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

Основные опции для таблиц и ячеек:

  • Размерность и выравнивание таблицы. Если вы хотите установить общий размер таблицы, используйте атрибуты width и height тэга <TABLE>. Для центрирования таблицы или ее выравнивания по правой или левой границе используйте атрибут align тэга <TABLE> – он работает так же, как и для тэга <IMG>.

    <table width=300 align=center>

  • Поля ячеек, отступы и границы. Для отображения границ вокруг таблицы и между ячейками установите атрибут border. Для изменения расстояния между содержимом ячеек поэкспериментируйте с атрибутами cellpadding и cellspacing. Поля (padding) – это расстояние между содержимым ячеек и их границами, а отступы (spacing) – между границами ячеек. Для размещения таблицы без границ и с ячейками, края которых соприкасаются, установите все атрибуты равными 0:

    <table cellpadding=0 cellspacing=0 border=0>

  • Ширина столбца и высота строки. Устанавливая ширину и высоту атрибутов тэга <TD>, вы можете установить размеры строки и столбца. Если вы не сделаете этого, броузер нарисует таблицу такого размера, чтобы разместить содержимое всех ячеек. Определите либо число пикселей, либо процентное отношение между шириной и высотой ячейки.

    <td width=30%>Narrow column</td> <td height=30%>Narrow row</td> <td width=70%>Wide column</td> <td height=70%>Wide row</td>

  • Выравнивание ячейки. Для выравнивания содержимого ячейки установите атрибут align для тэга <TD> (влево, вправо или по центру) или атрибут valign (по верху, по середине, по низу или по базовой линии).

    <td align=right valign=top>E-mail name:</td>

  • Растягивание колонок и рядов. Чтобы заставить ячейки растянуться более чем на одну строку или столбец, например, чтобы изображение занимало всю строку, используйте атрибуты colspan и rowspan.

    <td colspan=2><image src=banner.gif width=400 height=80></td>




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