Сначала сверстаем левую ячейку.

В ячейке Copyright нужно добиться того, чтобы сверху она отчеркивалась линией, не доходящей до края ячейки на 5 пкс. Для этого сделаем соответствующий отступ внутри ячейки (справа), а все остальное пространство заполним таблицей с одной-единственной ячейкой. Верхняя граница у нее будет в виде серой линии толщиной 1 пкс (на рисунке она помечена красным пунктиром). Также для ячейки укажем цвет фона и шрифт. Текст разместим по центру.

index.html

 
 
Code
<td class="copyright"> 
 <table class="main"> 
       <tbody> 
       <tr> 
           <td class="cprghtitem">Copyright © RealErtateCompany.com</td> 
       </tr> 
       </tbody> 
 </table> 
 </td>
 
 

style.css

Code
td.copyright { 
 padding-right: 5px; 
 height: 32px;} 

 td.cprghtitem { 
 border-top: 1px solid #cacaca; 
 background-color: #f5f5f5; 
 font-size: 10px; 
 color: #656565; 
 vertical-align: middle; 
 text-align: center;}
 
 

Теперь правая ячейка (BottomMenu).

Для нее мы сделаем повторяющийся оранжевый фон. Внутри BottomMenu будет вложенная таблица - как и в первом случае, всего с одной ячейкой. Это сделано для того, чтобы в этой ячейке указать в качестве фона изображение тени. Можно было бы поступить по-другому: сделать вложенную в BottomMenu таблицу с двумя ячейками. В левую вставить тень, в правую - собственно ссылки нижнего меню. Но html-код в этом случае был бы тяжелее.

В ячейку со ссылками - назовем ее BtmenuItem - вставим ссылки, разделенные изображение точек (dots2.gif). У dots2.gif я выставила величины:

• hspace="12". Это отступ по горизонтали от картинки до текста. Он нужен, чтобы точки находились на расстоянии от букв (Как вариант можно было бы поставить пару пробелов:   ).


• vspace="1". Отступ по вертикали - для того, чтобы точки были повыше, как бы посередине букв (по вертикали).

index.html

 
 
Code
<td class="bottommenu"> 
 <table class="main"> 
       <tbody> 
       <tr> 
           <td class="btmenuitem"> 
           <a href="" class="menu">Home</a> 
           <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> 
           <a href="" class="menu">News</a> 
           <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> 
           <a href="" class="menu">About Us</a> 
           <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> 
           <a href="" class="menu">Catalog</a> 
           <img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" /> 
           <a href="" class="menu">Contacts</a> 
           </td> 
       </tr> 
       </tbody> 
 </table> 
 </td>
 
 

style.css

Code
td.bottommenu { 
 background-image: url(bottom_bg.jpg); 
 background-color: #ff8e51; 
 height: 32px;} 

 td.btmenuitem { 
 background-image: url(bottom_shadow.jpg); 
 background-repeat: no-repeat; 
 vertical-align: middle; 
 text-align: center;}
 
 

Ячейка с копирайтом и нижнее меню готовы. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.

[Table]