Вёрста на слоях. Учимся создавать таблицу » Блог Обычного веб-мастера

Совсем недавно учил своего друга как правильно вестать на слоях. До этого он долго и упорно возился с талицами и то ли от лени, то ли просто еретик, но div вёрстку он освоил . Решил и с вами поделится данными секретами…

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

И так, подобная конструкция создаст нам таблицу с ячейками (две строки, в каждой по две ячейки):

• <table border=»1″>
  <tr>
  <td width=»50%»>
  1.1
  </td>
  <td width=»50%»>
  1.2
  </td>
  </tr>
  <tr>
  <td width=»50%»>
  2.1
  </td>
  <td width=»50%»>
  2.2
  </td>
  </tr>
  </table>

Подобную конструкцию мы можем создать и с помощью слоёв, это будет выглядеть намного аккуратнее, красивее и вообще профессиональнее:

• <div>
  <div style=»float: left; width: 49%;»>1.1</div>
  <div style=»float: right; width: 49%;»>1.2</div>
• <div style=»float: left; width: 49%;»>2.1</div>
  <div style=»float: right; width: 49%;»>2.2</div>
• <div style=»clear: both;»></div>
  </div>

Все свойства можно простов вывести в CSS и будет всё намного лучше смотрется. Сам html код:

• <div>
  <div class=»left»>1.1</div>
  <div class=»right»>1.2</div>
• <div class=»left»>2.1</div>
  <div class=»right»>2.2</div>
• <div class=»clear»></div>
  </div>

CSS для кода:

• <style type=»text/css»>
  div {
  border: 1px solid red;
  }
  .left {
  float: left;
  width: 49%;
  }
  .right {
  float: right;
  width: 49%;
  }
  .clear {
  clear: both;
  }
  </style>

Самый нижний блок создан для того, что бы вся конструкция не «расползалась» в некоторых браузерах, например всё тот же Internet Explorer. Как видите, ничего сложного здесь нет! Да и быть не может, веть html – это просто…

Удачи!