Вложенные списки

Как маркированные, так и нумерованные списки можно вкладывать друг в друга. Причем допускается произвольное вложение различных типов списков. При вложении друг в друга маркированных и нумерованных списков следует быть внимательным. Ниже приведен пример вложенных списков:

<ul> <h3>Пример вложенных списков</h3> <li>Пункт 1</li> <ol> <li>Пункт 1.1</li> <li>Пункт 1.2</li> </ol> <li>Пункт 2</li> <ol type="i"> <li>Пункт 2.1</li> <li>Пункт 2.2</li> <li>Пункт 2.3</li> </ol> <li>Пункт 3</li> <ol type="I"> <li>Пункт 3.1</li> </ol> </ul>

Таблицы

Таблицы являются одной из основных структур, используемых для структурирования информации в HTML-документах. Кроме того, таблицы часто используются для организации структуры страницы, и хотя сейчас такое использование таблиц признано устаревшем и не рекомендуемым, оно до сих пор применяется многими веб-дизайнерами.

Пример простой таблицы:

<table border="3" cellpadding="7" cellspacing="3" height="80" width="50%"> <caption>Пример простой таблицы</caption> <tr align="center"> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr align="center"> <td align="center">2.1</td> <td align="right">2.2</td> <td>2.3</td> </tr> </table>

Для того чтобы получить таблицу, в которой несколько ячеек объединены в одну, используются атрибуты colspan и rowspan тега <td>:

<table width="75%" border="5" cellspacing="0" cellpadding="5"> <caption>Таблица с объединенными ячейками</caption> <tr> <td > </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td colspan="2" rowspan="2"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Как и списки, таблицы можно вкладывать одна в другую (рис. 15):

Рис. 15. Вложенные таблицы

<table width="100%" border="5" cellspacing="0" cellpadding="5"> <caption>Таблица-контейнер</caption> <tr> <td colspan="2" rowspan="4"> <table border="1" cellspacing="0" cellpadding="5" width="100%"> <caption>Вложенная таблица</caption> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td colspan="2" rowspan="3"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <caption>Таблица, вложенная во вложенную</caption> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>