[[mzd]]

Можа здесь что полезное найдешь:

Таблицы в 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> мы получим третью строку с двумя столбиками. Количество ячеек может располагаться и по-другому - например так: 1 2 3 4 5 1 3 2 4 5 <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" цифра в котором соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в этой ячейке: 1 3 2 4 5 <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 например? 1 3 3b 2 4 5 <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". *А что, если в правой колонке нам надо три ячейки? 1 3 3b 2 3c 3d <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, естетсвенно, в той ячейке, которая занимает площадь нескольких.): 1 2 3 * Так же следует отдельно запомнить, что параметры, вставляемые в тег открытия строки (<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> в начало таблицы вставлен тег выравнивания по правому краю. * а текст, как видите, может и обтекать таблицу с краев, и прилегать к тому краю, по которому выравнен. * Примечание: окно при просмотре вышеприведенного примера должно быть распахнуто пошире - иначе выравнивание можно не заметить (если вложенные таблицы упрутся в края основной таблицы). * Но (более правильно!) чтобы улучшить восприятие текста, прежде всего советую воспользоваться в основной таблице отступом от краев (тег cellpadding), благодаря чему у вас останутся элегантные поля. Чтобы таблица не портила вида своей рамкой, советую основную таблицу делать "невидимой" при помощи тега border (назначьте "бордер=нуль" и рамки таблицы будет не видно). Также не забывайте пользоваться тегом "justify", который, чтобы не пихать его в текст непосредственно, можно вписать в конкретную ячейку - <td align="justify"><td>. * Как видим - таблицы позволяют сделать практически любой эффект, кроме наложения - в этом у слоев большое преимущество, но о них позже... Собственно, про таблицы на этом не заканчивается, просто остальные области относятся скорее к манипуляциям стилями и слоями. * Но напоследок уточним все параметры, какими можно манипулировать в таблицах: * выравнивание : width и height - пишутся последовательно или одиночно. Транскрипция примерно <td width="число" height="число"> </td> Параметры задаются целым числом, либо же целым числом с %, т.е. ="100%" - выравнять по ширине от стенки до стенки. * * * * <table width="100" border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999"> <tr bgcolor="#CCCCCC"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr bgcolor="#CCCCCC"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr bgcolor="#CCCCCC"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> или вот так: * * * * * * * * * <table width="100" border="0" height="100" cellspacing="4" cellpadding="0" bgcolor="#999999"> <tr bgcolor="#CCCCCC"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr bgcolor="#CCCCCC"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr bgcolor="#CCCCCC"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> занятно, да? Теперь уточним значение использованных тегов: bgcolor="код из шести цифр вида #000000" - задает фон ячейке, либо таблице - в зависимости, куда вставлен этот параметр. bordercolor="#FFFFFF" - цвет бордюра (рамки) *Ну и про манипуляции с cellspacing и cellpadding не забываем :0) поварьируйте их размеры. *Да, еще мелкая, но полезная фича - например, нам нужно вписать текст одной строкой, и чтоб таблица подстроилась под ширину этой самой строки. Но зачастую, если у таблицы не определен размер или определен заведомо меньший, чем у вашей строки, эту самую строку бродилка перенесет во вторую. Чтобы не позволить такого переноса, нужно в тег ячейки вставить слово nowrap. Никаких параметров ему прописывать не нужно, просто выделить с обеих сторон пробелами. Строка в такой ячейке будет всегда прямая. Помните только, что она будет "распирать" дизайн при попытке ужать окно до более узких размеров. Советую проверить, как это будет смотреться и помнить об этом нюансе.

взято из учебника по HTML (с) ФуксЪ srez.ru

[s]Исправлено: [mzd], 19:30 14-10-2003[/s]