В своё время, только начиная изучать азы web-дизайна, я столкнулся с проблемой смехотворной, но знакомой каждому начинающему web-мастеру: как расставить на странице все элементы так, чтобы они гармонично сочетались и, при этом, не мешали друг другу.
Перейдя с места в карьер, я стал использовать слои, но столкнулся с тем, что не все браузеры их поддерживали, а значит, не могли правильно отформатировать мои страницы. Это заставило меня уделить внимание таблицам.
Опыт, приобретенный в дальнейшем, показал, что таблицы, при всей банальной простоте своего построения, не так уж и просты. Ошибиться в форматировании страницы с помощью таблиц также легко, как и строить их. При этом, ошибки дают о себе знать неожиданно, как бы исподтишка, в разных браузерах по-разному. И приходится тратить массу времени для выявления и устранения ошибки, так, чтобы не породить новую.
Тема данной статьи может вызвать снисходительную улыбку у того, кто считает себя ассом в web-дизайне, тем не менее, я рассчитываю на внимание тех, кто только начал свой путь на этом поприще, или всегда открыт для восприятия накопленного другими опыта.
1. Таблицы как таковые.
Для начала, напомню самое простое: как создается каркас таблицы. Все начинается с пары тегов table:
. Они имеют свои стандартные параметры align, border, cellspacing, cellpadding, width, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: Стандартными параметрами для строки являются align и valign, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов — это теги самих ячеек: . С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: thead, th, tbody и tfoot. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в html-документе.
В самом простом варианте (с учётом всех вышеуказанных тегов) табличный код выглядит вот так:
(table align=left border=1 cellspacing=0 cellpadding=4 width=100%)
(thead)
(tr align=center valign=top)
(th valign=top colspan=3)Заголовок(/th)
(/tr)
(/thead)
(tbody)
(tr align=center valign=top)
(td align=center valign=top)Ячейка 1(/td)
(td align=center valign=top)Ячейка 2(/td)
(td align=center valign=top)Ячейка 3(/td)
(/tr)
(/tbody)
(tfo ot)
(tr align=center valign=top)
(td align=center valign=top colspan=3)Заключение(/td)
(/tr )
(/tfoot)
(/table).
замените «(» на »
Источник: