![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Атрибуты ячеек⇐ ПредыдущаяСтр 18 из 18
Итак, мы научились с вами строить таблицы практически любой сложности. И это важно. Возможно, многие из вас будут удивлены и разочарованы, типа зачем вообще нужны эти таблицы, зачем им уделять так много времени? Типа, мы хотим делать веб-странички, а не строить разные там графики и таблицы. И вот что я на это вам скажу. Конечно, поначалу таблицы и предназначались только для того, чтобы заполнять их скучными цифрами, сводками и никому не нужными процентами. Но нашелся вот один хороший человек (к сожалению, это была не я), который догадался, что раз в каждую ячейку можно поместить цифирьку, значит можно очень даже здорово запихнуть туда чего-то еще интересненькое и красивенькое... И пошло и поехало... Что тут началось! Все дизайнеры просто с ума посходили! Начали пихать в ячейки кто текст, кто графику, а кто и то и другое вместе, и чего только они туда не пихали и не засовывали! Дай вот им волю, сами бы туда залезли! А один умник (к счастью, это была тоже не я) даже до того свихнулся, что засунул в ячейку целую таблицу, в ячейку новой таблицы - еще одну таблицу, и так он этим делом увлекся, что его до сих пор оттудова вытащить не могут! Вот ей богу, не вру! Н-да...завралась совсем. В общем, вы поняли, что можно вытворять с обыкновенными ячейками, да? Теперь перед вами - безграничные возможности! Это вам не left или right, тут - полет фантазии! Но сначала... я перечислю все атрибуты, которые можно использовать в ячейках. Очень во многом они совпадают с атрибутами таблицы, перечисленными выше, но есть некоторые отличия.
Это самые необходимые атрибуты, которые вам нужны будут постоянно, есть еще и другие, не столь важные и которые вы можете прочитать в любом справочнике. А мы, наконец-то займемся делом. Будем впихивать и засовывать.
Урок 13. Работа с таблицами сложной структуры.
Содержание урока:
Тег colspan - объединение столбцов Тег rowspan - объединение строк Вложенные таблицы Тег colspan - объединение столбцов
Самым распространенным применением таблиц сложных структур является разметка web-страницы.
Посмотрите на рисунок:
Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега < td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено. Например,
< td colspan=" 2" >
Этот столбец включает в себя два столбца. Для нашего примера: < html>
< head> < title> Заголовок документа< /title> < /head>
< body>
< table width=" 715" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" >
< tr bgcolor=" darkred" > < td colspan=" 2" height=" 100" > шапка сайта< /td> < /tr>
< tr bgcolor=" oldlace" > < td width=" 190" height=" 300" > меню< /td> < td> контент< /td> < /tr>
< tr bgcolor=" darkred" > < td colspan=" 2" height=" 30" > низ сайта< /td> < /tr>
< /table>
< /body>
< /html> Обратите внимание, что первая и третья строки теперь содержат по одному столбцу. Рассмотрим другой пример разметки web-страницы:
Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов. Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это: < tr bgcolor=" darkred" > < td colspan=" 6" height=" 60" > шапка сайта< /td> < /tr> Вторая строка состоит из шести столбцов: < tr bgcolor=" oldlace" > < td height=" 30" > меню< /td> < td height=" 30" > меню< /td> < td height=" 30" > меню< /td> < td height=" 30" > меню< /td> < td height=" 30" > меню< /td> < td height=" 30" > меню< /td> < /tr> Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре: < tr> < td colspan=" 2" height=" 190" bgcolor=" darkred" > новости< /td> < td colspan=" 4" bgcolor=" #FFFFFF" > контент< /td> < /tr> Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой нужное количество столбцов. Тег rowspan - объединение строк А если нам понадобится вот такая разметка?
Наложим зрительно сетку, получается две строки и два столбца. Но первый столбец первой строки объединяет две строки. Для такого случая есть параметр rowspan тега < td>. Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено. Например,
< td rowspan=" 2" >
Здесь столбец включает в себя две строки. Для нашего рисунка: < html>
< head> < title> Заголовок документа< /title> < /head>
< body>
< table width=" 715" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" >
< tr bgcolor=" darkred" > < td rowspan=" 2" width=" 30%" > меню< /td> < td height=" 60" > шапка< /td> < /tr>
< tr bgcolor=" oldlace" > < td height=" 200" > контент< /td> < /tr>
< /table>
< /body>
< /html>
Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в себя две. На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности. Рассмотрим еще один пример:
Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это: < tr bgcolor=" darkred" > < td width=" 70%" height=" 60" > шапка< /td> < td rowspan=" 2" > меню< /td> < /tr> Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки): < tr bgcolor=" oldlace" > < td height=" 200" > контент< /td> < /tr> Наконец, третья строка - это один столбец, включающий в себя три столбца: < tr bgcolor=" darkred" > < td colspan=" 2" height=" 30" > низ сайта< /td> < /tr> Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.
Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере нашей последней разметки. Итак, у нас есть вот такой код: < html>
< head> < title> Заголовок документа< /title> < /head>
< body>
< table width=" 715" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" >
< tr bgcolor=" darkred" > < td width=" 70%" height=" 60" > шапка< /td> < td rowspan=" 2" > меню< /td> < /tr>
< tr bgcolor=" oldlace" > < td height=" 200" > контент< /td> < /tr> < tr bgcolor=" darkred" > < td colspan=" 2" height=" 30" > низ сайта< /td> < /tr>
< /table>
< /body>
< /html> Давайте внутрь нашего контента поместим во такую таблицу: Картинки для нее подберите сами. Код этой таблицы простой - три строки и два столбца: < table width=" 470" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" >
< tr> < td width=" 100" > < img src=" f1.jpg" width=" 100" height=" 70" > < /td> < td> Здесь текст о ромашках< /td> < /tr>
< tr> < td width=" 100" > < img src=" f2.jpg" width=" 100" height=" 70" > < /td> < td> Здесь текст о тюльпанах< /td> < /tr>
< tr> < td width=" 100" > < img src=" f3.jpg" width=" 100" height=" 70" > < /td> < td> Здесь текст о герберах< /td> < /tr>
< /table> Теперь возьмем код этой таблицы и поместим его вместо слова " контент" в код нашей разметки: < html>
< head> < title> Заголовок документа< /title> < /head>
< body>
< table width=" 715" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" >
< tr bgcolor=" darkred" > < td width=" 70%" height=" 60" > шапка< /td> < td rowspan=" 2" > меню< /td> < /tr>
< tr bgcolor=" oldlace" > < td height=" 200" >
< table width=" 470" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" >
< tr> < td width=" 100" > < img src=" f1.jpg" width=" 100" height=" 70" > < /td> < td> Здесь текст о ромашках< /td> < /tr>
< tr> < td width=" 100" > < img src=" f2.jpg" width=" 100" height=" 70" > < /td> < td> Здесь текст о тюльпанах< /td> < /tr>
< tr> < td width=" 100" > < img src=" f3.jpg" width=" 100" height=" 70" > < /td> < td> Здесь текст о герберах< /td> < /tr>
< /table>
< /td> < /tr> < tr bgcolor=" darkred" > < td colspan=" 2" height=" 30" > низ сайта< /td> < /tr>
< /table>
< /body>
< /html> Результат: Теперь уберем все границы у вложенной таблицы. Для этого в теге < table> этой таблицы зададим параметр < border=" 0" >
< table width=" 470" border=" 0" align=" center" cellspacing=" 0" cellpadding=" 10" > Результат: Именно так оформляется контент при табличной верстке сайтов. В общем, в каждую ячейку таблицы можно вставлять любые элементы, в том числе и другие таблицы. Потренируйтесь, попробуйте оформить разделы меню и шапки, используя знания, полученные на предыдущих уроках. А на сегодня урок закончен.
Вот серия наших уроков и подошла к концу. Теперь вы знаете, как сделать простой сайт и разместить его в интернете. Согласитесь, что это совсем не сложно. Пробуйте, продолжайте учиться и развивайте свои проекты. Удачи Вам! ТАБЛИЦА ЦВЕТОВ Таблица 16 основных цветов, которые используются во всех браузерах.
Таблица пурпурного цвета и его оттенков.
ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML.
|