Атрибуты ячеек

Итак, мы научились с вами строить таблицы практически любой сложности. И это важно. Возможно, многие из вас будут удивлены и разочарованы, типа зачем вообще нужны эти таблицы, зачем им уделять так много времени? Типа, мы хотим делать веб-странички, а не строить разные там графики и таблицы. И вот что я на это вам скажу.

Конечно, поначалу таблицы и предназначались только для того, чтобы заполнять их скучными цифрами, сводками и никому не нужными процентами. Но нашелся вот один хороший человек (к сожалению, это была не я), который догадался, что раз в каждую ячейку можно поместить цифирьку, значит можно очень даже здорово запихнуть туда чего-то еще интересненькое и красивенькое... И пошло и поехало...

Что тут началось! Все дизайнеры просто с ума посходили! Начали пихать в ячейки кто текст, кто графику, а кто и то и другое вместе, и чего только они туда не пихали и не засовывали! Дай вот им волю, сами бы туда залезли! А один умник (к счастью, это была тоже не я) даже до того свихнулся, что засунул в ячейку целую таблицу, в ячейку новой таблицы - еще одну таблицу, и так он этим делом увлекся, что его до сих пор оттудова вытащить не могут! Вот ей богу, не вру! Н-да...завралась совсем.

В общем, вы поняли, что можно вытворять с обыкновенными ячейками, да? Теперь перед вами - безграничные возможности! Это вам не 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.