HTML: Табличная верстка

Верстка - процесс создания и структурирования HTML-документов.

Для того, чтобы ваш сайт хорошо выглядел, нужно тщательно проработать дизайн макета страницы. Для начала нужно определиться, будет ли содержимое сайта находиться в общем блоке или будет поделено на несколько столбцов.

Самым простым способом для создания макета сайта является тег <table>. С его помощью можно быстро разделить страницу на нужное вам количество строк и столбцов.

В следующем примере используется таблица, состоящая из 3 строк и 2 столбцов, первая и последняя строки объединяют оба столбца с помощью атрибута colspan:

<html>
  <body>

    <table style="width: 500px;border:0px;">
      <tr>
        <td colspan="2" style="background-color:#85C2FF;">
          <h1 style="color: black;">Верхняя часть сайта</h1>
        </td>
      </tr>
      <tr style="vertical-align: top;">
        <td style="background-color:#C2EBFF;width:100px;text-align:top;">
          <b>Меню</b><br>
          пункт 1<br>
          пункт 2<br>
          пункт 3
        </td>
        <td style="background-color:#fff;height:200px;width:400px;text-align:top;">
          Место для контента</td>
      </tr>
      <tr>
        <td colspan="2" style="background-color:#85C2FF;text-align:center;">
        Copyright © 2012 www.puzzleweb.ru</td>
      </tr>
    </table>

  </body>
</html>

Результат данного примера в окне браузера:

Верхняя часть сайта
Меню пункт 1 пункт 2 пункт 3	Место для контента
Copyright © 2012 www.puzzleweb.ru

Несмотря на то, что с помощью таблиц можно создавать красивый дизайн и удобные макеты страниц, в первую очередь таблицы были разработаны для добавления на страницы табличных данных, а не в качестве инструмента для разметки.

Примечание: для уменьшения объема кода и удобства редактирования css стилей, сразу для нескольких страниц, сделанных по одному шаблону, рекомендуем вам выносить весь css-код в отдельный файл.

С этой темой смотрят: