Как сделать в word две независимые колонки? Байки из склепа. Подробнее о настройках

Для Windows 19.04.2019
Для Windows
  • Формат (Format) и выберите команду Колонки
  • Вставка (Insert) и выберите команду Разрыв
  • Отметьте опцию новую колонку (Column break) и нажмите ОК .

Текстовый редактор Ворд позволяет форматировать текст самыми разными способами. Последние версии данной программы настолько обросли различными функциями, что сейчас нет практически ничего, чего не умеет делать этот текстовый редактор. В этой статье мы расскажем о том, как сделать текст в две колонки в Ворде.

Правильный способ сделать текст в две колонке в Ворде

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

В данном выпадающем меню доступны такие варианты:

  • одна – одна колонка, обычный формат страницы в Ворде;
  • две – две одинаковые колонки, страница с двумя колонками;
  • три – три одинаковые колонки, страница с тремя колонками;
  • слева – узкая дополнительная колонка в левой части страницы;
  • справа – узкая дополнительная колонка в правой части страницы;

Кроме этого в выпадающем меню есть пункт «Другие колонки». Данный пункт открывает дополнительное окно, в котором можно настроить ширину колонок и промежуток между ними.

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

Неправильный способ сделать текст в две колонке в Ворде

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

После того как таблица создана установите курсор во внутрь таблицы и перейдите на вкладку «Работа с таблицами – Конструктор». Здесь нужно сменить тип линии, которая используется для рисования границ таблицы. Для этого откройте выпадающее меню и выберите «Без границы».

Такая линия видна во время редактирования документа, но не отображается при его печати.

Как сделать текст в две колонки в Word 2003

Если вы используете Word 2003, то для того чтобы сделать текст в две колонки вам нужно открыть меню «Формат – Колонки». После этого появится окно «Колонки».

В этом окне нужно выбрать количество колонок и нажать на кнопку «OK». При необходимости вы можете настроить ширину колонок, промежутки между ними, а также другие параметры.

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

Однако есть способ разместить текст во второй колонке, даже если в первой колонке текста нет вовсе.

  • Создайте новый документ и вставьте необходимое вам количество колонок ((Зайдите в меню Формат (Format) и выберите команду Колонки (Columns))). Для простоты сделаем две колонки.
  • Для того, чтобы перейти ко второй колонке, зайдите в меню Вставка (Insert) и выберите команду Разрыв (Break). Откроется одноименное диалоговое окно, как на скриншоте ниже:
  • Отметьте опцию новую колонку (Column break) и нажмите ОК .

Все, курсор переместиться на начальную позицию для ввода текста во вторую колонку.

Также статьи о работе с колонками в Ворде:

  • Как объединить текст из нескольких колонок в Ворде?
  • Как удалить колонки в Ворде?

В Word имеется возможность размещения текста в несколько колонок на одном листе и далее мы рассмотрим, как сделать колонки в Ворде. Наглядный пример подобного оформления текста, это как правило газеты и различные журналы.

Настроить размещение текста в Ворде в несколько колонок можно перед началом набора текста или разделить на колонки уже набранный текст. Для создания колонок необходимо перейти на вкладку «Разметка страницы» и в меню «Колонки» выбрать один из предлагаемых вариантов размещения колонок или выбрать вариант «Другие колонки» для самостоятельной настройки их количества.

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

После создания колонок текст по мере заполнения одной колонки будет перемещаться на следующую. Если необходимо не заполняя до конца одну колонку перейти к следующей, перед текстом, который должен идти в следующей колонке, следует установить разрыв колонки. Делается это на вкладке «Разметка страницы» в меню «Разрывы» выбором пункта «Колонка».

Microsoft Word обучение

Доброго времени суток.

Куда нажимать?

Подробнее о настройках

Нюансы

Вот и все дела.

Пока-пока.

Доброго времени суток.

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

Куда нажимать?

Чтобы разделить только часть текста, необходимо вначале её выделить. Если вы писали сплошняком, а потом решили перейти на колонки, или собираетесь создавать с ними новый документ, то следует оставить курсор в том месте, откуда они должны начинаться.

  • В верхнем меню Word переключаемся на вкладку «Разметка страницы».
  • В поле с параметрами нажимаем опцию «Колонки».

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

Подробнее о настройках

Для того чтобы более детально всё настроить нажмите на «Другие колонки».

