|
p align="left"> <html> <head> <title>Вася</title> </head> <body> <table width="100%" height=100%> <tr> <td align="center" valign="middle">Сдесь был Вася!</td> </tr> </table> </body> </html> Попробуйте сделать это без таблиц. Не выйдет. Разберём пример. Суть в том, что мы сделали таблицу размером во всё окно броузера с единственной ячейкой, в центр которой мы, с помощью параметров выравнивания, заданных ячейке, поместили строку текста. Вот перевод примера: <html - начало документа хтмл> <head - служебная информация> <title - заголовок окна>Вася</title - конец заголовка окна> </head - конец блока служебной информации> <body - основной блок информации> <table - нарисовать таблицу width="100%" - шириной во всё окно броузера height=100% высотой во всё окно броузера> <tr - начать новую строку таблицы> <td - начало ячейки таблицы align="center" - содержимое ячейки выровнять по центру valign="middle" - содержимое ячейки по высоте выровнять по середине>Сдесь был Вася!</td - конец ячейки таблицы> </tr - конец строки таблицы> </table - конец таблицы> </body - конец основного блока информации> </html - конец документа хтмл> Совет: здесь или в других примерах вы можете, чтобы понять, как это работает, убрать какой-нибудь параметр тэга и посмотреть, что изменится. Сделаем теперь таблицу с четырьмя ячейками: <html> <head> <title>Вася</title> </head> <body> <table border=1> <tr> <td>Первая</td> <td>Вторая</td> </tr> <tr> <td>Третья</td> <td>Четвёртая</td> </tr> </table> </body> </html> Перевожу: <html> <head> <title>Вася</title> </head> <body> <table - начало таблицы border=1 - бортик между ячейками сделать толщиной 1> <tr начало строки таблицы> <td - начало ячейки таблицы>Первая</td конец ячейки таблицы> <td - начало ячейки>Вторая</td - конец ячейки> </tr - конец строки таблицы> <tr - начало новой строки таблицы> <td - начало ячейчи>Третья</td - конец ячейки> <td начало ячейки>Четвёртая</td - конец ячейки> </tr - конец строки> </table - конец таблицы> </body> </html> Как видите, всё довольно однообразно. Параметры, которые можно указывать для тэга table (т.е. те, которые будут относиться ко всей таблице): bgcolor - цвет фона (какие значения может принимать такой параметр, мы уже обсуждали чуть выше) border - толщина "бортика" (значения: числовые, в т.ч. нуль) bordercolor - цвет "бортика" (как указывать цвета мы уже обсуждали) width - ширина таблицы (можно указывать числом - тогда вы получите таблицу соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася") height - высота таблицы (аналогично ширине) Есть и другие параметры, например lightbordercolor darkbordercolor - эти принимают различные цветовые значения. Попробуй, и ты поймёшь, для чего они нужны (это второстепенные параметры) Пример: <html> <head> <title>Вася</title> </head> <body> <table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%"> <tr> <td>Первая</td> <td>Вторая</td> </tr> <tr> <td>Третья</td> <td>Четвёртая</td> </tr> </table> </body> </html> Ширина таблицы в примере указана в абсолютных числах - 400 пикселей, а высота - в процентах. Поэтому при изменении размеров окна броузера высота таблицы будет изменяться. Теперь о параметрах, которые используются с тэгом td и изменяют, соответственно, свойства отдельной ячейки таблицы: bgcolor - цвет фона (всё так же, как для таблицы в целом) width - ширина ячейки (можно указывать числом - тогда вы получите ячейку соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася") height - высота ячейки (аналогично ширине) align - выравнивание в ячейке (значения: left - по левому краю, right - по правому, center - по центру) valign - выравнивание по высоте (Vertical ALIGN) (значения: top - по верхнему краю, bottom - по "дну", middle - посередине) Пример: <html> <head> <title>Вася</title> </head> <body> <table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%"> <tr> <td bgcolor="pink" valign="bottom" align="right" width="300" height="10">Первая</td> <td>Вторая</td> </tr> <tr> <td>Третья</td> <td>Четвёртая</td> </tr> </table> </body> </html> Обратите внимание: ячейки таблицы связаны между собой - при изменении высоты одной ячейки меняется высота всех, расположенных с нею в одной строке, при изменении ширины меняется ширина ячеек, расположенных в одном столбце. Снова усложним задачу. Сделаем таблицу из четырёх колонок с заголовком. <html> <head> <title>Вася</title> </head> <body> <table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%"> <tr> <td colspan="2">ЗАГОЛОВОК</td></tr> <td width="50%">Первая</td> <td>Вторая</td> </tr> <tr> <td>Третья</td> <td>Четвёртая</td> </tr> </table> </body> </html> Обратите внимание на параметр colspan в ячейки с заголовком: он-то и позволяет этой ячейке занять два столбца. Аналогично действуем и создавая ячейку на две строки: <html> <head> <title>Вася</title> </head> <body> <table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%"> <tr> <td colspan="2">ЗАГОЛОВОК</td></tr> <td rowspan="2">двухстрочная ячейка</td> <td>Первая</td> </tr> <tr> <td>вторая</td> </tr> </table> </body> </html> Напоследок разговора о таблицах один небольшой пример их использования. Допустим, у вас есть картинка, разделённая на четыре части (разные файлы), каждая из которых служит ссылкой. Ваша задача сделать так, чтобы исходная (выглядящая целой) картинка оказалась в центре окна броузера. Будем действовать поэтапно. Создаём таблицу размером во всё окно броузера (указывая ширину и высоту как 100%) с четырьмя ячейками и в каждую из ячеек помещаем соответствующий кусок картинки. Выравнивание в ячейках организуем так, чтобы картинка "собралась" в центре. Итак: <html> <head> <title>Вася</title> </head> <body> <table width="100%" height="100%"> <tr> <td align="right" valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td> <td align="left" valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td> </tr> <tr> <td align="right" valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td> <td align="left" valign="top"><a href="http://aport.ru"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0"></a></td> </tr> </table> </body> </html> Обратите внимание, что параметр border для всех кусков картинки взят нулевой - иначе каждая будет окружена противным голубым венчиком. Высота первой ячейки (а, следовательно, и первой строки) указанная как 65% указана для того, чтобы картинка действительно собралась в центре окна. Если этот параметр убрать, то из-за разного размера картинок результирующее изображение окажется ниже центра. Значение 65% подобрано методом тыка. Всё бы ничего, но при просмотре примера видим, что куски картинки разделены, не сливаются в единое изображение. Это можно преодолеть, используя два не описанных ранее параметра тэга table, описывающих расстояния между ячейками таблицы - cellspacing и cellpadding (точнее, между ячейками в строке и между строками). Естественно, параметр border тоже надо приравнять нулю. Пример: <html> <head> <title>Вася</title> </head> <body> <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="right" valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td> <td align="left" valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td> </tr> <tr> <td align="right" valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td> <td align="left" valign="top"><a href="http://aport.ru"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0"></a></td> </tr> </table> </body> </html> Теперь всё в порядке! В качестве последнего штриха, сделаю ссылки хотя бы чуть-чуть осмысленными и опишу каждый кусок картинки с помощью параметра alt: <html> <head> <title>Вася</title> </head> <body> <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="right" valign="bottom" height=65%><a href="http://malenkiyprinc.narod.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0" alt="Сайт о "Маленьком принце"" border="0"></a></td> <td align="left" valign="bottom"><a href="http://www.yandex.ru/yandsearch?rpt=rad&text=%EC%E0%EB%E5%ED%FC%EA%E8%E9+%EF%F0%E8%ED%F6"><img src="http://benzom.narod.ru/images/prince5_15.gif" alt="Искать "Маленький принц" в Яндексе" border="0"></a></td> </tr> <tr> <td align="right" valign="top"><a href="http://search.yahoo.com/search?p=Le+Petit+Prince&ei=UTF-8&fr=FP-tab-web-t&fl=0&x=wrt"><img src="http://benzom.narod.ru/images/prince5_17.gif" alt="Искать "Le Petit Prince" в Yahoo" border="0"></a></td> <td align="left" valign="top"><a href="http://search.rambler.ru/srch?old_q=%C0%ED%F2%F3%E0%ED+%E4%E5+%D1%E5%ED%F2+%DD%EA%E7%FE-%CF%E5%F0%E8&words=%DD%EA%E7%FE-%CF%E5%F0%E8&set=www"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0" alt="Искать "Экзю-Пери" в Rambler-e" border="0"></a></td> </tr> </table> </body> </html> К слову сказать, обратите внимание, каким образом мы добились в примере наличия кавычек в пределах параметра alt. Поскольку кавычки - символ, используемый в html-коде, возникают определённые трудности с его использованием в "смысловой" части сайта. Попробуйте вместо " поставить в примере обычные кавычки - вы увидите, возникнет ошибка. Чтобы избежать подобных ошибок, для каждого из символов, использующихся в html имеется соответствующий "заменитель", который используется, когда необходимо отобразить такой символ на экране броузера. Так, например, чтобы вывести на экран символ "<" нужно написать <
Страницы: 1, 2
| 
