Каждый человек, который когда-либо хотел создать сайт для своего проекта, сталкивался с проблемой его написания. Не всем хочется платить, да и не каждый бюджет может это позволить, за создание сайта профессиональным веб-мастерам, поэтому большинство начинающих свой путь создателей сайтов начинают изучать методы верстки. Потому что качественного контента и наличия купленного места на сервере для хостинга сайта недостаточно, чтобы он существовал. Первым делом, необходимо создать «скелет» страницы.
Что такое табличная верстка в html?
Чтобы ответить на данный вопрос, необходимо дать определение понятию верстка.
Верстка - процесс создания структуры html-страницы, размещения на ней основных элементов.
Табличная верстка - это, соответственно, использование таблицы с невидимым контуром в качестве структуры страницы. То есть страница сайта будет являться таблицей с некоторым количеством столбцов и строк, где в каждой ячейке будет располагаться определенный элемент.
Макеты html-документов, созданные табличной версткой, используются в подавляющем большинстве сайтов и применяются уже более 10 лет. Это связано с простотой формирования структуры, заполнения, а также с универсальностью такой разметки, которая в разных браузерах отображается одинаково.
Первый этап создания сайта
Табличная верстка начинается с создания разметки: пишется html-код страницы с таблицей, состоящей из определенного количества столбцов и строк.
Для создания таблицы в html используется специальный тег
| для создания заголовка таблицы и | для создания столбца. Столбцы и заголовки создаются внутри тега строки, причем в каждой строчке может быть создано любое количество столбцов.
Умение создавать таблицу позволяет выполнить html-табличную верстку страницы, поэтому необходимо выяснить, какие атрибуты есть у тегов создания и как ими пользоваться. Основные атрибуты тегов таблицыТег Данный тег, являясь символом открытия таблицы, служит для ограничения ее структуры, задает ее положение на странице и общий вид всех ячеек, благодаря атрибутам: Тег Данный тег создает строку таблицы, отвечает за ее внешний вид. Имеет небольшой набор атрибутов: align для выравнивания текста в строке, bgcolor задает фоновый цвет ячейки, bordercolor устанавливает цвет рамки вокруг строки. Теги Эти два тега имеют примерно равную функциональность: создают ячейку в строке и устанавливают условия ее отображения, используя атрибуты: Изучив теорию по работе с таблицами в html, можно приступить к созданию собственной разметки страницы. Для этого следует определиться с тем, какие функциональные блоки будут на вашем сайте. Это могут быть шапка, подвал, контент-блок, боковые блоки. В html-табличной верстке необходимо только создать таблицу. На самом деле на данном этапе можно создать уже полностью готовый макет, задав внешний вид каждого элемента через свойства тегов, которые описаны выше. И тогда будет нужно лишь скопировать код таблицы на каждую новую страницу сайта, чтобы он имел один стиль. Но это достаточно неудобно, так как стиль страницы будет сохранен только в ее файле, а значит, если появится необходимость что-либо поменять, придется изрядно постараться, чтобы найти необходимый атрибут стиля в каждом документе и изменить его значение. Но существует вариант оптимизации этого процесса посредством использования метода CSS-табличной верстки. Поэтому во время создания html-таблицы нет необходимости использовать атрибуты стилей в документе. Единственный атрибут, который применять придется, это id, позволяющий затем обращаться к стилю только отдельного элемента. Это универсальный атрибут, который применяется с любыми тегами. Он принимает значения, состоящие из латинских букв и символов. Создавая таблицу, необходимо задать id для тега Так будет отображаться страница в браузере. Созданный документ нужно подключить к стилевому файлу CSS, для того чтобы управлять внешним видом объектов страницы. Для этого необходимо создать CSS-документ, назвать его, к А теперь внутри в основном документе страницы нужно прописать следующее: . После этого, прописывая в mystyle.css условия отображения элементов, вы сможете изменять внешний вид страницы так, как вам это будет угодно. Например, свойство color задает цвет текста, а background определяет, как будет выглядеть фон элемента. Существует около 20 основных свойств, применяя которые, можно изменять положение элементов, их размеры, цвет и выделение. Поэтому такая верстка не является очень сложной и может быть выполнена даже новичком, а насколько креативно и интересно получится, зависит только от вас. Как известно, сейчас между табличной и блочной версткой в html большинство веб-мастеров выбирает именно вторую. Это связано прежде всего с тем, что код табличной верстки получается очень громоздким, и это тормозит загрузку сайта. Объемность кода объясняется наличием сложной структуры тегов таблицы (3 уровня: Табличная верстка через CSS может быть осуществлена, если, например, в документе присутствуют только отдельные элементы, заключенные в тег Адаптивная верстка предполагает изменение отображения сайта на разных экранах в зависимости от разрешения и размера дисплея. Это достаточно непростая задача для разработчика, так как требует тщательных расчетов и тестирования на многих платформах. Тем не менее любой популярный современный ресурс невозможно представить без использования адаптации под разные устройства. И для решения данной задачи применяется CSS. Во-первых, чтобы во всех браузерах стиль сайта был единым, нужно обнулить все браузерные стандарты отображения с помощью чтобы избавиться от нестандартных отступов, выделений и подобного. Во-вторых, необходимо получать медиа-запросы от устройств, подключающихся к ресурсу, для того чтобы получить информацию о разрешении экрана и применить адаптацию. Для этого в основном используются свойства min-width, max-width и display. Первые два определяют границы расширения блока, а свойство display со значением none позволяет скрывать большие и нефункциональные блоки на дисплеях с небольшим разрешением. Не имеет значения, каким методом воспользуется разработчик для создания разметки, он сможет оформить ее с применением CSS настолько уникально и эстетично, насколько хватит фантазии. Ниже представлены примеры HTML-табличной верстки. Еще один пример. А можно оформить и так. На самом деле совсем не важно, что табличная верстка уже не выглядит современно и актуально - это легко компенсируется креативностью и грамотностью дизайнерского оформления. Табличная вёрстка. Таблицы, которые первоначально проектировались как средство представления двумерных массивов данных, сейчас используются в основном как инструмент для точного позиционирования контента на веб-странице. Стандарт HTML не предусматривает возможности расположить картинки и текст относительно друг друга с приемлемой точностью, а табличная вёрстка, при которой различные части контента помещаются в разные ячейки таблиц, способна решить эту проблему. Кроме того, табличная вёрстка очень полезна при проектировании сайтов с большим количеством графических элементов: в больших рисунках почти всегда можно выделить области, закрашенные одним и тем же цветом, которые можно выбросить, заменив на пустые ячейки с соответствующим фоном и сэкономив таким образом на общем «весе» графики и времени загрузки страниц. Это, конечно же, не единственное преимущество упомянутого способа вёрстки. К недостатками же его можно отнести тот факт, что некоторые браузеры (не будем показывать пальцем) не в состоянии отобразить на экране уже загруженные части помещённого в таблицу контента до тех пор, пока не загрузится вся таблица целиком. Они же (упомянутые браузеры) почему-то очень медленно работают со вложенными таблицами. А потому скажем дружно, что Нетскейп есть не что иное как дрянь, мерзость и порождение Сатаны. Несогласных попрошу удалиться. Чтобы понять, как именно нужно «нарезать» контент для помещения в таблицы и как проектируются сами таблицы, достаточно просмотреть исходный код нескольких профессионально сделанных сайтов и попробовать сделать что-то подобное самостоятельно, поэтому я не стану подробно разбирать эту тему. Остановлюсь лишь на двух наиболее распространённых техниках оформления таблиц, позволяющих справиться с недостатками стандартного HTML и проблемами, возникающими при обеспечении совместимости с различными браузерами. Иногда дизайнер испытывает непреодолимое желание использовать в качестве фона таблицы некий рисунок. Не будем сейчас говорить о том, хорошо это или плохо. Ему так захотелось. И вот картинка подготовлена, оптимизирована и прописана в параметре background. Счастливый разработчик решает для проверки запустить Нетскейп, чтобы убедиться, так ли всё прекрасно выглядит, как уверял Internet Explorer. Не тут-то было! Проблема заключается в том, при просмотре страницы в разных браузерах ячейки по-разному наследуют фон таблицы. Internet Explorer рассматривает каждый контейнер Для того, чтобы справиться с этой проблемой, приходится использовать вложенные таблицы. Во внешней прописывается адрес фоновой картинки, а во внутренней в качестве фона указывается пустой URL: Пустой атрибут background внутренней таблицы заставляет Нетскейп не отображать в ней фон, указанный во внешней. Кто-нибудь знает, кто именно писал соответствующий кусок кода для Нетскейпа? Скажите мне, я очень хочу увидеть честные глаза этого человека. Создание таблиц с бордюром в 1 пиксел Создадим простейшую таблицу с бордюром в один пиксел, содержащую всего одну ячейку. Вот код: Видно, что толщина бордюра почему-то равно двум пикселам. К сожалению, более-менее приличного способа борьбы с этой глупостью пока не придумали, а потому приходится делать всё по-дурацки. Но работать будет. Вот таблица с бордюром толщиной в один пиксел: Как вы можете заметить, задача опять решается при помощи вложенных таблиц. В данном случае для внешней таблицы задан чёрный фон и параметр cellpadding установлен в единицу при нулевом бордюре, т. е. то, что мы видим, на самом деле не бордюр, а краешек фона. Всякие разности В завершение разговора о таблицах сформулирую несколько правил, которых стоит придерживаться во время разработки дизайна, основанного на табличной вёрстке. 1. Указывайте ВСЕ размеры таблиц и составляющих их ячеек. Width и height должны быть жёстко заданы как для самой таблицы, так и для ячеек, которые её составляют. Этого принципа лучше придерживаться с первого же дня. Поверьте на слово: когда вы верстаете более-менее сложную страницу хотя бы с десятком-другим картинок, лучше сразу указать все размеры, иначе потом придётся долго и нудно ползать по коду, пытаясь определить, какая же именно ячейка заставляет «уехать» весь дизайн. Кстати, это относится и ко всем картинкам, помещаемым в таблицы. 2. По возможности указывайте все размеры в пикселах, а не в процентах Если вы используете «резиновый» дизайн, от этого правила иногда можно отступать, и то только в тех случаях, когда вы задаёте, скажем, ширину колонок, которые в сумме должны занимать весь экран. Помните, что при масштабировании документа или даже при обычном изменении окна браузера ваши проценты могут принять самые неожиданные значения, и дизайн развалится. 3. Используйте распорки. Наш любимые Нетскейп никогда не упускает возможности пошутить. Если дизайнер создаёт ячейку таблицы, даже задаёт её размеры, но не помещает туда контент (либо контент не занимает всю ячейку), Нетскейп считает себя вправе поступать с размерами ячейки как заблагорассудится, а иногда и вовсе «схлопывает» её. Чтобы избежать этой беды, создайте прозрачную картинку формата.gif размером 1х1 пиксел и вставляйте её в пустые ячейки, указывая соответствующий размер. Благодаря такой «распорке» таблицы будут выглядеть так, как задумано. 4. Указывайте нулевую толщину бордюра для всех картинок в таблице. 6. Разрывайте теги. Если поставить рядом две картинки и написать тег img для каждой из них в отдельной строчке, получится вот что: А всё потому, что мы сделали вот так: Теперь попробуем разорвать один из тегов: В результате получаем совсем другую картину: А всё потому, что браузер воспринимает перенос строки и пробел одинаково: для него это whitespace, в простейшем случае — пробел. Вот он и ставит пробел между двумя картинками. Табличная верстка
- это условное названия метода верстки страниц сайта. При табличном методе верстки каркас страниц сайта создается при помощи тега Это наиболее распространенный способ верстки веб-страниц. Преимущество табличной верстки в том, что она проста и быстра в исполнении. Кроме этого, страницы, имеющие в своей основе таблицу, корректно отображаются в различных браузерах. Я думаю, что Вы уже знакомы с основными тегами таблиц: это теги А сейчас давайте перейдем непосредственно к созданию каркаса страницы методом табличной верстки. В основном верстка с созданием таблиц выполняется так, что границы и таблиц и их ячеек невидимы (атрибут border=
"0"
). Я же буду создавать таблицы, имеющие границы (атрибут border=
"1"
). Так Вам проще будет ориентироваться. Стандартная первоначальная таблица, составляющая основу страницы, обычно состоит из трех строк: верхняя строка предназначена для шапки сайта - это может быть любое изображение, созданное Вами в редакторе Adobe Photoshop или позаимствованное из какого-либо источника; нижнюю строку занимает подвал или так называемый «
футер» сайта (от англ. footer - нижняя сноска
); и основная строка расположена по середине. Далее Вы узнаете для чего она предназначена. Предлагаю назвать первоначальную таблицу основной
. Делаем это для исключения путаницы, так как далее будут создаваться другие таблицы. Здесь стоит отметить следующий важный момент
: тег Фрагмент кода: Результат: Что касается ширины основной таблицы, то, как Вы видите, мы ее установили фиксированной: равной 1000 px
. Вы можете установить любую ширину, но делайте ее не более, чем разрешение экрана
. Например, если у Вас установлено разрешение 1280х1024
, то желательно, чтобы ширина основной таблицы не превышала 1280 px
, иначе какая-то ее часть не будет видна, а у окна браузера появиться горизонтальная полоса прокрутки. А что если у определенного числа пользователей разрешение экрана меньше Вашего, например 1024х768
? В этом случае при ширине основной таблицы более 1024 px
, какой-то части пользователей будет неудобно просматривать страницы Вашего сайта, так как им придется пользоваться горизонтальной полосой прокрутки. Выход из этого есть. Можно установить значение ширины равным 100%
. Тогда ширина таблицы будет подстраиваться под размеры окна браузера. Также можно сразу задать значение атрибута height
тега Следует знать
, что значения высоты и ширины таблицы не являются постоянными, то есть меньше таблица не станет, а вот больше может - всё зависит от размеров её содержимого. Создаем в ячейке основной строки еще таблицу. Назовем ее таблица для контента
- в ней будет размещено основное содержимое страницы. Как правило, таблица для контента состоит из трех столбцов, то есть имеет одну строку и три ячейки, образующие столбцы. И, как правило, в левой колонке размещают меню навигации, а в правой, например, рекламные блоки, баннеры и т.п. Можно правую колонку временно оставить пустой или не создавать ее (но лучше создайте - по мере наполнения сайта ей найдется применение
). И, наконец, центральная ячейка таблицы для контента является основной
, так как в ней размещают контент: тексты статей, различные графические элементы и т.д. Фрагмент кода: Результат: Ширину и высоту таблицы для контента устанавливаем равными 100%
. Таким образом она сразу растянется на всю ширину основной таблицы и на всю высоту основной строки. Как видно из предыдущих шагов, содержимое ячеек таблицы по умолчанию выравнивается в горизонтальной плоскости по левому краю, а в вертикальной - по середине. Если горизонтальное выравнивание в ячейке, как правило, оставляют по умолчанию, то расположение контента по центру ячейки в вертикальной плоскости редко кого-то устраивает. Поэтому, при помощи атрибута valign
тега Фрагмент кода: Результат: Итак, на предыдущем шаге мы закончили формировать наш каркас (впрочем его можно переделать и внести какие-то изменения в любое время
). Сейчас давайте перейдем к заполнению основной таблицы. Начнем с шапки. Я взял изображение, являющееся шапкой моего сайта и уменьшил его до соответствующего размера: напомню, что ширина основной таблицы, а соответственно, и ячейки под шапку составляет 1000 px
. Зная высоту изображения, устанавливаем для ячейки, отведенной под шапку, соответствующее значение высоты: 121 px
. Переходим к подвалу: нижнюю ячейку основной таблицы, являющуюся «футером» страницы, зальем синим цветом (атрибут bgcolor
тега Далее редактируем таблицу для контента: установим ширину левой ячейки равной 250 px
, а правой ячейки - 150 px
. Центральная ячейка занимает все свободное пространство: ее ширина становится равной 600 px
. Фрагмент кода: Результат: В левой ячейке таблицы для контента я разместил меню навигации по сайту, а в центре - текст. Это последний шаг, в котором мы оформим границы. Я поступил следующим образом: для границы шапки сайта и центральной ячейки основной таблицы я выбрал тот же цвет, которым залит «футер», а ячейки таблицы для контента имеют темно-синие границы. Все границы выполнены непрерывной линией и имеют толщину 1 px
. Фрагмент кода: Результат: На этом, пожалуй, закончим создание каркаса страницы методом табличной верстки. Немного позже я продолжу развивать эту тему: немного усложним наш каркас, включив в него еще одну строку для верхнего меню навигации; можно разместить, например, в левой колонке еще одну таблицу, таким образом разбив ее на части и т.п. Впрочем, Вы можете сделать это самостоятельно. Заодно закрепите пройденный материал! От автора:
хотя верстка с помощью таблиц уже отходит в прошлое, любой уважающий себя веб-разработчик обязан знать о ее преимуществах и недостатках. С десяток лет назад табличная верстка сайта была самым популярным способом сверстать сайт. По-прежнему в сети есть много сайтов на таблицах, некоторые и сегодня выбирают этот способ, но это уже исключения из правил.
Суть этого метода верстки в том, что весь сайт представляет собой одну большую таблицу. То есть все содержимое должно быть заключено в один парный тег — table. Возможно вы знаете, что в одну таблицу можно вложить неограниченное число других элементов, в том числе и других таблиц. Строки и ячейки таблицы. Самое важное правило – информация в таблицах выводится только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка). Ячеек в одной строке может быть неграниченное количество. Чтобы вы лучше поняли принцип размещения содержимого в таблице, я приведу несколько примеров кода: <
table
>
<
tr
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
/
tr
>
<
/
table
>
Эта табличка содержит одну строку, в которой по горизонтали будут расположены три ячейки. Клетка растягивается на такой размер, которого хватит для отображения всей информации в ней, но при желании ей можно задать определенные размеры. Другой пример: <
table
>
<
tr
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
/
tr
>
<
tr
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
td
>
<
/
td
>
<
/
tr
>
<
/
table
>
Рис. 2. Две таблицы, только что созданные с помощью html.
В этом случае у нас будет две строки. В первой будет три ячейки, а во второй – четыре. Соответственно, строки следуют друг за другом по вертикали, а ячейки – как уже и говорилось, по горизонтали. Еще мы задали фиксированные размеры ячейкам. Можно также установить цвет, выравнивание, отступы и много чего другого. Например, в css-файл я записал такой код: table{
border-spacing: 0;
margin-bottom: 50px;
}
td{
border: 2px solid green;
width: 100px;
height: 50px;
background: yellow;
text-align: center
} table
{
border
-
spacing
:
0
;
margin
-
bottom
:
50px
;
td
{
border
:
2px
solid
green
;
width
:
100px
;
height
:
50px
;
background
:
yellow
;
text
-
align
:
center
Результат: Рис. 3. Всего лишь пару строк в css и таблица уже неплохо оформлена.
Как видите, все предельно просто. В ячейку вы можете вставлять сколько угодно других тегов. Туда можно вставить абзацы, изображения, видео и даже другую таблицу. Конечно же, по умолчанию все эти теги сделаны именно для вывода табличных данных. В результате каждая ячейка имеет свою собственную рамку. Чтобы убрать это поведение по умолчанию, нужно всего лишь прописать несколько свойств в css. Как видите, сделать табличную верстку сайта не так уж и сложно. По сути, нужно знать всего лишь три тега и понимать, как правильно в них разместить содержимое. Из-за этого создание сайта таблицами и было таким популярным – чтобы сделать даже многоколоночный шаблон не требовалось много усилий. Резиновый макет. Табличный способ верстки позволяет легко сделать резиновый макет, задав ширину в процентах. С помощью различных настроек можно регулировать высоту ячеек внутри. Создание декоративных эффектов. Каждой ячейке можно задать отдельный фоновый рисунок и размеры. Таким способом раньше создавали массу декоративных эффектов: нестандартные рамки, уголки, тени. Вертикальное выравнивание. Внутри таблиц поддерживается выравнивание, как по горизонтали, так и по вертикали. В этом плане они выигрывают у блоков, хотя сегодня появился флексбокс, в котором тоже есть возможность отцентрировать по вертикали. Кроссбраузерность. Теги для табличных данных появились очень давно и поддерживаются даже в старейших версиях Internet Explorer. Сайт на таблицах одинаково выглядит в разных браузерах. Огромный код. Для вывода таблицы требуется множество тегов. В реальных примерах табличной верстке часто встречаются еще и вложенные таблицы. В-общем, даже на разметку достаточно простой страницы может понадобиться 200+ строчек кода. Мало того, редактировать такую разметку также не очень просто. Ухудшение скорости зарузки. Таблица имеет одну очень нехорошую особенность – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены. И тут представьте себе ситуацию, что вы вывели на странице 20 изображений в таблице. Как вы думаете, быстро ли они загрузятся? Если у вас скоростной интернет, то большой разницы вы может быть и не увидите, но пользователи с медленным соединением, коих до сих пор остается очень много, будут ждать значительно дольше. Впрочем, есть способы обойти это. Плохая индексация. А вот это еще более значительный минус. Из-за большой разметки и обилия вложенных тегов текст на странице хуже воспринимается поисковыми системами и даже отлично оптимизированная и интересная статья может не попасть в топ. Неудобное управление через стили. Опять же, из-за обилия вложенных тегов таблицу сложно стилизовать через стили. Вам придется дописать множество атрибутов в html, что еще больше увеличит код. Несоответствие стандартам разработки. Как уже и говорилось, табличный способ верстки был придуман веб-разработчиками, но на самом деле эти теги изначально предназначались только для вывода табличных данных и больше ни для чего другого. Все остальные варианты использования табличных тегов не являются правильными с точки зрения стандартов. Макет должен заполнять по высоте все окно. Это первое правило. Если информации на странице мало, то футер должен быть прижат к нижнему краю окна браузера. Второе правило – все колонки на сайте должны быть одинаковой высоты. Конечно, это только в том случае, если к ним применяется какой-то фон. Тогда все ячейки в строке желательно делать равными по высоте, чтобы макет смотрелся ровно. Табличная верстка сайта в html все еще жива. Она нужна как минимум для вывода табличных данных, но кое где до сих пор есть сайты, сверстанные этим способом. И хотя сегодня табличные теги применяются все меньше и меньше, едва ли они когда-то полностью выйдут из веб-стандартов. Ну а чтобы быть в курсе этих самых веб-стандартов, необходимо иметь под рукой хороший источник информации. Подписывайтесь на webformyself и изучайте сайтостроение. или примеры верстки сайта с помощью таблиц
Способ табличной верстки сайта
не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась
обычными контейнерами Примеры верстки страниц сайтов при помощи HTML таблицы
. Пример жесткой HTML табличной верстки сайта
: Отметим, что использована структура XHTML
документа, о чем свидетельствует и открывающий тег . Параграф
Содержит CSS
атрибут class="" , значение которого - селектор описывается в секции . Дальше вспоминаем уроки по таблицам...... Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна)
ширина таблицы (860px) - (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по
самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения
padding, margin, border . Значения этих атрибутов задаются так: padding:20px - внутреннее поле элемента по всему своему периметру
равно 20-ти пикселям или так: padding:10px 0 8px 60px - верхнее внутреннее поле равно 10-ти пикселям, правое - нулю, нижнее -
8-ми пикселям и левое - 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы
заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера. Пример резиновой HTML табличной верстки сайта
: Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге П
одробно взаимодействие основных инструментов сайтостроения: HTML
и CSS
, а также все способы верстки рассматриваются в следующем разделе
самоучителя, в уроке | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
