| | Таблицы в HTML являются одним из самых необходимых элементов, и самыми универсальными средствами форматирования картинок и текста. Есть коенчно и альтернативные способы, такие как слои например, но это громоздко, тяжко и неудобно.. Дело в том, что всякая бродилка видит слои по своему, и для более менее приличного отображения слоев необходимо писать длиунный и нудный скрипт, да и тот не панацея.. В то время как таблицы, хоть в некоторых нюансах нередко и расходятся, но расхождение то минимально.
Итак, код простейшей таблицы 2х2 ячейки:
<table width="200" border="1" cellspacing="0" cellpadding="0">
начало таблицы содержит:
width - ширина (у нас 200 пихелей),
border - толщина каемки/бордюра нашей таблицы (у нас 1 пихель)
cellspasing - расстояние между ячейками,
cellspadding - отступ от границ ячейки внутри нее.
остальной код:
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
тег открытия строки
тег ячейки 1
тег ячейки 2
конец строки
начало второй строки
тег ячейки 3
тег ячейки 4
конец второй строки
конец таблицы
добавив в код сегмент:
<tr>
<td>3</td>
<td>4</td>
</tr>
мы получим третью строку с двумя столбиками.
Количество ячеек может располагаться и по-другому - например так:
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>
выделенние жирным в коде соответствует закрашености серым цветом в таблице.
все отличие такого построения таблиц залючается в появлении параметра rowspan="2"
цифра в котором соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в этой ячейке:
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>
Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди 2-ки стоит ячейка с цифрой 3? Все очень просто - буквально код расшифровывается как "ячейка 1", "ячейка 3, состоящая из ДВУХ подстрок", ячейка 2, второй строки. Но физически ячейка №3 принадлежит к ПЕРВОЙ строке! Ведь HTML читается именно построчно - слева-направо ;0)
А что будет, если поставить после 3-ки еще такую же ячейку? 3b например?
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
<td rowspan="2">3b</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table>
Да, да - в той ячейке тоже достаточно прописать rowspan="2".
А что, если в правой колонке нам надо три ячейки?
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="3">3</td>
<td>3b</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3c</td>
</tr>
<tr>
<td>3d</td>
</tr>
</table>
Читаем код: Ячейка 1 (обычная) > ячейка 3 (состоит из трех слитых воедино строк) > ячейка 3b (тоже обычная), тут у нас начинается вторая строка. Начинается она с ячейки №2, обозначаемой как "ячейка, состоящая из двух строк, т.е. слитых по вертикали ячеек", а ячейки 3с и 3d - совершенно обычные ячейки. Для упрочщения понимания, строки в таблице на примере обозначены разными тонами, т.е. каждый тон соответствует строке. Это немного сложно осознать с наскока, но это весьма важно - понимать очередность считывания и принцип построения, так что напрягитесь и постарайтесь :0) От глубины понимания процесса будет зависеть умение пользоваться ВСЕМИ преимуществами таблиц, а не 10-15% которыми пользуется большинство.
Если же у нас наличествуют яейки совмещенные по горизонтали, то вместо тега rowspan используется тег colspan естетсвенно в той ячейке, которая занимает площадь нескольких.):
Так же следует отдельно запомнить, что параметры, вставляемые в тег открытия строки (<tr>) IE не воспринимаются!!! Вот не хочет он их видеть и учитывать и все тут. Некотрые видит, а некоторые - ни в какую. Поэтому назначать теги будем только самим ячейкам или всей таблице сразу.
Рассмотрим как задаются размеры таблиц:
Мы можем задать ширину всей таблицы в целом единой цифрой. Это может быть как 100% (т.е. от края до края доступного пространства), так и четкая ширина в пикселях (на примере - 200):
В коде это пишется так:
<table width="200" border="1" cellpadding="0" cellspacing="0"> Или так:
<table width="100%" border="1" cellpadding="0" cellspacing="0">
По умолчанию* (т.е. если в значении ширины после цифры не идет знак процента (%)), число, указанное в кавычках, будет расцениваться как пикселы. Главное отличие в этом в том, что если размер указан жестко, в пикселах, то при сужении окна таблица "упрется" краями в тег в который она вложена и не даст ему "сузиться", если тот имеет ширину заданную относительно, т.е. в процентах от доступной ширины. Для большей наглядности рассмотрите этот пример.
ширину мы задаем, вставляя в тег начала таблицы параметр
width="число ширины (можно в процентах)"
так же можно задать и вертикальный размер -
height="число ширины (только в пикселях!)"
Имейте ввиду, что сужаемая таблица растягивается по вертикали. И этим надо пользоваться. НЕ нужно пытаться подогнать текст под жестко-фиксированную таблицу - это ламеризм. В таблице есть несколько видов выравнивания содержимого относительно краев таблиц:
align="left" align="middle" align="right"
valign="top" valign="middle"
align="center" valign="bottom"
align="right"
в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify. Это выравнивание по ширине с обоих краев. На большинстве страничек, причем, что удивительно даже на тех, которые делают казалось бы профессиональные команды, присутствует такой ламеризм как отсутствие выравнивания по правому краю:
...в каждой ячейке указан тип примененного в ней выравнивания, но кроме них существует еще и параметр justify.
Это выравнивание по ширине с обоих краев. На большинстве страничек, причем, что удивительно даже на тех, которые делают казалось бы профессиональные команды, присутствует такой ламеризм как отсутствие выравнивания по правому краю:
обратите внимание на правый край - неровно, неряшливо, некрасиво.. и читать противно если это выстроено парой-тройкой столбцов, как у многих интернет "газет" и "журналов". Казалось бы - ну и подумаешь.. однако скорость и простота восприятия реально выше, когда глаз перескакивает на начало следующей строки с всегда одинакового места, чем когда строки кончаются +/- 1 см от края. Особенно это касается больших и длинных текстов.
Именно поэтому я всем советую не забывать пр оэтот важный и нужный тег. Ведь и страничка станет куда красивше, выстроившись ровными столбиками, а не чем-то на манер потерявшей половину зубцов расчески :0)
итак.. теги выравнивания. Как правильно их прописывать и с чем они связаны? Вспоминаем принцип наследования* тегов, про который шал речь во "введении".
Назначая какой либо части или всей таблице желаемое свойство, следует представлять как оно повлияет на расположеную в таблице информацию:
выравнивание о левому краю
без параметров
тег выравнивания <centre></centre> примененный на эту ячейку на вложенную таблицу никоим образом не влияет - только на текст.
внутри ячейки применен
параметр "выравнивание
справа", но ему
противостоит тег
равнения по середине -
как видим тег
выравнивания по центру
получает приоритетное
влияние , как бы "забивая"
старший тег.
в это же время тег равнения на центр совершенно не влияет на выравнивание внутри таблицы другой таблицы или картинки - тег <centre></centre>влияет только на текст. применен тег выравнивания по левму краю, как в ячейке, так и в виде стандартного <centre>
в начало таблицы вставлен тег выравнивания по правому краю.
а текст, как видите может и обтекать таблицу с краев, и прилегать к тому краю, по которому выровнен.
Примечание: окно при просмотре вышеприведенного примера должно быть распахнуто пошире - иначе выравнивание можно не заметить (если вложенные таблицы упрутся в края основной таблицы).
При помощи таблиц можно осуществить самый замысловатый дизайн, расположить содержимое практически как угодно
Основная таблица с двумя вертикальными разделителями, в ней вложены еще несколько таблиц, на рисунке они выделенны черной каймой. Всмотритесь в структуру в целом - она поделена на вертикальные области, в которых "плавают" таблицы блоков - левой части, центральной части и правой части страницы.
Как видим из примера, единой таблицей наш дизайн не получится - ведь "распирающий" одну из ячеек текст исказит весь дизайн :0(
Вот именно поэтому и нужно пользоваться вложенными в одну, большую таблицу несколькими таблицами-блоками. Кроме того, это открывает дополнительные возможности по разметке всего этого хозясйтва.
Например у нас есть угол таблицы с менюшкой. От края надо отступить эндцать миллиметров, чтобы буквы не касались края экрана. Как это сделать? Способов есть много.
Например, ставим в ячейке главной таблицы выравнивание по правому краю, а в таблице, которую туда вкладываем, ставим выравнивание по левому.
Но более правильно, чтобы улучшить восприятие текста, прежде всего советую воспользоваться в основной таблице отступом от краев (тег cellpadding), благодаря чему у вас останутся элегантные поля. Чтобы таблица не портила вида своей рамкой, советую основную таблицу делать "невидимой" при помощи тега border (назначьте "бордер=нуль" и рамки таблицы будет невидно). Так же не забывайте пользоваться тегом "justify", который чтобы не пихать его в текст непосредственно, можно вписать в конкретную ячейку - <td align="justify"><td>.
Как видим - таблицы позволяют сделать практически любой эффект кроме наложения - в этом у слоев большое преимущество, но о них позже... Собственно про таблицы на этом не заканчивается, просто остальные области относятся скорее к манипуляциям стилями и слоями.
От себя добавлю, что для правильного отображения таблиц во всех браузерах не стоит задавать атрибуты тегу <tr>, лучше это делать для тега <td>. | |
