Этот шаг нам расскажет о дополнительных атрибутах, используемых при оформлении таблицы.
Задание расстояний между ячейками
Задание расстояния между границей и данными в ячейке
Задание ширины и высоты таблицы
Задание расстояний между ячейками
В приведенных выше примерах мы видели, что при построении таблиц каждая ячейка заключается в отдельную рамку. В языке HTML имеется возможность управлять расстоянием между рамками ячеек. Для этой цели используется параметр CELLSPACING тэга <TABLE>, форма записи которого следующая:
CELLSPACING=число
Замечание. Если этот параметр не указывается, то его значение принимается равным двум.
Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. Однако в НТМL-таблицах по умолчанию между ними оставляется свободное место. Для того чтобы его убрать, нужно задать CELLSPACING=0. В этом случае рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы.
Задание 1. Возьмите любой HTML-документ, содержащий таблицу, и добавьте параметр
CELLSPACING тэга <TABLE> с различными числовыми значениями.
Решение и комментарии вы можете посмотреть здесь.
Замечание. Если этот параметр не указывается, то его значение принимается равным единице.
Задание расстояния между границей и данными в ячейке
Помимо задания расстояния между рамками ячеек, можно управлять свободным пространством между рамкой ячейки и находящимися в ней данными. Для этой цели используется параметр CELLPADDING тэга <TABLE>, форма записи которого полностью совпадает с формой записи параметра CELLSPACING. Задаваемая в параметре CELLPADDING величина определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки.
Замечание. Установка параметра CELLPADDING=0 может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.
Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга:
- для таблицы без рамок изменение того или другого параметра приводит к одному и тому же результату;
- оба параметра влияют на соответствующие отступы одновременно по горизонтали и по вертикали.
К сожалению, раздельного управления горизонтальными и вертикальными отступами так, как это сделано, например, для отступов от изображений (параметры HSPACE и VSPACE тэга <IMG>), не предусмотрено.
Задание 2. Возьмите любой HTML-документ, содержащий таблицу, и добавьте
параметр CELLSPADDING тэга <TABLE> с различными числовыми значениями.
Решение и комментарии вы можете посмотреть здесь.
Все три параметра (BORDER, CELLPADDING и CELLSPACING) действуют независимо друг от друга. Если какой-нибудь из них опущен, то берется его значение, принятое по умолчанию. В частности, если опущены все перечисленные параметры, то минимальное расстояние между данными из смежных ячеек будет равно 6 пикселям. Это значение складывается из:
- двух пикселей для CELLSPACING;
- одного пикселя для CELLPADDING для каждой из ячеек, поэтому общая сумма равна двум;
- одного пикселя для рамки каждой из ячеек (еще два пикселя).
Наиболее компактная таблица получена заданием следующего описания:
<TABLE ВОRDER=0 CELLPADDING=0 CELLSPACING=0>
Только в таком варианте ячейки будут расположены вплотную друг к другу. Примером использования может служить таблица, все ячейки которой содержат рисунки одинакового размера, которые необходимо расположить рядом друг с другом.
Задание ширины и высоты таблицы
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов (значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, размеров окна просмотра и т.п.). При этом делается попытка представить таблицу в наиболее удобном виде: расположить таблицу так, чтобы она помещалась в окне просмотра.
В большинстве случаев автоматическое определение размеров таблицы дает в результате хорошее изображение с эффективным использованием размеров окна просмотра.
Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются следующие параметры тэга <TABLE>:
- WIDHT - ширина таблицы;
- HEIGHT - высота таблицы.
В качестве значения параметра указывается число, определяющее заданный размер таблицы в пикселях или в процентах от всего размера окна, например:
- <TABLE WIDTH=200> - ширина таблицы должна быть 200 пикселей;
- <TABLE HEIGHT=70%> - высота таблицы должна составлять 70% от текущей высоты окна просмотра.
Замечание. Заметим, что задание конкретного значения параметра, например WIDTH=200, не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности.Поясним это на примерах.
- Пусть имеется таблица, которая по умолчанию имела бы ширину, меньшую заданной. В этом случае браузер увеличит ширину таблицы до требуемой путем пропорционального расширения всех колонок таблицы. При сужении окна просмотра ширина таблицы изменяться не будет, и, возможно, для ее просмотра потребуется горизонтальная прокрутка.
- Если же таблица по умолчанию имеет ширину, большую заданной, то браузер сделает
попытку уменьшить ее ширину за счет:
- сокращения ширины отдельных колонок, для которых заданная ширина больше необходимой,
- разбиением текста в отдельных ячейках на несколько строк с увеличением высоты таблиц.
Эти действия могут не обеспечить требуемого размера таблицы, и тогда она будет
иметь минимально возможную ширину.
Такие же действия предпринимаются для таблиц, у которых не указаны размеры,
при сужении окна просмотра.
- Задавайте размеры таблицы не более 600 пикселей. Тем самым вы гарантируете, что ее содержимое можно будет просмотреть без использования горизонтальной прокрутки при любом разрешении монитора персонального компьютера пользователя.
- Конкретные алгоритмы настройки таблиц для различных браузеров могут несколько отличаться.
На следующем шаге мы рассмотрим вопрос о взаимном расположении таблицы и текста
