 |
 |
 |
 |
 |
|
|
|
|||||
|
|
|
| ||
Использование таблиц на страницеТеперь рассмотрим как делать таблицы на странице. Дело в том что таблицы в HTML используются в основном не для представления данных в виде таблицы, а для создания ДИЗАЙНА сайта...для создания каркаса страницы, в котором уже размещается содержимое страницы. Но обо всем по порядку. Таблица описывается парным тегом <table> и </table> <table> говорит браузеру , что начинается таблица, а </table> говорит о том, что таблица заканчивается. Запомнили ? таким образом при создании таблицы пишем сразу 2 тега <table> </table> Теперь надо описать строку таблицы. Для создания строки в таблице используется парный тег <tr> </tr> Если у нас таблица состоит из одной строки, то будет так <table> <tr> </tr> </table>
Если таблица состоит из 3 строк, то делаем так : <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> Понятно ? Но это еще не все В каждой строке должна находиться как минимум 1 ячейка..или иначе говоря надо кроме строки, описать еще как минимум один столбец. Столбцы в HTML описываются с помощью тегов <td> и </td>, которые должны находиться между тегами <tr> и </tr> Например. если у нас в таблице 1 строка и 1 столбец, т.е. например вот такая то таблица будет описана так : <table> <tr><td> </td></tr> </table> Если таблица состоит из 1 строки и 3 столбцов, т.е. вот такая то таблица будет описана вот так <table> <tr><td> </td><td> </td><td> </td></tr> </table> Если мы хотим добавить еще одну строку в таблицу из 3 ячеек, т.е. сделать вот такую таблицу то код таблицы будет такой <table> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table>
А вот содержимое ячеек пишется ТОЛЬКО МЕЖДУ тегами <td> и </td> Писать контент между <tr> и <td>, между </td> и </tr> или между </td> и </td> - НЕЛЬЗЯ. ВАЖНО. Для описания таблицы вы должны использовать именно такой порядок : сначала пишите теги таблицы, затем теги строки, затем теги ячеек. Заполним нашу таблицу содержимым, расположив покрасивее теги <table> <tr> <tr> </table>
Таблица будет выглядеть так
Так..что-то мы в теорию погрузились сильно. Надо бы заняться и практикой. Добавим код таблицы в наш учебный файл. Итого, код нашей страницы будет вот такой <html> <body bgcolor="#00CCFF" text="#FFFF00"> <center> Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i> <br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font> <br><br> <a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a> <br><br> <a href="http://moneymaster.ru" target="_blank">Сайт о том как зарабатывать в интернете</a> <br><br> <table> <tr> <tr>
</center> </body> </html> А итоговая страница будет выглядеть ТАК. А можно ли использовать на странице несколько таблиц ? Можно. А можно ли использовать таблицу внутри другой таблицы ? Можно. Но осторожно. Чтобы не запутаться и соблюдать вложенность. Давайте создадим для примера одну таблицу в другой. Сначала создадим таблицу, например 2 х 2 код таблицы будет такой <table> <tr> <tr> </table>
А теперь вставим в первую ячейку такую же таблицу 2х2, т.е. сделаем вот такую таблицу
Код нашей таблицы будет такой : <table> <tr> <table> <tr> <tr> </table> </td> <tr> </table> Красным выделен код новой таблицы, вставленной в первую ячейку основной таблицы. Да...Несколько заморочно Если кто-то начал делать приведенные последние примеры, то возможно столкнулся
с проблемой. Важно. Если в таблице нет данных - то вы может и не увидите таблицу. Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы border. По умолчанию он равен 0, поэтому таблицу без данных - не видно. Вставьте в тег таблицы значение border="1" <table border="1"> Также часто требуется задать размеры таблицы, для этого служат уже известные параметры WIDTH и HEIGHT. Эти параметры мы применяли в уроке по вставке картинки. Например вот так <table border="1" width="300" height="150"> - это будет таблица шириной 300 пикселей и высотой 150, вот такая код таблицы такой <table width="300" border="1"
height="150"> Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH и HEIGHT. т.е. использовать эти параметры в тегах <tr> и <td> Вставим в таблицу еще одну ячейку <table width="300" border="1"
height="150"> т.е. получим вот такую таблицу
а теперь сделаем ширину первой ячейки = 50 <table width="300" border="1"
height="150">
! Заполняя ячейки таблицы текстом не надо вводить набор букв без пробелов типа аозщйцгукйцгкушйгзцшукгйзцгкзйцгкзйцгкзщйзщгк23арайцугоцащ, иначе таблицу "порвет" и она выйдет за указанные вами размеры. В ячейки таблицы можно писать как текст, так и вставлять ссылки, также вставлять изображение. Еще один часто употребляемый параметр для таблиц - это бэкграунд, т.е. задний фон. Для описания цвета фона используется параметр bgcolor. Например вот такой код <table width="300" border="1"
height="150"> даст вот такую таблицу
Но и это еще не все! В качестве фона в таблицах можно использовать изображения! Вернемся к файлу с которым мы работаем и в котором прописан вот этот код <html> <body bgcolor="#00CCFF" text="#FFFF00"> <center> Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i> <br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font> <br><br> <a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a> <br><br> <a href="http://moneymaster.ru" target="_blank">Сайт о том как зарабатывать в интернете</a> <br><br> <table> <tr> <tr>
</center> </body> </html>
Проверьте также, через TotalCommander, действительно ли файл сохранился как sv5.gif, при необходимости переименуйте.
Теперь внесем изменения в код нашей таблицы. <html> <body bgcolor="#00CCFF" text="#FFFF00"> <center> Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i> <br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font> <br><br> <a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a> <br><br> <a href="http://moneymaster.ru" target="_blank">Сайт о том как зарабатывать в интернете</a> <br><br> <table> <tr background="sv5.gif"> <tr>
</center> </body> </html> В итоге мы получим вот такую таблицу
а наша страница будет выглядеть так. Возможно вы не увидели того, что требовалось увидеть. Так например Internet Explorer не понимает фоновую картинку в теге <tr>. Для того, чтобы не сталкиваться с такой проблемой - лучше писать параметр background в теге <td>. Если мы хотим сделать фон только для конкретной ячейки, то параметр background="sv5.gif" надо прописать в нужном теге <td>, т.е. вот так например <td background="sv5.gif"> Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно будет дублироваться так, чтобы заполнить все пространство ячейки.
Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.
|
.
Но вы должны четко понимать структуру таблицы. 
Сохраните вот
это изображение под его "родным" именем sv5.gif в той же директории
где находится файл page.html, для этого наведите мышку на изображение, нажмите
правую кнопку мышки и выберите "Сохранить рисунок как..". Выберите
ту же директорию где находится файл page.html