<!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">
a:link {color:#990033}
a:visited {color:#990033}
a:hover {color:#FF0066}
a:active {color:#FFCCCC}
img {border:0}
</style>
</head>
<body style="background:#F7B2D1 url('image/fon4.jpg'); font-size:90%">
<div>
<a href="https://seodon.ru/" title="Главная страница"><img src="image/but5.png" width="107" height="32" alt="Главная страница"></a>
<a href="https://seodon.ru/news/" title="Новости"><img src="image/but6.png" width="107" height="32" alt="Новости"></a>
<a href="https://seodon.ru/contact/" title="О компании"><img src="image/but7.png" width="107" height="32" alt="О компании"></a>
<a href="https://seodon.ru/mapsite/" title="Карта сайта"><img src="image/but8.png" width="107" height="32" alt="Карта сайта"></a>
</div>
<hr style="height:3px; background:#FF0066; border:0">
<table>
<tr valign="top">
<!--Left menu-->
<td style="background:#FEC3DF url('image/fon5.jpg'); width:150px">
<img src="image/menu1.jpg" width="150" height="30" alt="Основное меню">
<a href="https://seodon.ru/html/tables.php" title="Ссылка меню 1"><img src="image/but9.jpg" width="150" height="30" alt="Ссылка 1"></a>
<a href="https://seodon.ru/html/tables.php" title="Ссылка меню 2"><img src="image/but10.jpg" width="150" height="30" alt="Ссылка 2"></a>
<a href="https://seodon.ru/html/tables.php" title="Ссылка меню 3"><img src="image/but11.jpg" width="150" height="30" alt="Ссылка 3"></a>
<a href="https://seodon.ru/html/tables.php" title="Ссылка меню 4"><img src="image/but12.jpg" width="150" height="30" alt="Ссылка 4"></a>
<a href="https://seodon.ru/html/tables.php" title="Ссылка меню 5"><img src="image/but13.jpg" width="150" height="30" alt="Ссылка 5"></a>
<hr style="height:3px; background:#FF0066; border:0">
</td>
<!--/Left menu-->
<!--Content-->
<td style="background:#FFFFFF">
<h1 style="text-align:center">Lorem ipsum dolor</h1>
<p> Lorem ipsum dolor sit amet consectetuer massa enim risus massa quis. Curabitur Maecenas euismod nibh convallis leo laoreet pede quam sollicitudin semper. Vel cursus netus Sed magnis condimentum libero molestie eu sit accumsan. Vitae tempor Quisque euismod neque congue mauris libero ac semper adipiscing. Dapibus Pellentesque lobortis Nam Vestibulum ut leo Nam nisl nunc turpis. Morbi ut In Sed senectus nec nascetur Integer tristique amet sit. Velit ac congue ridiculus ante et id Quisque eros orci tellus. Feugiat dignissim ipsum et molestie justo habitasse consequat lacinia elit egestas. In tortor sit Sed laoreet feugiat urna risus Nam augue semper. Lorem Aliquam Donec Aliquam porttitor congue Donec nisl dui ligula senectus. Congue mauris dui Vestibulum.</p>
<p> Sed Fusce pede vitae velit id pellentesque ullamcorper ut nisl orci. Justo Fusce interdum facilisi elit nulla pede nisl velit nonummy sapien. A Proin vitae Nam quis nibh Quisque dui Donec sem senectus. Mauris semper Aliquam velit Quisque nisl scelerisque sit aliquet urna et. Enim natoque Lorem hendrerit venenatis tortor semper euismod consequat laoreet In. Leo quis odio lorem et tellus sem In justo vel amet. Accumsan justo platea orci Nunc adipiscing Ut Aenean nec a mi. Est nulla Morbi neque morbi eget Vivamus at nunc.</p>
<div style="text-align:center"><a href="https://seodon.ru/html/tables.php" title="Ссылка на..."><img src="image/flower.jpg" width="147" height="143" alt="Цветок"></a></div>
<h2 style="text-align:center">Vestibulum facilisis</h2>
<p> Nulla Vivamus pellentesque lacus mauris tempor nibh Sed Sed dis in. Elit dolor pellentesque eu Vestibulum facilisis libero semper cursus et adipiscing. Condimentum urna elit sem nec libero Donec habitasse magnis massa non. Quisque diam vitae scelerisque Quisque pretium dui id dui Phasellus justo. Suscipit urna at hendrerit ac porttitor tincidunt gravida orci Curabitur cursus. Dis est sed mauris orci et magna id mauris et Vestibulum. Tellus urna semper montes tempor aliquam vel magna porttitor libero risus. Gravida convallis Aliquam convallis laoreet Aliquam massa wisi leo Morbi Nunc. Adipiscing quis auctor tempus et Nulla et sem justo elit sodales. Id justo habitasse Vestibulum id lorem elit augue Curabitur magnis auctor. Suscipit eu vitae tempus ac id.</p>
<h3>Aenean Sed</h3>
<a href="https://seodon.ru/html/tables.php" title="Ссылка на..."><img src="image/woman.jpg" style="float:right; margin:0 10px 10px 20px" width="79" height="138" alt="Человек"></a>
<p> Dolor ac sem leo vel vel justo id mauris Fusce et. Aenean Sed accumsan hac orci amet turpis vitae ullamcorper sit et. Orci faucibus dignissim Nulla velit Morbi ut et et Donec id. Morbi convallis accumsan est Nam Nulla.</p>
<h3>Aliquam Nulla</h3>
<p> Sagittis commodo vel In dolor eget hendrerit sed arcu justo fermentum. Dolor a id semper quis Aliquam Nulla nulla sed laoreet nascetur. Vestibulum facilisi velit pede odio dapibus vel nec eget felis vel. Eu Ut libero id Quisque pede cursus eros mi nulla dolor. Sagittis amet sit egestas dis consequat mi ultrices tincidunt mauris In. Nibh id id quam Aenean Vivamus suscipit ut netus sed Vestibulum. Orci elit habitasse felis enim eget Morbi Vivamus semper amet convallis. Et Morbi accumsan enim congue adipiscing eros et gravida Sed ante. Enim adipiscing vitae urna quis nunc faucibus id id ut gravida. Pede leo lorem ut venenatis scelerisque vitae eros turpis.</p>
<h2 style="clear:right; text-align:center">Urna at Nullam</h2>
<p> Urna at Nullam orci sapien Vivamus ligula pharetra Cum et lorem. Consectetuer congue ligula Praesent metus Lorem Lorem ante ante Phasellus lacinia. Sapien id nibh Phasellus Nunc In nibh felis et laoreet neque. Et nec consequat et Proin et et ut urna nulla magna. Curabitur ligula odio nisl pretium tempor tempus sem nisl tincidunt convallis. Justo hendrerit Vivamus In Maecenas Curabitur lacinia condimentum sollicitudin eu lobortis. Sit diam nulla molestie odio Morbi Proin ac ipsum sagittis Donec. Vestibulum ligula eget tristique Aenean Curabitur tellus a ligula Vestibulum commodo. Morbi eleifend laoreet eu sed pretium Nulla libero nibh porttitor felis. Sem nunc natoque.</p>
<h3>Vestibulum ipsum</h3>
<p> Dis natoque id Nullam elit a risus libero sapien Phasellus vel. Vestibulum ipsum metus montes dictum id non volutpat felis dolor cursus. Ut Morbi id neque sed Vestibulum tempus Quisque Aenean turpis lacinia. Orci malesuada fermentum Ut metus sagittis tortor Maecenas tempor Nam Pellentesque. Vestibulum auctor sapien pede nunc sollicitudin aliquam sapien ac orci et. Vitae Nullam sed eros malesuada facilisi adipiscing odio turpis nisl eu. Condimentum Phasellus consequat pellentesque justo volutpat semper quis leo nibh mauris. Ridiculus turpis Nullam eget magna Nam Morbi faucibus sapien est condimentum. Mauris elit hac nec Nam eros aliquam ut at malesuada tristique. Nunc eros Curabitur tristique sem convallis tincidunt tempus Suspendisse Nam consequat. Tempor nibh nunc feugiat enim est.</p>
<blockquote>
<p>Rutrum hendrerit rhoncus metus congue ut rhoncus at nulla vitae Curabitur. Lorem nunc et non porttitor dictumst hendrerit Nam libero Morbi Pellentesque. Semper Maecenas vitae Cras fames at parturient tellus dui urna pellentesque. Pellentesque Nam orci ac nunc sagittis ipsum consectetuer dui vitae fames. At sem Sed et interdum vestibulum Lorem sollicitudin sed pede porta. Curabitur consectetuer.</p>
<p>Ac consequat In Vivamus Aliquam libero tellus Nulla aliquet tellus mi. Vestibulum Phasellus velit mauris turpis elit Vivamus pede Aliquam Vestibulum at. Tincidunt orci vitae adipiscing et tincidunt enim convallis odio quis Morbi. Adipiscing ipsum leo adipiscing vel Nulla at ultrices volutpat metus Vestibulum. Curabitur mollis dis hac tincidunt quis.</p>
<p>Nibh auctor convallis Curabitur tortor Nullam suscipit pretium Curabitur sagittis sodales. Eu Vestibulum sapien congue Nulla In nibh nonummy ac malesuada ante. Vel tristique aliquam at laoreet faucibus pretium convallis Nullam Morbi nunc. Curabitur condimentum Curabitur fames lobortis Sed elit id quis leo volutpat. Sagittis ligula Lorem condimentum sed adipiscing volutpat nec eros Donec Morbi. Enim mi.</p>
</blockquote>
</td>
<!--/Content-->
</tr>
</table>
<hr style="height:3px; background:#CC0066; border:0">
<p style="text-align:center">
<a href="https://seodon.ru/" title="Главная страница">Главная</a> |
<a href="https://seodon.ru/news/" title="Новости">Новости</a> |
<a href="https://seodon.ru/contact/" title="О компании">О компании</a> |
<a href="https://seodon.ru/mapsite/" title="Карта сайта">Карта сайта</a>
</p>
</body>
</html>Если справились — молодцы! Теперь хочу обратить ваше внимание на левое меню. Как видите, я не заключал изображения ни в какие блоки, так как в данном случае этого не потребовалось. Во-первых, ячейки таблицы могут содержать и блочные и встроенные теги, а не только блочные, как тег <BODY>. Во-вторых, ширина столбца 150px, как и ширина картинок, поэтому они и так будут располагаться на разных строках. Вот если бы надо было изменить фон меню, тогда пришлось бы его еще и в блок <DIV> поместить и применить к нему нужные атрибуты. Ну ничего, если сделали по-другому, то не страшно, просто зачем писать лишний код.
Теперь смотрим на последний тег <H2>, помните для чего нужен "clear:right"? Никогда не забывайте про это действие, если выравниваете изображения по краю, даже если визуально оно ничего не меняет. Так как в процессе жизни вашего сайта, вы будете постоянно что-то переделывать. Например, возьмете и удалите через полгода параграф перед последним <H2> и этот заголовок с удовольствием обтечет изображение, а возможно вам этого не надо.
Вообще, в интернете у параграфов редко используется «красная строка», просто таким образом я решил вам напомнить о спецсимволах HTML.
| Вернуться в урок | → Перейти к следующему уроку |