Откроется небольшое окошко, где всё в принципе понятно:

  • В верхнем поле «Тип» выбираете формат и количество колонок, либо можете задать своё число ниже.
  • Далее есть область «Ширина и промежуток», где вы можете настроить внешний вид каждой колонки по-отдельности.
  • Справа отображается образец: как будет выглядеть текст с вашими настройками.
  • В самом нижнем поле «Применить» вы определяете, какая часть документа будет разбита на колонки.

Нюансы

Чтобы ваш текст в итоге выглядел красиво, напоследок расскажу о нескольких моментах:

  • В процессе набора он будет переходить на другую колонку только после полного заполнения первой. Нужно написать её не до конца? В таком случае на той же вкладке и области, что и в первой инструкции, щелкните функцию «Разрывы» и выберите вариант «Колонка».

  • Текст неаккуратно разбился в два столбика или больше? При наличии разрывов между словами можно подкорректировать размер шрифта (на десятые доли) или размер отступов, немного перетянув ползунки на линейке сверху (всплывает при наведении курсора).
  • Для размежевания колонок вертикальной линией Ворд предлагает нам в окне с настройками пункт «Разделитель», который нужно отметить галочкой.

  • Заголовок встал в один ряд с колонками? Необходимо вынести его наверх. Делается это просто: выделите только его и в настройках установите количество колонок «Одна».
  • Кстати, то же самое нужно сделать со всем текстом, если вы захотите вернуться к исходному написанию на всю страницу.

  • Сделали колонки в середине текста и они встали не совсем в один уровень? Предположим, вторая получилась чуть выше. Значит, необходимо поставить перед ней курсор и нажать Enter. В целом, вы можете корректировать отдельно каждую колонку по своему усмотрению.

Вот и все дела.

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

В этой статье мы поэтапно рассмотрим правила верстки сайта с двумя колонками. Код, приведенный нами, позволит вам добавить шапку и подвал, охватывающие эти две колонки.

Вступление

Для выполнения заданий этой статьи вы должны иметь навыки написания кода как на HTML , так и на CSS . Если это не так, тогда вам лучше использовать визуальный редактор.

Обратите внимание, что вы вовсе не должны быть экспертом в HTML или CSS . Вам просто нужно иметь базовые знания этих технологий, иначе эта статья будет вам непонятна.

Использование свойства float для создания двух колонок

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

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

Базовый HTML код для сайта с двумя колонками

HTML часть кода довольно проста. Нам нужно только два блока div , по одному для каждого столбца:

Контент

Слова «Меню навигации » и «Контент » являются лишь указателями для боковой панели навигации и основного контента. Позже вы удалите эти слова, когда расположите в блоках реальный контент. div «container» — это блок, содержащий два столбца. Его можно использовать, если нужно применить определенные стили к обоим столбцам.

CSS-код для сайта с двумя колонками

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

Код CSS очень прост:

#content { float: right ; width: 80% ; } #navbar { float: right; width: 20%; }

Согласно правилам верстки сайта, код CSS должен размещаться в разделе стилей веб-страницы или во внешнем файле.

Как приведенный выше код работает на практике, можно увидеть здесь.

Как это работает: пояснения к CSS-коду

Правило «float: right » определяет, как блок DIV выводится из общего потока документа, а также размещается справа от всех других элементов, обтекающих его слева. Первый блок DIV , который встречается на HTML-странице , смещается в первую очередь.

В приведенном выше примере «#content » первым сдвигается вправо и для него задается ширина в 80% от ширины окна браузера. Наше следующее правило также выводит «#navbar » из потока документа и смещает его вправо.

Так как у нас уже есть плавающий элемент в таком положении. Согласно заданным правилам адаптивной верстки, второй блок помещается слева от существующего элемента, если для него есть достаточно пространства. Иначе он будет размещен под первым элементом. С учетом этого сумма сторон обоих блоков должна быть равна 100% или менее, иначе у нас не будет достаточно места, чтобы разместить их рядом.

Как разместить колонку навигации справа

Приведенный ранее код размещает меню навигации в левой колонке. Если нужно, чтобы меню навигации размещалось справа, измените код следующим образом:

#content { float: left ; width: 80% ; } #navbar { float: left ; width: 20% ; }

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

Как корректно изменить ширину

Согласно установленным техническим правилам верстки, приведенные выше стили, задают для боковой колонки ширину в 20% от ширины окна браузера, а для колонки контента — 80%, что в сумме дает 100%.

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

