CSS — макеты

Надеюсь, вам очень удобно работать с таблицами HTML, и вы эффективно разрабатываете макеты страниц, используя таблицы HTML. Но вы знаете, что CSS также предоставляет множество элементов управления для позиционирования элементов в документе. Поскольку CSS — это волна будущего, почему бы не изучить и использовать CSS вместо таблиц в целях верстки страниц?

В следующем списке собраны некоторые плюсы и минусы обеих технологий —

• Большинство браузеров поддерживают таблицы, в то время как поддержка CSS постепенно внедряется.

• Таблицы более щадящие, когда изменяется размер окна браузера — изменяя их содержимое и обтекание, чтобы приспособить изменения соответственно. CSS-позиционирование имеет тенденцию быть точным и довольно негибким.

• Таблицы намного легче изучать и манипулировать, чем правила CSS.

Большинство браузеров поддерживают таблицы, в то время как поддержка CSS постепенно внедряется.

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

Таблицы намного легче изучать и манипулировать, чем правила CSS.

Но каждый из этих аргументов можно обратить вспять —

• CSS имеет решающее значение для будущего веб-документов и будет поддерживаться большинством браузеров.

• CSS является более точным, чем таблицы, что позволяет просматривать документ так, как вы хотели, независимо от окна браузера.

• Отслеживание вложенных таблиц может быть настоящей болью. Правила CSS, как правило, хорошо организованы, легко читаются и легко меняются.

CSS имеет решающее значение для будущего веб-документов и будет поддерживаться большинством браузеров.

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

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

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

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

<table style = " table-layout:fixed ;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

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

Пример колонки

Вот шаги для создания простого макета столбца с использованием CSS —

Установите поля и отступы всего документа следующим образом —

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

Теперь мы определим столбец с желтым цветом, а позже мы добавим это правило к <div> —

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

До этого момента у нас будет документ с желтым телом, поэтому давайте теперь определим другое деление внутри уровня 0 —

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

Теперь мы вложим еще одно деление в level1 и изменим только цвет фона —

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

Наконец, мы будем использовать ту же технику, вложив деление уровня 3 в level2, чтобы получить визуальный макет для правильного столбца —

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

Завершите исходный код следующим образом —

Live Demo

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>