Ваш первый Сайт С использованием РНР-скриптов
ВСТАВКА ТАБЛИЦЫ
Любая таблица в HTML начинается тегом <table> и заканчивается </table>. Внутри этих тегов располагаются парные теги, формирующие строки и столбцы. После откравающего тега <table> следует парный тег <tr>...</tr>, формирующий строку таблицы. Внутри этих тегов могут располагаться парные теги <td>...</td>, формирующие ячейки в данной строке. Вот, собственно, вся теория.. Например, код для таблицы с двумя строками и двумя столбцами (всего 4 ячейки) будет такой:
<table> - начало таблицы;
<tr><td>Содержимое первой ячейки<М> - начинаем первую строку и вставляем туда первую ячейку;
<td>Содержимое второй H4eimu</td></tr> - вставляем вторую ячейку и заканчиваем первую строку;
<tr><td>Содержимое третьей ячейки<М> - начинаем вторую строку и вставляем туда третью ячейку;
<td>Содержимое четвертой ячейки<М></К> - вставляем четвертую ячейку и заканчиваем вторую строку; </table> - окончание таблицы.
Если вы вставите данные строчки кода между тегами <body> и </body>, То увидите в браузере таблицу (рис. 3.5).
Содержимое первой ячейки Содержимое второй шейки Со£ержжм<>& третьей ячейки Содержимое четвёртой ячейки
Рис. 3.5
Это та самая таблица, состоящая из двух строк и двух столбцов. Самой таблицы не видно, так как мы не задали толщину границ таблицы (по умолчанию она равна нулю).
В качестве содержимого ячеек таблицы может быть текст, картинка или несколько картинок и т. п.
В теге <table> можно задать атрибуты, например width - ширина таблицы, align - выравнивание таблицы относительно боковых границ окна браузера, border - задает толщину границ таблицы в пикселях. Если параметр не указан, браузер создаст таблицу без рамок, что у' нас и получилось на рис. 3.5, bgcolor - задает цвет фона таблицы. Если же воспользоваться таблицами стилей, то, например, красный цвет фона задается так: Style="'background-color-Гed", bordercolor - задает цвет внешней рамки. Атрибуты можно задать не только для всей таблицы, но и для отдельной ячейки, в теге <td>, например, тег <td valign="top"> выравнивает текст по высоте только в данной ячейке, а тег <td align="left"> выравнивает текст по ширине (по левую сторону) в данной ячейке. Существует много других атрибутов, которые мы использовать не будем, но если вы хотите построить сайт высокого дизайна, то советую почитать дополнительную литературу по HTML.
Итак, поместим наш текст и рисунок в ячейки однострочной таблицы (листинг 3.5).
Листинг 3.5 (файл Index. php) <Html> <Head>
<Ш1е>Главная страница</Ш1е>
<link type="text/css" rel="stylesheet" href="stil. css">
</head>
<bod>
<h2 align="CENТЕк"><1>Добро пожаловать на мой сайт</1></И2>
<table width="100%"><tr>
<td width="25%"></td>
<td width="50%" valign="top">
<img src="salut. gif'></td>
<Td width=M25%"> <div>
Это учебный сайт. Он позволит быстро и наглядно изучить
Основные принципы программирования на РНР. Вы научитесь
Составлять скрипты для сайта любой сложности. Эти скрипты
Помогут вам автоматизировать добавление разнообразного материала
На ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение
Посетителей о вашем сайте при помощи гостевой книги или системы
</Div></td>
</Tr></table>
</Body>
</Html>
Разберем некоторые строчки кода:
<table width="100%"><tr> - мы задаем таблицу без рамок, общей шириной в 100 %, т. е. она будет занимать всю ширину браузера. Далее тег <tr> указывает на начало строки таблицы;
<td width="25%"></td> - создаем внутри строки первую левую ячейку таблицы шириной в 25 %. Эта ячейка пока пуста (между тегами <td> и </td> Ничего нет). Здесь мы потом разместим ссылки в виде кнопок на другие страницы;
<td width="50%" valign="top">
<img src="salut.gif></td> - создаем вторую ячейку <td>, шириной в 50 % от общей ширины браузера. Атрибут valign задает выравнивание картинки в ячейке по высоте. Этому атрибуту присвоено значение top, т. е. картинка выравнивается по верхней границе данной ячейки. Внутрь ячейки помещаем нашу картинку и закрываем тег этой ячейки </td>; < td width="25% "> <div>
Это учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов<Шу><М>
</tr></table> - задаем третью, правую ячейку, шириной в 25 % от ширины окна браузера. Помещаем туда контейнер <div>...</div> вместе с текстом. Далее закрываем ячейку </td>, закрываем пока единственную строку этой таблицы </tr>, закрываем тег самой таблицы </table>.
Текст, который до таблицы был слева, в таблице помещен в правую колонку для удобства.
Если вы заметили, то мы убрали из тегов <div> и <img> атрибут width, Который при отсутствии таблицы указывал ширину объекта в % относительно ширины браузера. Сейчас в этом уже нет необходимости, так как эти объекты помещены в ячейки таблицы, а для каждой ячейки у нас определена своя ширина в процентах. Если бы мы оставили в теге <div> атрибут Width = "25%' то текст бы занял ширину в 25 % относительно данной ячейки таблицы, а не всей таблицы.
|
Помощь ^ык Ппагинн /' / . У: А |
Результат листинга 3.5 представлен на рис. 3.6.
|
Добро тжалашпт ж. нон сайт |
|
А поасеетка; МЛ Highlighter iHTMHJS*VBS. ASF. PBP»CS. S1 |
|
Это' Ом ' - йевшэдр, Быстро и йьгтто Й^ЧИТЬ осн^йиф 0|Н*НЦИПК£ Прогршулиршсания Ж " Вы Нбучитеск 4< 4 Скрипт» яла сойта Любой Эти |
|
Вашего сайта, |
Рис. 3.6