Если одна из колонок смещается ниже другой: как это исправить

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

Это может произойти, даже если вы используете мои значения «20% » и «80% «. Например, если добавить поля, рамки и отступы для одной или обеих колонок. Ширина этих столбцов также увеличится, что приведет к тому, что общая сумма будет превышать 100%.

Кроссбраузерность и правила верстки подразумевают два способа решения этой проблемы:

  • Уменьшить значение ширины колонок, пока браузер не выведет их так, как вы хотите. Но помните, что проценты являются относительной единицей измерения. Она привязана к ширине окна браузера пользователя. Поэтому, если вы тестировали макет на своей системе, и обнаружили, что при добавлении к padding-left 10 px к одной из колонок и уменьшении ширины на 1%, все работает прекрасно, то нельзя делать вывод, что 1% = 10 пикселей. Иными словами, 1% от 1024 пикселей отличается от 1% от 1920 пикселей, и так далее. Убедитесь, что вы учитываете различия ширины окна в других браузерах и диагоналях экрана;
  • Решение, которое предпочитаю я, заключается в том, чтобы создать внутри блоков «#navbar » и «#content » вложенный DIV , и поместить в него все отступы, поля, рамки и фактический контент. Таким образом, для внешних блоков можно оставить старые 20% и 80%, не заботясь о поправках на поля, отступы и т.д.

Например, в демо-сайте с двумя колонками используется следующий HTML-код для создания вложенного блока DIV :

Контент

К написанным ранее стилям CSS добавьте следующие свойства для «#innercontent » и «#innernavbar «:

#innercontent { padding-left: 10px ; padding-right: 10px ; } #innernavbar { padding-left: 5px ; padding-right: 5px ; }

CSS для «#content » и «#navbar » остаются такими же, как описано в первой половине этой статьи.

Так как отступ применяется к внутреннему блоку DIV , размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.

Как добавить шапку и подвал сайта, растягивающиеся на обе колонки

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

Чтобы создать шапку и подвал, используя макет с двумя колонками, измените HTML-код и добавьте два дополнительных блока DIV :

Контент

Добавьте следующий код CSS в существующую таблицу стилей. Поместите его после стилей, которые были заданы ранее:

#footer { clear: both ; }

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

#header { text-align: center ; }

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

Приведенный выше код можно увидеть в действии на демо-сайте с шапкой, подвалом и двумя колонками .

Заключение

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

Перевод статьи «How to Design a Two Column Layout for Your Website Using CSS » был подготовлен дружной командой проекта .

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

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

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

А давайте с готового текста и начнём.

Итак, документ состоит из одной страницы. Мы ввели текст, и вдруг выяснилось, что текст на странице должен располагаться в две колонки. Перед тем как начать действовать, обратим внимание на линейку над страницей и на положение ползунков регулировки полей:

Итак, взглянув на линейку, уверенным движением руки направляем курсор мыши в верхнее меню и щелчком разворачиваем вкладку «Разметка страницы», где вторым щелчком по значку опции с названием «Колонки», открываем окошко с вариантами:

Третьим щелчком выбираем вариант «Две»:

Теперь посмотрим, на то, что стало с текстом и с ползунками линейки:

В общем-то, можно сказать, что программа минимум выполнена. Нам нужно было расположить текст в две колонки, - мы это и сделали. Причём сделали тремя щелчками мыши.

Надо признать тот факт, что текст выглядит не очень. С точки зрения типографских стандартов, текст, в разных его частях, имеет недопустимое расстояние между словами, да и заголовок не всегда должен будет занимать то место, которое он занимает в тексте нашего примера. Есть, конечно же, исключения, но, как правило, заголовок должен быть над текстом. Все эти рассуждения подвели нас к необходимости форматирования текста, после применения к готовому тексту опции «Колонки».

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

Для того чтобы текст выглядел более эстетично, мы, в первую очередь можем немного изменить его размер. Для более тонкого (мягкого) изменения размера шрифта можно заменить его на дробное значение.

Первым делом обозначим программе то, что мы намерены редактировать весь текст полностью. С этой целью выделим его. Для выделения текста, в разделе «Редактирование» вкладки «Главная», развернём содержание пункта «Выделить» и выберем вариант «Выделить всё»:

Выделение текста произошло:

Теперь, в верхнем меню, подведём курсор мыши к строке с видимым размером шрифта и сделаем один щелчок левой кнопкой мыши, выделив этим самым щелчком цифровое обозначение размера шрифта:

