🗊Презентация Списки и таблицы в HTML

Списки и таблицы

Теги списков <ol><li>...<li>...</ol> - нумерованный список <ul><li>...<li>...</ul> - маркированный список <ol> <ul> <li>ручка <li>ручка <li>тетрадь <li>тетрадь <li>линейка <li>линейка </ol> </ul> ручка ● ручка тетрадь ● тетрадь линейка ● линейка

Атрибуты нумерованного списка

Пример использования атрибутов нумерованного списка: <ol start="5">Список предметов, начиная с 5 <li >История <li >Математика <li >Физика <li>Информатика </ol> <ol type="A">Список с использованием букв <li>История <li>Математика <li>Физика <li type="1">Информатика </ol> <ol start="10" type="I" >Список с римскими цифрами <li>История <li>Математика <li>Физика <li>Химия </ol>

Атрибуты маркированного списка: <ul >Список предметов <li >История <li type="circle">Математика <li type="square">Физика <li>Информатика </ul> <ol type="1">Смешанный список <li>История <li>Математика <li>Физика <li type="1">Информатика </ol> <ul type="circle">Переделанный список из ol в ul <li>10 <li>11 <li>12 <li>13 </ul>

Пример использования списков определений: <dl> <dt>Флегматик <dd>Пассивный, очень трудоспособный... <br> <dt>Сангвиник <dd>Активный, энергичный...<br> <dt>Холерик <dd>Порывистость и сила эмоциональных реакций...<br> <dt>Меланхолик <dd>Пассивный, легко утомляющийся... </dl>

Таблицы Таблица начинается тегом <table>. Таблица состоит из строк, каждая из которых разбита на равное число столбцов. Строки открываются тегом <tr>. В строках располагаются ячейки, открываемые тегом <td>. Пример простой таблицы: <table> <tr> <td> Фамилия </td> <td> Иванов </td> </tr> <tr> <td> Имя </td> <td> Пётр </td> </tr> </table>

Атрибуты для тега <table>

Пример <table border="3" bordercolor=“magenta“ cellpadding="10" cellspacing="10"> <tr> <td background="4.jpg"> A </td> <td bgcolor="gray "> <img src="6.jpg" > </td> </tr> </table> </body>

<tr>- строка таблицы

<table border=2 cols=2 bgcolor=yellow align=center> <TR> <TH>Заголовок столбца 1</TH> <TH>Заголовок столбца 2</TH> </TR> <TR> <TD>Ячейка столбца 1, ряд 1</TD> <TD>Ячейка столбца 2, ряд 1</TD> </TR> <TR> <TD>Ячейка столбца 1, ряд 2</TD> <TD>Ячейка столбца 2, ряд 2</TD> </TR> </table>

<table width=800 height=550 border=6 bgcolor=#990099 align=center> <table width=800 height=550 border=6 bgcolor=#990099 align=center> <tr> <td width=200 height=150><center> <img src="111.JPG" width=150 height=120></td> <td width=600 ><font size=7 color=#CCCCCC><B><I><center> Морской котик </td> </tr> <tr> <td width=200 height=150><center> <img src="222.JPG" width=150 height=120></td> <td width=600 ><font size=7 color=#CCFFFF><B><I> <center> Жирафы </td> </tr> <tr> <td width=200 height=150><center> <img src="333.JPG" width=150 height=120></td> <td width=600 ><font size=7 color=#99CCFF><B><I> <center> Леопард </td> </tr> </table>