|
Использование таблиц на Интернет страницеДавайте рассмотрим как делать таблицы на странице. Вообще это САМАЯ ВАЖНАЯ тема. Поэтому ни в коем случае не пропускайте этот раздел, хоть он пожалуй самый сложный. Таблицы в 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> Пример: то таблица будет описана так: <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> ВАЖНО ЗНАТЬ. Для описания таблицы Вы должны использовать именно такой порядок: сначала пишите теги таблицы, затем теги строки, затем теги ячеек. Заполним нашу таблицу содержимым, расположив покрасивее теги <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://russia-job.ru"><img src="nebo.jpg" border="0"></a> <br><br> <a href="http://russia-job.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="100"> - это будет таблица шириной 300 пикселей и высотой 100, вот такая код таблицы такой <table width="300" border="1" height="100"> Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH и HEIGHT. т.е. использовать эти параметры в тегах <tr> и <td> Вставим в таблицу еще одну ячейку <table width="300" border="1" height="100"> т.е. получим вот такую таблицу
а теперь сделаем ширину первой ячейки = 60 <table width="300" border="1" height="100"> Таблица будет выглядеть так:
В ячейки таблицы можно писать как текст, так и вставлять ссылки, также вставлять изображение. Еще один часто употребляемый параметр для таблиц это задний фон. Для описания цвета фона используется параметр bgcolor. Например вот такой код <table width="300" border="1" height="100"> даст вот такую таблицу
Но и это еще не все! В качестве фона в таблицах можно использовать изображения! Вернемся к нашему файлу, в котором мы работали, и в котором прописан вот этот код <html> <body bgcolor="#00CCFF" text="#FFFF00"> <center> У меня отличное настроение. <br><i>Я сделал свою первую интернет страницу и всего за пару минут.</i> <br><font color="#0000FF" size="4"><b>Я самый красивый человек на свете</b></font> <br><br> <a href="http://russia-job.ru"><img src="nebo.jpg" border="0"></a> <br><br> <a href="http://russia-job.ru" target="_blank">Сайт о работе в интернете</a> <br><br> <table> <tr> <tr>
</center> </body> </html> Сохраните вот это изображение под его "родным" именем sv5.gif в той же папке, где находиться файл page.html, Для этого наведите мышку на изображение, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..". Выберите ту же папку где находиться файл page.html
Теперь внесем изменения в код нашей таблицы. <html> <body bgcolor="#00CCFF" text="#FFFF00"> <center> У меня отличное настроение. <br><i>Я сделал свою первую интернет страницу и всего за пару минут.</i> <br><font color="#0000FF" size="4"><b>Я самый красивый человек на свете!</b></font> <br><br> <a href="http://russia-job.ru"><img src="nebo.jpg" border="0"></a> <br><br> <a href="http://russia-job.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" > Замечательным свойством фонового изображения является его повторяемость! Т.е. если у вас размер ячейки больше чем изображение - то оно будет дублироваться так, чтобы заполнить все пространство ячейки. Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы. ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала... ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования... Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем... ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|