После появления синего выделения сразу же начинаем вводить дробное значение, например, «11,5», а можем установить «11,3» или «11,8»:

Завершаем процедуру нажатием клавиши «Enter», а затем смотрим на изменения, которые произошли с текстом. Конечно же, сначала можно начать с целых значений размера шрифта, выбирая их из списка размеров.

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

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

Теперь, вновь обратимся к опции «Колонки» и, в раскрывшемся списке вариантов, выберем вариант «Одна». После такого нашего выбора текст немного перестроится, и мы получим самый настоящий заголовок:

В том случае, когда заголовок наравне с основным текстом немного «потерял в размере», а нам бы этого вовсе не хотелось, то тогда мы снова выделяем только заголовок и возвращаем его шрифту первоначальный (устанавливаем желаемый) размер. Изменить размер шрифта заголовка мы можем перед тем, как обратимся к опции «Колонки» и сделаем выбор варианта «Одна».

Если уже в готовом тексте нам необходимо, чтобы определённая его часть была разбита на колонки, то эту часть текста необходимо сначала выделить, а затем применить нужный вариант разбивки. То есть повторить уже знакомые нам действия.

Выделяем ту часть текста, которую хотим разбить на колонки:

Затем, обращаемся к опции «Колонки» (вкладка «Разметка страницы») и в раскрывшемся списке вариантов выбираем «Две». И вот, что у нас получилось в результате:

Сделаем щелчок мышью в любом месте страницы для снятия выделения:

Мы видим, что первая строка левой колонки ниже первой строки правой колонки. Получилось так, что колонки находятся на разных уровнях. Устраним такое несоответствие. Для этого, установим курсор в начале первой строки правой колонки:

И нажмём «Enter»:

Если есть необходимость редактирования разбитого на колонки текста, и мы хотим прибегнуть к изменению размера шрифта, то правильнее будет осуществлять такие изменения у всего текста в целом за исключением заголовка. Но если разбивка на колонки была произведена нами с целью привлечения внимания к содержанию текста, то тогда мы с разбитым на колонки текстом работаем индивидуально. Говоря кратко, поступаем так, как нам надо и хочется. Это касается и последовательности всех действий. Ну, а если мы передумали и хотим избавиться от столбцов, то тогда выделяем этот текст, а затем в списке вариантов колонок опции «Колонки», выбираем вариант «Одна».

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

Для того чтобы сделать эти самые настройки мы должны пройти по знакомому пути, за исключением последнего шага. Если до этого, мы, развернув вкладку «Разметка страницы» выбирали опцию «Колонки» с последующим выбором варианта разбивки (в нашем примере две колонки), то сейчас, пройдя этот путь, мы сделаем выбор вариант действий «Другие колонки…»:

В результате такого выбора перед нами откроется то самое окошко, о котором вскользь было упомянуто вначале разговора:

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

Давайте в качестве примера, посмотрим на то, как изменится список строки «Применить» в том случае, когда мы выделили часть готового текста:

Именно к этой выделенной части текста мы теперь можем применить различные настройки.

Влад Мержевич

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

Ширина колонок

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

и для первой ячейки установить ее ширину в пикселах или процентах также с помощью атрибута width , но уже для тега
(пример 1).

Пример 1. Ширина колонки в пикселах

Две колонки

Левая колонкаПравая колонка

В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).

Пример 2. Использование стилей

Две колонки

Левая колонкаПравая колонка

Поля внутри колонок

Расстояние между колонками регулируется атрибутом cellpadding тега

. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, свойство padding , можно легко регулировать значение отступа для каждой колонки (пример 3).

Пример 3. Использование полей

Две колонки

Левая колонкаПравая колонка

В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right , который добавляется к левой ячейке через идентификатор с именем leftcol .

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.

Пример 4. Поля в ячейках

Две колонки

Левая колонка Правая колонка

Цвет фона колонок

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

Пример 5. Цвет фона

Две колонки

Левая колонка Правая колонка

В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).

Рис. 1. Колонки разного цвета

Разделитель колонок

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

Пример 6. Использование трех ячеек

Две колонки

Левая колонка Правая колонка

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

На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.

Линия между колонками

Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7).

Пример 7. Добавление линии

Две колонки

Левая колонкаПравая колонка

Результат данного примера показан ниже.

Резюме

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

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



Рекомендуем почитать

Наверх