Таблицы в HTML

Таблицы в HTML являются одним из самых необходимых элементов и самыми универсальными средствами форматирования картинок и текста. Есть, конечно, и альтернативные способы, такие как слои например, но это громоздко, тяжко и неудобно... Дело в том, что всякая бродилка видит слои по своему, и для более менее приличного отображения слоев необходимо писать длинный и нудный скрипт, да и тот не панацея... В то время, как таблицы, хоть в некоторых нюансах нередко и расходятся, но расхождение-то минимально.

Итак, код простейшей таблицы 2х2 ячейки:



начало таблицы содержит:
width – ширина (у нас 200 пихелей),
border – толщина каемки/бордюра нашей таблицы (у нас 1 пихель)
cellspasing – расстояние между ячейками,
cellspadding – отступ от границ ячейки внутри нее.

остальной код:
<tr> – тег открытия строки
<td>1</td> – тег ячейки 1
<td>2</td> – тег ячейки 2
</tr> – конец строки
<tr> – начало второй строки
<td>3</td> – тег ячейки 3
<td>4</td> – тег ячейки 4
</tr> – конец второй строки
</table> – конец таблицы

Вот такая вот табличка:



добавив в код сегмент:

добавив в код сегмент:



мы получим третью строку с двумя столбиками.

Количество ячеек может располагаться и по-другому – например так:





все отличие такого построения таблиц залючается в появлении параметра rowspan="2"
цифра в котором соответствует количеству «подстрок», т.е. буквально то, сколько строк слилось в этой ячейке:





Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди 2-ки стоит ячейка с цифрой 3? Все очень просто – буквально код расшифровывается, как «ячейка 1", «ячейка 3, состоящая из ДВУХ подстрок», ячейка 2, второй строки. Но физически ячейка 3 принадлежит к ПЕРВОЙ строке! Ведь HTML читается именно построчно – слева-направо ;0)





Да, да – в той ячейке тоже достаточно прописать rowspan="2".

А что, если в правой колонке нам надо три ячейки?





Читаем код: Ячейка 1 (обычная) > ячейка 3 (состоит из трех слитых воедино строк) > ячейка 3b (тоже обычная); тут у нас начинается вторая строка. Начинается она с ячейки №2, обозначаемой как «ячейка, состоящая из двух строк, т.е. слитых по вертикали ячеек», а ячейки 3с и 3d – совершенно обычные ячейки. Для упрощения понимания строки в таблице на примере обозначены разными тонами, т.е. каждый тон соответствует строке. Это немного сложно осознать с наскока, но это весьма важно – понимать очередность считывания и принцип построения, так что напрягитесь и постарайтесь :0) От глубины понимания процесса будет зависеть умение пользоваться ВСЕМИ преимуществами таблиц, а не 10–15% которыми пользуется большинство.

Если же у нас наличествуют ячейки, совмещенные по горизонтали, то вместо тега rowspan используется тег colspan, естественно, в той ячейке, которая занимает площадь нескольких:



Так же следует отдельно запомнить, что параметры, вставляемые в тег открытия строки (<tr>) IE не воспринимаются!!! Вот, не хочет он их видеть и учитывать и все тут! Некоторые видит, а некоторые – ни в какую. Поэтому назначать теги будем только самим ячейкам или всей таблице сразу.

Рассмотрим, как задаются размеры таблиц:

Мы можем задать ширину всей таблицы в целом единой цифрой. Это может быть, как 100% (т.е. от края до края доступного пространства), так и четкая ширина в пикселях (на примере – 200):

В коде это пишется так:



Или так:



По умолчанию* (т.е. если в значении ширины после цифры не идет знак процента (%)), число, указанное в кавычках, будет расцениваться как пикселы. Главное отличие в том, что если размер указан жестко, в пикселах, то при сужении окна таблица «упрется» краями в тег, в который она вложена и не даст ему «сузиться», если тот имеет ширину, заданную относительно, т.е. в процентах от доступной ширины.

ширину мы задаем, вставляя в тег начала таблицы параметр
width="число ширины (можно в процентах)"

так же можно задать и вертикальный размер –
height="число ширины (только в пикселях!)"

Имейте в виду, что сужаемая таблица растягивается по вертикали. И этим надо пользоваться. НЕ нужно пытаться подогнать текст под жестко-фиксированную таблицу – это ламеризм. В таблице есть несколько видов выравнивания содержимого относительно краев таблиц:



в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify. Это выравнивание по ширине с обоих краев. На большинстве страничек причем, что удивительно, даже на тех, которые делают казалось бы профессиональные команды, присутствует такой ламеризм как отсутствие выравнивания по правому краю:



