Как растянуть таблицу?

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

Вам понадобится

• Начальные знания языка HTML

Инструкция

Сначала вам надо уточнить смысл предстоящей операции. В HTML-коде страницы таблицы представляют собой набор вложенных друг в друга парных тегов (по одному открывающему и закрывающему). Теги ячеек ( и ) вложены в теги строк ( и ), а те в свою очередь - в теги таблицы ( и ). В открывающем теге таблицы можно задавать ее ширину и высоту как в абсолютных единицах (пикселах), так и относительных (процентах). При относительных размерах за 100% принимается ширина и высота родительского элемента таблицы. Если поместить таблицу непосредственно в тело страницы (а не в слой, форму, другую таблицу, и т.д.), то размерами ее родительского элемента и будут ширина и высота страницы. Значит, чтобы растянуть таблицу на все свободное пространство, надо указать ей 100% размеры по горизонтали и вертикали.

Теперь можно заняться практической реализацией этого в HTML-коде. Ширина и высота таблицы задается атрибутами width и height. Значит код таблицы с указанием 100% размеров по всем направлениям и, например, с двумя ячейками в одной строке, может выглядеть так:

левая ячейка таблицы

правая ячейка таблицы

Указания 100% ширины и высоты будет достаточно, чтобы растянуть таблицу, если вы правильно выберите HTML-стандарт, по которому браузер должен читать код страницы. Соответствующий тег размещается в самой первой строке документа. Вам нужен тег такого содержания:

И еще один момент следует учесть в вашем коде: по умолчанию страница имеет отступы от краев окна размером в несколько пиксел, поэтому таблица, даже заполнив всю страницу, все же не растянется на все окно. Чтобы уничтожить эти ненужные поля, можно в открывающем теге тела страницы () указать нулевые отступы в соответствующих атрибутах:

В сборе весь код страницы с растянутой на всю ширину и высоту экрана таблицей будет выглядеть так:

Растянутая таблица

левая ячейка таблицы

правая ячейка таблицы

Оцените статью!