Занятие 7 Таблицы и списки
реклама
Занятие 7 Таблицы и списки Создание нумерованных и маркированных списков Список всегда располагается между открывающим и закрывающим тегом списка: <OL> и </OL> нумерованный список <UL> и </UL> маркированный список Внутри списка располагаются его элементы. Их заключают между тегами <LI> и </LI> <HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODY text="#336699" bgcolor="#000000"> <p align=“center”> <H2>Здравствуйте, это моя первая страница. </H2> </p> <BR> <font color=“red"> <H3> Добро пожаловать! :) </H3> </font> <p align="justify"> <img src="MYFOTOS/SP_A0268.jpg"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли </p> <UL> <LI> посмотреть мои фотографии</LI> <LI> почитать обо мне </LI> <LI> черкнуть пару строчек в мою гостевую книгу </LI> </UL> <p align="justify"> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size=+3 color=“olive”>еще один виртуальный друг? :) </font > </p> </BODY> </HTML> "Учимся создавать таблицы" Таблица задается тэгом: <table></table> Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их. <tr></tr> - строчка таблицы <td></td> - столбец (ячейка) таблицы <HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODY text="#336699" bgcolor="#000000"> <p align=“center”> <H2>Это моя первая таблица </H2> </p> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </p> </BODY> </HTML> <HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODY> <p align=“center”> <H2>Это моя первая таблица </H2> </p> <table> <tr> <td bgcolor=“#FFCC33” >1</td> <td bgcolor=“#336699” >2</td> <td bgcolor=“#FFCC33” >3</td> </tr> <tr> <td bgcolor=“#336699” >4</td> <td bgcolor=“#FFCC33” >5</td> <td bgcolor=“#336699” >6</td> </tr> </table> </p> </BODY> </HTML> Изменение высоты и ширины • Height = “40” – высота ячейки (в пикселях или в процентах) • Width = “40” - ширина ячейки <HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODY> <p align=“center”> <H2>Это моя первая таблица </H2> </p> <table> <tr> <td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td> <td width="50" bgcolor="#336699"> 1x2 </td> <td width="50" bgcolor="#FFCC33"> 1x3 </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699"> 2x1 </td> <td width="50" bgcolor="#FFCC33"> 2x2 </td> <td width="50" bgcolor="#336699"> 2x3 </td> </tr> </table> </p> </BODY> </HTML> Выравнивание содержимого внутри таблицы <td bgcolor="#FFCC33"> <center>1</center> </td> <td bgcolor="#336699"> <center> 2</center> </td> <td bgcolor="#FFCC33"> <center>3</center> </td> Вертикальное выравнивание valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу) <td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1</center> </td> <td width="50" bgcolor="#336699" valign=“middle"> > <center>2</center> </td> <td width="50" bgcolor="#FFCC33" valign="bottom"> <center>3</center> </td> </tr> Растягиваем (объединяем) ячейки • Colspan - определяет количество столбцов, на которые простирается данная ячейка, • Rowspan - количество рядов, на которые простирается данная ячейка (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Растягиваем (объединяем) ячейки <table> <tr> <td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td> <td width="50" bgcolor="#336699"> <center>1x2</center> </td> </tr> <tr> О рамках таблиц <table border=“5”> (ширина в пикселях) bordercolor="#000000“ – цвет рамки