обратите внимание на правый край – неровно, неряшливо, некрасиво... и читать противно если это выстроено парой-тройкой столбцов, как у многих интернет «газет» и «журналов». Казалось бы – ну и подумаешь?!. однако скорость и простота восприятия реально выше, когда глаз перескакивает на начало следующей строки с всегда одинакового места, чем когда строки кончаются +/- 1 см от края. Особенно это касается больших и длинных текстов.

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

Итак, теги выравнивания. Как правильно их прописывать и с чем они связаны? Вспоминаем принцип наследования* тегов, про который шла речь во «введении».

Назначая какой-либо части или всей таблице желаемое свойство, следует представлять, как оно повлияет на расположенную в таблице информацию:



Примечание: окно при просмотре вышеприведенного примера должно быть распахнуто пошире – иначе выравнивание можно не заметить (если вложенные таблицы упрутся в края основной таблицы).

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



Есть структуры и посложнее:



Основная таблица с двумя вертикальными разделителями, в ней вложены еще несколько таблиц, на рисунке они выделенны черной каймой. Всмотритесь в структуру в целом – она поделена на вертикальные области, в которых «плавают» таблицы блоков – левой части, центральной части и правой части страницы.

Зачем такие сложности? Очень просто – если сделать структуру в виде:



Как видим из примера, единой таблицей наш дизайн не получится – ведь «распирающий» одну из ячеек текст исказит весь дизайн :0(

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

Например, у нас есть угол таблицы с менюшкой. От края надо отступить эндцать миллиметров, чтобы буквы не касались края экрана. Как это сделать? Способов есть много.

Например, ставим в ячейке главной таблицы выравнивание по правому краю, а в таблице, которую туда вкладываем, ставим выравнивание по левому. Вот что у нас получается:



Но (более правильно!) чтобы улучшить восприятие текста, прежде всего советую воспользоваться в основной таблице отступом от краев (тег cellpadding), благодаря чему у вас останутся элегантные поля. Чтобы таблица не портила вида своей рамкой, советую основную таблицу делать «невидимой» при помощи тега border (назначьте «бордер=нуль» и рамки таблицы будет не видно). Также не забывайте пользоваться тегом “justify”, который, чтобы не пихать его в текст непосредственно, можно вписать в конкретную ячейку – <td align="justify”><td>.

Как видим – таблицы позволяют сделать практически любой эффект, кроме наложения – в этом у слоев большое преимущество, но о них позже. Собственно, про таблицы на этом не заканчивается, просто остальные области относятся скорее к манипуляциям стилями и слоями.

Но напоследок уточним все параметры, какими можно манипулировать в таблицах:

выравнивание : width и height – пишутся последовательно или одиночно. Транскрипция примерно <td width="число" height="число"> </td>
Параметры задаются целым числом, либо же целым числом с %, т.е. ="100%" – выравнять по ширине от стенки до стенки.





Или вот так:





занятно, да? Теперь уточним значение использованных тегов:
bgcolor="код из шести цифр вида #000000" – задает фон ячейке, либо таблице – в зависимости, куда вставлен этот параметр.

bordercolor="#FFFFFF" – цвет бордюра (рамки)

Ну и про манипуляции с cellspacing и cellpadding не забываем, повальируйте их размеры.

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



Такой способ куда экономичнее, чем подстановка картинок – ведь всяко меньшее количество кода HTML, чем в самой маленькой картинке. Правда есть один нюанс – все раз загруженные с сайта картинки кэшируются у вас в компьютере и если, например, таких картинок-уголков у вас добрый десяток, это не означает, что одна и та же картинка будет грузиться десять раз. Напротив, она загрузится единожды и расставится по всем нужным местам. С таблицей это реализовать куда сложнее, особенно, если ваш хостинг не имеет ни SSI ни PHP. Так что в общем-то в большинстве случаев проще все-таки пользоваться картинками со сторонами пикселов по 5–10.

Да, еще мелкая, но полезная вещь – например, нам нужно вписать текст одной строкой, и чтоб таблица подстроилась под ширину этой самой строки. Но зачастую, если у таблицы не определен размер или определен заведомо меньший, чем у вашей строки, эту самую строку бродилка перенесет во вторую. Чтобы не позволить такого переноса, нужно в тег ячейки вставить слово nowrap. Никаких параметров ему прописывать не нужно, просто выделить с обеих сторон пробелами. Строка в такой ячейке будет всегда прямая. Помните только, что она будет «распирать» дизайн при попытке ужать окно до более узких размеров. Советую проверить, как это будет смотреться и помнить об этом нюансе.