<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Вложенные таблицы в HTML</title>
<style type="text/css">
body {margin:0}
a:link {color:#FFFFFF}
a:visited {color:#F5F5F5}
a:hover {color:#000000}
img {border:0}
</style>
</head>
<body style="color:#000000; background:#FFCC33; font-family:Arial, Verdana, sans-serif; font-size:90%">
<table width="100%" cellspacing="0" cellpadding="0"><!-- Header -->
<tr>
<th style="width:250px"><!-- Logotype -->
<a name="top"></a><a href="https://seodon.ru/" title="Главная страница"><img src="image/head2.gif" width="250" height="100" alt="Seodon.ru HTML и CSS в примерах"></a>
</th><!-- End Logotype -->
<th align="center" style="font-size:120%"><!-- Top menu -->
<a href="https://seodon.ru/" style="color:#000000" title="Главная страница">Главная</a> |
<a href="https://seodon.ru/news/" style="color:#000000" title="Новости">Новости</a> |
<a href="https://seodon.ru/contact/" style="color:#000000" title="О нас">О нас</a> |
<a href="https://seodon.ru/mapsite/" style="color:#000000" title="Карта сайта">Карта сайта</a>
</th><!-- End Top menu -->
</tr>
</table><!-- End Header -->
<hr style="height:3px; background:#CC9900; border:0">
<table width="100%" cellspacing="10" cellpadding="10"><!-- Center -->
<tr valign="top">
<td rowspan="2" style="background:#3366FF; width:15%"><!-- Left menu -->
<div style="font-size:120%; text-align:center"><b>Меню</b></div>
<hr style="height:3px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 1">Ссылка меню 1</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 2">Ссылка меню 2</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 3">Ссылка меню 3</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 4">Ссылка меню 4</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 5">Ссылка меню 5</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 6">Ссылка меню 6</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 7">Ссылка меню 7</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 8">Ссылка меню 8</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 9">Ссылка меню 9</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 10">Ссылка меню 10</a>
<hr style="height:3px; background:#FFCC66; border:0">
</td><!-- End Left menu -->
<td rowspan="2" style="background:#FFFFFF"><!-- Content -->
<h1 style="text-align:center; color:#3366FF">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetuer velit eget ipsum amet augue. Justo odio enim in et malesuada Nulla Aenean mauris a enim. Et sed semper et sit Aenean interdum ac sed adipiscing Pellentesque. Pharetra ac pede et lobortis commodo pede nec at convallis ut. Elit Aenean porta eget sapien consequat dolor laoreet semper porta Nam. Tristique fermentum tempor lorem rutrum pretium Nullam porttitor Nam sit Nulla. Auctor dictum interdum ipsum et velit ut felis risus at Sed. Vitae et est sodales pretium interdum ligula interdum hendrerit ornare arcu. Est magna aliquet vitae mi laoreet pede elit ut congue nonummy. Non turpis quis volutpat nonummy Maecenas elit Aenean Sed lorem tellus. Ipsum fames et facilisis habitasse Curabitur ut Fusce odio nascetur mus. Nunc dignissim Morbi lacinia Sed Aenean adipiscing ut cursus adipiscing tempus. Turpis Nulla congue malesuada scelerisque accumsan Vestibulum nisl congue Vestibulum euismod. Augue condimentum ante nibh Vestibulum interdum fermentum rhoncus lorem natoque vel. Dui semper eget non Vivamus lacus at et a tortor id. Pellentesque risus lacus Donec fames consequat Aenean Donec hendrerit Mauris sem. Ante Nullam et Vivamus vel semper wisi platea In cursus dis. Eget diam pede felis justo Suspendisse Fusce at justo egestas nunc. Ligula laoreet tempor vel Suspendisse felis tincidunt interdum auctor id Nunc. In Sed gravida non urna tristique Nunc pellentesque ullamcorper.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Semper Sed Duis sed et nulla Maecenas faucibus pretium et convallis. Consequat tellus condimentum convallis Nunc Vestibulum pulvinar Cras parturient Aenean Curabitur. Cras turpis feugiat nulla at euismod at sed Nullam Phasellus Phasellus. Nam augue Nunc justo pellentesque nisl ac dignissim odio nulla eu. Consequat feugiat consequat montes Nam orci Nam id nibh Sed Phasellus. Montes Curabitur Nam nunc Donec ac wisi convallis est malesuada morbi. Pede lorem quis facilisis ante Aliquam convallis lorem nunc magna sit. Volutpat et sed nibh eget mus felis cursus in sagittis ut. Mi enim urna Suspendisse Curabitur et id nunc id mi elit. Sed faucibus justo fermentum quis Sed vitae quis Suspendisse mauris neque. Justo porta natoque elit Vivamus ridiculus Curabitur nunc mauris sem et. Sed sem diam dapibus In dignissim iaculis Morbi nunc nibh ut. Nibh fames turpis Cum congue morbi nibh parturient enim Vivamus et. Phasellus magna pulvinar convallis laoreet pretium rutrum penatibus laoreet In ut. At habitant.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Eu orci sit ornare cursus Suspendisse neque ac porttitor libero eleifend. Enim ut elit et condimentum Proin Morbi pretium nibh justo habitasse. Enim ut nisl In Pellentesque interdum ipsum Vestibulum sagittis at tincidunt. At Phasellus justo vel et id lorem ante Morbi interdum mauris. Semper ante libero semper justo a Sed rhoncus eget ac Nullam. Nonummy pretium risus pede parturient nisl ridiculus fringilla orci eu Suspendisse. Ut Vestibulum consectetuer Aliquam sagittis euismod quis Integer orci ultrices Sed. Tortor eu laoreet quis sed cursus eget dui vel pretium et. </p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p style="text-align:center"><em><b>Aenean congue laoreet.</b></em></p>
<!-- Первая вложенная таблица -->
<table style="margin:0 auto 0 auto; background:#6699FF" cellspacing="3" cellpadding="10">
<tr style="background:#F0F8FF"><th>Elit</th><th>Nunc</th><th>Cras</th><th>Maecenas</th><th>Nulla</th></tr>
<tr style="background:#FFFFFF"><th style="background:#F0F8FF">Enim</th><td>566</td><td>903</td><td>46</td><td>1658</td></tr>
<tr style="background:#FFFFFF"><th style="background:#F0F8FF">Quisque</th><td>855</td><td>345</td><td>789</td><td>2335</td></tr>
<tr style="background:#FFFFFF"><th style="background:#F0F8FF">Faucibus</th><td>orci</td><td>vitae</td><td>vel</td><td>leo</td></tr>
</table>
<!-- Конец первой вложенной таблицы -->
<p>Odio Suspendisse Suspendisse eros eu consectetuer diam sit molestie pellentesque cursus. Elit enim Vivamus Sed eu ligula ac libero pretium porta interdum. Semper elit Nulla ut nunc sed Aenean faucibus arcu eu lacinia. Porttitor tincidunt non tincidunt commodo in neque Pellentesque dictum vel vel. Ut In ut gravida facilisi ornare malesuada volutpat nisl Nam dui. Eu leo nulla netus nascetur ut ultrices condimentum eu id neque. Risus tempor diam est dignissim amet Curabitur justo interdum cursus wisi. Et mauris Nulla scelerisque vel id congue lacus dignissim vitae Suspendisse. Integer Nam platea at elit mauris Nullam enim ut Sed nascetur. Orci In velit quis tincidunt ipsum velit facilisi at at elit. Ac et leo justo ut quis justo laoreet et iaculis enim. Consectetuer nunc dignissim enim purus tempus nulla iaculis metus quis nulla. Justo elit sit orci rhoncus Sed vel ac vitae nec Nulla. Porttitor dui semper sed et vitae sagittis pede convallis scelerisque adipiscing. Nunc pede tincidunt convallis metus ut Cum consequat id lacinia dui. Nunc hendrerit hendrerit enim porttitor habitant nonummy pretium vitae Pellentesque In. Quis tempor sem nec malesuada ut metus pretium pretium Vestibulum Quisque. Et tellus orci risus a auctor tortor Morbi nec tempus ut. Tincidunt mauris ipsum dui ut scelerisque quis a nec Donec mauris. Magna.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Orci et arcu pretium dictumst elit laoreet elit Aenean tellus nibh. Condimentum interdum consequat felis lacus sed orci metus tristique pede id. Semper Donec et wisi fames non dui a nec In mauris. Phasellus id at Quisque Nam sapien justo sociis Nullam justo ipsum. Integer id Aenean commodo consequat Curabitur id euismod ipsum quis tempus. Pede elit nulla sociis mus sem neque id eros facilisis laoreet. Curabitur malesuada Vestibulum vitae laoreet pellentesque Curabitur quis feugiat consectetuer nonummy. Consequat Pellentesque at congue ac et elit justo pellentesque magnis eget. Elit malesuada pretium volutpat sem wisi pellentesque congue morbi velit parturient. Nisl consequat feugiat Curabitur est facilisi consequat sagittis neque Morbi adipiscing. Pretium laoreet sem pede ornare id.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Orci nec egestas interdum urna Aenean congue laoreet amet nulla ac. Condimentum augue nulla eu consequat tortor In mollis sem Maecenas id. Id sagittis elit parturient wisi tellus urna eleifend rhoncus id justo. Dignissim Donec Aliquam scelerisque et faucibus dapibus fermentum amet Praesent leo. Et molestie lacus ligula tincidunt est consequat interdum leo et tristique. Mollis Nunc at ut ipsum suscipit vel sed at Cras In. Rhoncus pretium faucibus elit Lorem risus tempus tempor nunc id ac. Metus et et mauris Curabitur ipsum Vestibulum condimentum nibh leo a. Sem lobortis faucibus enim pretium nunc malesuada ipsum Aenean Maecenas hac. Vel et interdum elit Phasellus a dictumst Cras eleifend odio amet. Convallis Mauris Curabitur interdum laoreet risus tortor pretium malesuada Nam massa. Faucibus Vestibulum orci pede.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Justo felis vel Suspendisse Curabitur Vestibulum semper orci adipiscing non elit. Risus ut eget pede congue tempor interdum nibh fermentum ac natoque. Vestibulum tempor mollis consequat felis eget eget lacinia velit ac ligula. Ut pulvinar lobortis cursus vitae condimentum ipsum Phasellus Donec libero Vestibulum. Nam Aliquam id interdum Cras consequat Curabitur Lorem diam pharetra Pellentesque. Tincidunt Quisque eu velit ultrices quis non tellus leo et augue. Sociis lorem pede justo orci mauris Vestibulum elit adipiscing habitasse dignissim. Pede dui et massa et ac non nunc dolor Integer egestas. Pellentesque quis Sed quis vitae nec in Nam nonummy dui Curabitur. Nunc dictum nunc.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Phasellus nec a Morbi at quis facilisis condimentum tempor nibh urna. Elit nunc Integer semper nibh nec vitae convallis ut tincidunt libero. Tempor tincidunt est laoreet wisi urna non Aenean pede ac euismod. Et at dui nec pharetra vel vel Nam non et Mauris. Augue Mauris congue auctor congue et Cum quis et Nam eros. Nulla morbi fringilla nibh Curabitur pellentesque a auctor nibh justo quis. Egestas id interdum nunc sodales dolor non Vestibulum Lorem malesuada ligula. Congue mollis Nulla platea eleifend sapien id urna urna Nunc dui. Pretium Curabitur venenatis elit tellus semper ut ut nonummy sed elit. Curabitur laoreet et Donec ligula commodo dictumst nonummy Pellentesque habitant ligula. Ut tincidunt tellus at ornare tincidunt dui egestas tincidunt Vestibulum In. Nullam urna pede semper nec condimentum nunc Ut Maecenas quis interdum. At suscipit ante pellentesque quis In fames lorem a turpis.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
<p>Lacus Aliquam et orci Cras pede Nam id Nam semper risus. Id Curabitur convallis vel urna Nunc Sed ridiculus consequat sed euismod. Lobortis leo mus eget magnis sagittis justo amet lobortis Quisque wisi. Sed Aenean Sed sociis auctor nascetur eu In id vitae vitae. Enim id lorem dolor et tempus risus pulvinar sit Suspendisse justo. Augue egestas tempus et Aenean porta Quisque aliquam vel cursus id. Dui at Nulla ipsum tortor laoreet tellus urna justo quis pellentesque. Nisl rutrum non ipsum non facilisi sem ipsum metus risus ante. Vestibulum orci ac Nullam malesuada ut a mauris id a gravida. Laoreet tortor Vestibulum montes a suscipit nibh consectetuer gravida laoreet elit. Faucibus dui nibh quam ipsum nibh scelerisque In nunc tincidunt odio. Hac augue ultrices adipiscing ut sem hendrerit massa Vestibulum pellentesque ligula. Et leo pede porttitor metus In ipsum metus Ut habitant et. Lacus mauris tellus et ridiculus quis amet nisl elit Aenean faucibus. Sed Nunc Donec velit quis eros urna vel faucibus lobortis pulvinar. Ligula id aliquet Sed sapien Praesent eu eros tempus congue ligula. Eros dui turpis quis consectetuer quis volutpat lacus risus Ut ac. Sit.</p>
<div style="text-align:right">↑ <a href="#top" style="color:#000000">В начало</a> ↑</div>
</td><!-- End Content -->
<td style="background:#3366FF; width:15%"><!-- Right Top menu -->
<div style="font-size:120%; text-align:center"><b>Дополнительно</b></div>
<hr style="height:3px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 1">Ссылка меню 1</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 2">Ссылка меню 2</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 3">Ссылка меню 3</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 4">Ссылка меню 4</a>
<hr style="height:1px; background:#FFCC66; border:0">
<a href="https://seodon.ru/html/tables-nested-tables.php" title="Ссылка меню 5">Ссылка меню 5</a>
<hr style="height:3px; background:#FFCC66; border:0">
</td><!-- End Right Top menu -->
</tr>
<tr>
<td><!-- Right Bottom menu -->
<!-- Вторая вложенная таблица -->
<table style="margin:0 auto 0 auto; background:#FFFFFF" cellspacing="5" cellpadding="0">
<tr>
<td>
<a href="https://seodon.ru/"><img src="image/symbol1.jpg" width="31" height="31" alt="Символ 1"></a>
</td>
<td>
<a href="https://seodon.ru/"><img src="image/symbol2.jpg" width="31" height="31" alt="Символ 2"></a>
</td>
</tr>
<tr>
<td>
<a href="https://seodon.ru/"><img src="image/symbol3.jpg" width="31" height="31" alt="Символ 3"></a>
</td>
<td>
<a href="https://seodon.ru/"><img src="image/symbol4.gif" width="31" height="31" alt="Символ 4"></a>
</td>
</tr>
</table>
<!-- Конец второй вложенной таблицы -->
</td><!-- End Right Bottom menu -->
</tr>
</table><!-- End Center -->
<hr style="height:3px; background:#CC9900; border:0">
<table cellpadding="10" width="100%"><!-- Footer -->
<tr align="center">
<td>
<a href="https://seodon.ru/" style="color:#000000" title="Главная страница">Главная</a> |
<a href="https://seodon.ru/news/" style="color:#000000" title="Новости">Новости</a> |
<a href="https://seodon.ru/contact/" style="color:#000000" title="О нас">О нас</a> |
<a href="https://seodon.ru/mapsite/" style="color:#000000" title="Карта сайта">Карта сайта</a>
</td>
</tr>
</table><!-- End Footer -->
</body>
</html>Надеюсь, вы не забыли у всех изображений установить атрибуты width, height и, особенно, alt, помните почему?
Если ваш вариант HTML-кода чем-то отличается — это нормально, главное соблюдать синтаксис HTML. Кстати, вы всегда можете проверить ваш код на соответствие синтаксису специальными программами-валидаторами. Так как в коде ошибаются и будут ошибаться все — и новички, и профессионалы. Самый популярный валидатор создан той самой компанией W3C, которая занимается разработкой языка HTML. Выбираете там вкладку Validate by Direct Input, копируете в окошко весь код вашей странички и нажимаете Check. Если после проверки, вверху появилась зеленая строчка, то код правильный, если красная — есть ошибки. Что за ошибки — написано внизу страницы, правда, там все на английском, но, даже не зная его можно понять, о чем идет речь.
Но валидатор может отследить не все ошибки, хотя и большинство. Он отслеживает правильность написания тегов и атрибутов, правильную вложенность тегов, их тип содержимого, проверяет все ли закрывающие теги проставлены (там, где они обязательны) и т.д. то есть, например, если вы внутрь ссылки вставите тег параграфа или другую ссылку, либо в теге <BODY> укажете тег уровня строки, который не находится внутри блочного тега — валидатор сразу вам об этом скажет. А вот правильность написания значений атрибутов, то есть того, что находится между кавычками " ", он практически не отслеживает, так как значения могут быть абсолютно разными и непредсказуемыми (например, имя файла), ну вы это уже и сами знаете.
| Вернуться в урок | → Перейти к следующему уроку |