Сложные таблицы.


Продолжаем рассматривать построение таблиц.

Объединение ячеек по горизонтали

Атрибут colspan объединяет ячейки по горизонтали.

Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="250" border="1" cellpadding="10"> <caption>Название таблицы</caption> <tr><th colspan="2">ячейка 1-2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td>ячейка 21</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 31</td><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1-2ячейка 3
   ячейка 11   ячейка 12   ячейка 13
   ячейка 21   ячейка 22   ячейка 23
   ячейка 31   ячейка 32   ячейка 33

Тег rowspan объединяет 1 и 2 ячейки верхнего ряда, компенсируя отсутствие 3-й ячейки. Размер ячейки 1-2 равен размеру двух ячеек.


Объединение ячеек по вертикали

Атрибут rowspan объединяет ячейки по вертикали.

Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="250" border="1" cellpadding="10"> <caption>Название таблицы</caption> <tr><th colspan="2">ячейка 1-2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td rowspan="2">ячейка 22-33</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1-2ячейка 3
   ячейка 11   ячейка 12   ячейка 13
   ячейка 22-33   ячейка 22   ячейка 23
   ячейка 32   ячейка 33

С помощью сложных таблиц можно делать разметку web-страницы.


Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="320" border="1" align="center" cellspacing="0" cellpadding="10"> <tr bgcolor="#029FD9"> <td colspan="2" height="80">шапка сайта</td> </tr> <tr bgcolor="white"><td width="100" height="200">меню</td><td>контент</td> </tr> <tr bgcolor="blue"> <td colspan="2" height="30">низ сайта</td> </tr> </table> </body> </html>

РЕЗУЛЬТАТ:

шапка сайта
меню контент
низ сайта

Вложенные таблицы


Давайте внутрь МЕНЮ разместим таблицу


Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="95" border="1" align="center" cellspacing="0" cellpadding="10"> <tr><td width="90" height="20"> <img src="../Poleznoe/images/knopka.jpg" alt="" width="90" height="20" /></td> </tr> <tr><td width="90" height="20"><img src="../Poleznoe/images/knopka.jpg" alt="" width="90" height="20" /></td> </tr> <tr><td width="90" height="20"><img src="../Poleznoe/images/knopka.jpg" alt="" width="90" height="20" /></td> </tr> </table> </body> </html>

РЕЗУЛЬТАТ:


Теперь разместим код этой таблицы вместо слова МЕНЮ


Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="320" border="1" align="center" cellspacing="0"cellpadding="10"> <tr bgcolor="#029FD9"> <td colspan="2" height="80">шапка сайта</td> </tr> <tr bgcolor="white"> <td width="100" height="200"><table width="95" border="0" align="center" cellspacing="0" cellpadding="10"> <tr> <td width="90" height="20"><img src="../Poleznoe/images/knopka.jpg" alt="" width="90" height="20" /></td> </tr> <tr><td width="90" height="20"><img src="../Poleznoe/images/knopka.jpg" alt="" width="90" height="20" /></td> </tr> <tr><td width="90" height="20"><img src="../Poleznoe/images/knopka.jpg" alt="" width="90" height="20" /></td> </tr> </table> </td> <td>контент</td> </tr> <tr bgcolor="blue"> <td colspan="2" height="30"> низ сайта</td> </tr> </table> </body> </html>

РЕЗУЛЬТАТ:

шапка сайта
контент
низ сайта

При вставке таблицы мы убрали рамку border="0" .


Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="95" border="0" align="center" cellspacing="0" cellpadding="10"></table> </body> </html>

Далее рассмотрим: Работа с формами.