Главная HTML Табличная верстка сайта (Шаблоны сайтов)

Табличная верстка web-страниц сайта

При табличной верстке используются таблицы (тег <table> )

Основные преимущество табличной вёрстки - проста и быстрота.
Таблица корректно отображается во всех браузерах и сайт выглядит везде одинаково.

Таблица представляет собой модульную сетку, в которой удобно размещать отдельные элементы веб-страницы.

Таблицы подходят для «резинового» макета, ширина которого привязана к ширине окна браузера.

Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна.

Шаблоны сайтов

Основные виды Шаблонов сайтов

Табличная верстка Шаблонов сайтов

WEB - страница

Код в документе HTML

Шаблон сайта-1

Меню

Контент

Подвал сайта

<html>
<body>
  <table border="1" bgcolor=#e8e3d4 width=100%>
    <tr><td style="color: #950000;">
        Шаблон сайта-1 </td></tr>
    <tr><td bgcolor=#ccc0b3>
        Меню</td></tr>
    <tr><td bgcolor= #ebebeb>Контент</td> </tr>
    <tr><td bgcolor=#ccc0b3>
        Подвал сайта</td></tr>
  </table>
</body>
</html>

Шаблон сайта-2
Меню	Контент
Подвал сайта

<html>
<body>
  <table border="1" bgcolor=#e8e3d4 width=100%>
    <tr style="text-align:center">
    <td colspan=2 
      style="color: #950000;>
      Шаблон сайта-2</td></tr>
    <tr><td style="width:20%">
      Меню</td>
    <td bgcolor=#ebebeb> <p>Контент </p></td></tr>
    <tr><td colspan=2 style="text-align: center">
      Подвал сайта</td></tr>
  </table>
</body>
</html>

Шаблон сайта-3
Контент	Меню
Подвал сайта

<html>
<body>
  <table border="1" bgcolor=#bfa798 width=100%>
    <tr><td style="color: #950000;">
      Шаблон сайта-3</td></tr>
        <tr>
        <td bgcolor=#ebebeb>
        <p>Контент</p></td>
        <td style="width:20%">
      Меню</td> 
        </tr>
        <tr><td colspan=2>
      Подвал сайта</td></tr>
  </table>
</body>
</html>

Шаблон сайта-4

Меню

Контент

фото дня

Подвал сайта

<html>
<body>
  <table border="0" bgcolor=#aee1fc width=100%>
  <tr style="text-align:center; font-size:16pt">
    <td colspan=3 style="color:#950000">
    Шаблон сайта-4</td></tr>
  <tr style="text-align:center">
    <td style="width:20%; background-color: #e7f5ea">Меню</td>
    <td bgcolor=#ffffff>
     <p>Контент</p> <p>Контент</p>
     </td>
    <td style="width:20%; background-color: #e7f5ea">фото дня</td>
    </tr>
  <tr style="text-align:center; color:#0552d6">
    <td colspan=3>Подвал сайта</td>
  </tr>
  </table>
</body>
</html>