Как сделать табличную верстку в html

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

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

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

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

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

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

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

Верхняя часть сайта

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

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

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

Блочная верстка html
Семантическая верстка html
HTML атрибут style
Внешняя таблица стилей CSS
Внутренняя таблица CSS стилей

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Как сделать табличную верстку в html

Теперь нажмите в верхнем левом углу ФАЙЛ => «СОХРАНИТЬ КАК» впишите в название файла index.html и сохраните его в основной директории. Сделайте несколько копий страниц для таблиц, текста, и т.д. Это будут те страницы, на которых Вы можете попробовать все то, что узнаете здесь. Нужный Вам HTML код сохраняйте в «Блокноте» (расширение “.txt”) и используйте, как шпаргалку. Имена страницам лучше давать информативные, то есть, например страницу о музыке назвать music.html, а страницу с фотографиями photo.html и т.д.

Основные теги страницы

«http://www.w3.org/TR/html4/loose.dtd»> объявление типа документа
начало html кода

начало блока информации для браузеров
учебная страница — это название страницы
подробнее о мета тегах здесь

Тег определяет ссылку. В отличие от тега A, тег LINK может располагаться только в части заголовка HEAD документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.

иконка
конец блока информации для браузеров

начало тела страницы
содержимое страницы
конец тела страницы

конец html кода

Таблицы

Для большинства страниц достаточно совсем небольшого количества тегов.

Теги таблиц

открывающий тег таблицы
тег — начало строки
открывающий тег ячейки
содержимое ячейки — table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
закрывающий тег ячейки
тег — конец строки
эти теги создают новый ряд (строку) ячеек
тег — начало строки
открывающий тег ячейки
содержимое ячейки
закрывающий тег ячейки
тег — конец строки
закрывающий тег таблицы

Атрибуты

width — ширина таблицы указывается в «%» или в пикселях «800»

border — толщина рамки

cellspacing — расстояние между ячейками

cellpadding — расстояние между рамкой ячейки и текстом

align — выравнивание по горизонтали ( по умолчанию слева=»left» центр=»center» справа=»right» )

valign — выравнивание по вертикали ( верх=»top» середина=»middle» низ=»bottom» )

colspan=x — количество ячеек по горизонтали

rowspan=x — количество ячеек по вертикали

Примеры таблиц

навигация заголовок

меню контент

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

Пример

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

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

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

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

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

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

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

Итак, пример табличной вёрстки:

Если поместить этот код в тело HTML-документа и открыть получившийся файл в браузере, то страница будет выглядеть так:

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

Но взглянем на код с пояснениями.

Тег открывает таблицу.

Атрибут border задаёт толщину табличных рамок.

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

шапка сайта (логотип, слоган, телефон)

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

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

Текст между тегами и — это и есть содержимое ячейки, ради него всё и делалось.

навигация заголовок

Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% — под основной контент.

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

Низ сайта (баннеры, счетчики, информация)

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка — эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.

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

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

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;

Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;

Вёрстка сайта с нуля 2.0 — полноценный платный курс;

Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Читать:
Как сделать скриншот на самсунге s10