Вёрстка с помощью таблиц


Содержание

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

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

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

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

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

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

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

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

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

Вёрстка с помощью таблиц

Табличная верстка — это условное названия метода верстки страниц сайта.

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

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

А сейчас давайте перейдем непосредственно к созданию каркаса страницы методом табличной верстки.

В основном верстка с созданием таблиц выполняется так, что границы и таблиц и их ячеек невидимы (атрибут border= «0» ). Я же буду создавать таблицы, имеющие границы (атрибут border= «1» ). Так Вам проще будет ориентироваться.

Шаг 1. Основная таблица

Стандартная первоначальная таблица, составляющая основу страницы, обычно состоит из трех строк: верхняя строка предназначена для шапки сайта — это может быть любое изображение, созданное Вами в редакторе Adobe Photoshop или позаимствованное из какого-либо источника; нижнюю строку занимает подвал или так называемый « футер» сайта (от англ. footer — нижняя сноска); и основная строка расположена по середине. Далее Вы узнаете для чего она предназначена.

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

Блочная вёрстка сайта или табличная? Что лучше?

О чём пойдёт речь в статье?

Приветствую Вас дорогой читатель!

Сегодня я хочу рассказать Вам чем блочная вёрстка сайта отличается от табличной и провести небольшой анализ чтобы выявить какую вёрстку лучше использовать и почему.

Итак, давайте сначала рассмотрим табличную вёрстку.

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

Создаётся на основе таблицы, для ячеек которых прописываются стили и вставляется контент.

Достоинства:

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

Недостатки:

  • менее гибкая
  • большой объём HTML кода
  • при создании адаптивного дизайна с ней крайне трудно и неудобно работать
  • более сложно править (особенно если дело касается переноса какого то блока в другую часть страницы)
  • более сложно править (особенно если дело касается переноса какого то блока в другую часть страницы)

Блочная вёрстка сайта

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

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

Достоинства:

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

Недостатки:

  • при вёрстке макета из нескольких колонок возможны перескакивания блоков на новую строку при масштабировании браузера
  • значительно сложнее добиться кроссбраузерности
  • сложнее в освоении чем табличная

Сравнение блочной и табличной вёрстки

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

Урок 5. Верстка таблиц, теги table, tr, td

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

Основным тегом для верстки таблиц является тег

. Он оборачивает все содержимое и закрывается по окончанию. Все мы знаем, что у таблицы есть строки и столбцы. Для обозначения строк используем тег , а для столбцов тег
. Содержимое каждого столбца оборачиваем тегом td. Теги td находятся внутри тегов tr. В случае с простейшей таблицей число тегов td в каждой строке(tr) одинаково.

Иногда в процессе верстки таблиц возникает необходимость создать заголовки столбца, для этого мы используем тег th. Этот тег аналогичен тегу td, тоже расположен внутри tr, но идеологически и стилистически отличается. По умолчанию он выделен жирно, и текст в нем выравнивается по центру.

Не совесем понятно? Рассмотрим таблицу из 4 строк и 2х столбцов с заголовками:

В итоге получаем:

Заголовок 1 Заголовок 2
Пример столбца 1 Пример столбца 2
Пример столбца 3 Пример столбца 4
Пример столбца 5 Пример столбца 6
Пример 7 Длинный текст 8

Объединение ячеек в таблице по вертикали и горизонтали, верстка

Теперь поговорим об одном достаточно сложном и непонятном моменте в верстке таблиц. Часто нам необходимо объединить ячейки таблицы между собой по вертикали или горизонтали. Для этого используется атрибут colspan для ячеек таблицы td. Значения у этого атрибута в виде чисел. Если ставим цифру 2 в значение, то совмещаем по горизонтали две ячейки, текущую и ту, что справа, но в разметке правой ячейки уже быть не должно, содержимое пишем в тот td, которому задали colspan.

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

Можно объединить ячейки одновременно по вертикали и горизонтали, для это задаем оба атрибута сразу. Наглядно станет понятно в примере :

Объединяем вправо Объединяем все
Пример столбца 3 Объединяем вниз
Пример столбца 5 Пример столбца 6 Текст
Пример 7 Длинный текст 8 Текст Текст

CSS-оформление таблиц

Верстать таблицы научились, теперь можно создавать таблицы с любым количеством столбцов и строк, нужно лишь корректировать необходимым образом html-разметку. Чтобы придать таблицам привычный вид, нужно знать о css-свойствах, которые полезны при верстке таблиц.

Во-первых, таблицам можно задавать рамки. Рамку можно задать, как самой таблице, так и каждой размеченой ячейке таблицы. Но выглядят такие рамки неэстетично и непривычно, чтобы избежать просветов между рамками, используют свойство border-collapse: collapse; Оно накладывает рамки ячеек и убирает нежелательные расстояния между ними. Рамку задаем с помощью свойства border: 2px solid #000; Этим свойством и его значением задаем размер рамки в два пикселя, черного цвета, простой линией.

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

Еще одним важным моментом в верстке таблиц становятся отступы внутри ячейки, их задаем с помощью свойства padding. Можно задать отступ только с одной стороны, для это используем одно из свойств padding-top, padding-right, padding-bottom или padding-left.

Для выравнивания текста внутри ячейки по горизонтали используем css-свойство text-align со значениями left, center и right. Для выравнивания по вертикали подойдет свойство vertical-align. Оно имеет значения top, middle, bottom. Можно задать для ячеек и строк цвет текст (color), цвет фона (background-color), жирность текста (font-weight) и так далее. Чтобы присвоить определенные стили только для конкретной строки или ячейки целесообразно использовать классы для них, а затем писать css-свойства уже для новых классов.

Пример css-кода для разметки простой таблицы.

Как создавать HTML таблицы — примеры и видео

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

Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.

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

Создание таблиц в html примеры

Перед началом обучения создания таблицы в HTML, что бы мои и ваши таблицы смотрелись одинаково — сделайте 3 простые вещи:

  1. Создайте файл index.html
  2. Откройте его в браузере
  3. Добавьте туда следующий код:

Создание простой HTML таблички

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

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

Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.

Создание строк и ячеек

Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:

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

Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4

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

Выглядеть она у нас будет вот так:

Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного

Название таблицы — тег caption

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

А вот, что у нас получится в итоге:

Пример таблицы с названием

Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

Как видите, несмотря на то, что мы разместили тег caption внутри таблицы. Он располагается над ней.

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

Видео 1: HTML таблицы – тег table

Управление ячейками таблицы

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

  1. Вывести заголовочную строку
  2. Объединить некоторые ячейки по вертикали
  3. А другие объединить по горизонтали

Вот этим мы и займёмся. И начнем мы, пожалуй, с…

Ячейки-заголовки в таблице

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

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

Давайте в таблице из прошлого примера в первой строке заменим теги td на th . А также чуточку изменим их содержимое:

А вот и результат кода выше, выполненный в браузере:

Таблица с тегом th

Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

Как видите, текст в этих ячейках автоматически делается жирным.

Объединение ячеек по горизонтали и вертикали

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

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

  1. Атрибут colspan – указывает сколько надо объединить ячеек по столбцам (горизонталь), начиная с текущей
  2. Атрибут rowspan – указывает сколько надо объединить ячеек по стокам (вертикаль) начиная с текущей

Эти атрибуты должны иметь целое число, начиная с 1 и более.

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

Давайте попробуем в нашей таблице объединить 2 ячейки:

  1. Ячейку 1 в строке 2 объединим по столбцам (горизонталь) с ячейками 2 и 3 в той же строке. Для этого мы зададим ей атрибут rowspan=“3”
  2. Ячейку 4 в строке 2 объединим по строкам (вертикаль) с ячейками 4 в строках 3 и 4. Для этого мы зададим ей атрибут colspan=“3”

И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.

В итоге у нас получится вот такой код:

А на деле, наша таблица будет выглядеть следующим образом:

Объединение ячеек таблицы

Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3

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

Видео 2: HTML таблицы — ячейки и управление ими

Объединение ячеек сразу по 2-ум направлениям

Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.

Давайте объединим ячейку 1 строки 3:

  1. С ячейкой 2 строки 3
  2. С ячейкой 1 строки 4
  3. С ячейкой 2 строки 4

Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:

Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:

А вот так, будет выглядеть наша таблица сейчас:

Объединение ячеек по 2-ум направлениям

Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
Строка4 Ячейка3

Шапка, тело и подвал HTML таблицы.

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

Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.

Тег thead — шапка HTML таблицы

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

Фишки тега thead:

  1. Он должен встречаться только один раз на одну таблицу!
  2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.

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

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

Тег tfoot – подвал HTML таблицы

Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега thead .

Фишки тега tfoot:

  1. Он должен встречаться только один раз на одну таблицу!
  2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.

Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot :

А вот и наша табличка:

Тег tfoot в таблице

Столбец 1 Столбец 2 Столбец 3 Столбец 4
Подвал столбец 1 Подвал столбец 2 Подвал столбец 3 Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
Строка4 Ячейка3

Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot в середине таблицы, его содержимое выводится в её конце!

Тег tbody – тело таблицы.

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

Вот такой код получится в итоге:

Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.

И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.

Видео 3. HTML таблицы – шапка, тело и подвал

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

Управление колонками в HTML таблицах

Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?

Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.

Тег col

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

Что бы понять, как это всё работает, давайте первым двум колонкам — зададим ширину в 100 пикселей, третьей 150, а четвертой 200 пикселей. Для этого мы заведём 4 тега col , и каждому из них пропишем свой атрибут style с определённым значением ширины:

В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):

Тег col в таблице

Столбец 1 Столбец 2 Столбец 3 Столбец 4
Подвал столбец 1 Подвал столбец 2 Подвал столбец 3 Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
Строка4 Ячейка3

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

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

Тег colgroup

Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.

Вот какой код ввёл я:

В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:

Тег colgroup в таблице

Столбец 1 Столбец 2 Столбец 3 Столбец 4
Подвал столбец 1 Подвал столбец 2 Подвал столбец 3 Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3) Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) Строка3 Ячейка3
Строка4 Ячейка3

Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.

Видео 4. HTML таблицы – управление колонками

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

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

Вёрстка с помощью таблиц

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

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

Сделаем таблицу из 5 ячеек : шапка сайта; правая колонка; середина; левая колонка; подвал сайта;

В шапке, как правило, пишут название сайта и размещают логотип.

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

В середине всегда располагается контент сайта: текст, ссылки, картинки, таблицы, блоки и прочее.

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

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

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

Теперь рассмотрим всё выше написанное в более «техническом свете».

Создайте файл page_style.css — в нём будут написаны стили для ячеек шаблона и каких-то отдельных тегов.

Важные параметры для шаблона:

В селекторе #pole_size регулируется растяжение шаблона относительно окна веб-браузера;
vertical-align:top – параметр, благодаря которому меню (и прочий контент) будет прижиматься к верху ячейки;

Остальные параметры задают размер, цвет полей и ориентацию контента внутри них (padding: … )

После стилей для ячеек шаблона с помощью классов будут написаны стили для тегов

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

Содержание файла page_style.css

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


Содержание файла test_page.html

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

Таким образом можно сделать простой движок для своего сайта, если каждую из ячеек шаблона (таблицы) поместить в отдельный файл и подключать его с помощью PHP – Так можно будет внести изменения только в одном файле, а они отобразятся во всех файлах, где объявлено подключение этого элемента. (php include будет работать, только если html-страница находится на хостинге или домашнем сервере).

Организация данных с помощью таблиц

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

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

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

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

Создание таблицы

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

, (table row, строка таблицы) и
(table data, данные таблицы). Для улучшения структуры и дополнительного семантического значения таблицы могут включать в себя элемент (table header, заголовок таблицы), а также несколько других элементов. Когда все эти элементы работают вместе, они образуют цельную таблицу.

Мы применяем элемент

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

Строки таблицы

После того, как таблица была определена в HTML, строки таблицы могут быть добавлены с помощью элемента

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

Данные таблицы

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

, и .

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

. Перечисление нескольких элементов друг за другом создаст столбцы в строке таблицы.

Демонстрация таблицы

Заголовок таблицы

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

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

Разница между этими двумя элементами похожа на разницу между заголовками (элементы от

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

Заголовки таблицы могут быть задействованы в столбцах и строках; данные в таблице определяют, где заголовки уместны. Атрибут scope помогает точно определить, какое содержимое связано с заголовком. Атрибут scope со значениями col , row , colgroup и rowgroup у элемента

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

Использование элемента

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

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

Демонстрация заголовка таблицы

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

Атрибут headers

Атрибут headers очень похож на атрибут scope . По умолчанию, атрибут scope может быть использован только для элемента

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

Структура таблицы

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

и располагается в верхней части таблицы по умолчанию.

Демонстрация названия таблицы

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

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

Шапка таблицы,

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

После

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

Демонстрация группирования элементов таблицы

Объединение нескольких ячеек

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

или .

Атрибут colspan применяется для получения одной ячейки из нескольких столбцов в таблице, в то время как атрибут rowspan используется, чтобы получить одну ячейку из нескольких строк. Каждый атрибут принимает целое значение, которое указывает количество ячеек для охвата, где 1 — значение по умолчанию.

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

Демонстрация объединения ячеек

Границы в таблице

Эффективное использование границ может помочь сделать таблицу более наглядной. Границы вокруг таблицы или отдельных ячеек могут оказать большое влияние, когда пользователь пытается интерпретировать данные и быстро сканировать информацию. При стилизации границ через CSS есть два свойства, которые могут быстро пригодиться: border-collapse и border-spacing .

Свойство border-collapse

Таблицы состоят из родительского элемента

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

Начнём с того, что установим свойство border-collapse для таблицы как collapse , а затем добавим нижний border к каждой ячейке таблицы, независимо от того, какой это элемент,

в таблице и нацелиться на элементы через один и установить цвет фона для этого класса. Другой, более простой способ заключается в использовании псевдокласса :nth-child с параметром even или odd , чтобы выбрать каждый элемент через один.

Здесь наша таблица с книгами использует псевдокласс :nth-child с параметром even для выбора всех чётных строк таблицы и применения к ним серого фона. Следовательно, каждая строка через одну в теле таблицы будет серой.

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

В этом коде есть несколько нюансов, о которых стоит упомянуть. Для начала, элемент

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

Свойство border-collapse определяет модель границы в таблице. Есть три значения для свойства border-collapse : collapse , separate и inherit . Значение по умолчанию separate у свойства border-collapse означает, что все разные границы складываются друг с другом, как описано выше. Значение collapse , с другой стороны, сжимает границы в одну, выбирая ячейку таблицы в качестве основной.

Демонстрация border-collapse

Свойство border-spacing

Когда свойство border-collapse со значением separate позволяет соединять одну границу с другой, так свойство border-spacing задаёт, какое расстояние, если оно есть, отображается между этими границами.

Например, таблица с однопиксельной границей вокруг всей таблицы и однопиксельной границей вокруг каждой ячейки будет иметь двухпиксельную границу вокруг каждой ячейки, потому что границы складываются друг с другом. Добавление border-spacing со значением 4px отделяет границы на 4 пикселя.

Демонстрация border-spacing

Свойство border-spacing работает только тогда, когда значение свойства border-collapse задано как separate , это значение по умолчанию. Если свойство border-collapse ранее не указывалось, мы можем использовать свойство border-spacing не волнуясь.

Кроме того, свойство border-spacing может принимать два значения размера: первое значение для горизонтального расстояния, а второе — для вертикального. К примеру, запись border-spacing: 5px 10px установит 5 пикселей горизонтального расстояния между границами и 10 пикселей — вертикального.

Добавление границ к строкам

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

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

Демонстрация добавления границ к строкам таблицы

Чередование в таблице

Среди усилий сделать таблицы более наглядными, одной типовой практикой дизайна является «чередование» строк таблицы с переменным цветом фона. Это делает строки чётче и обеспечивает наглядность при сканировании информации. Один из способов сделать это — поместить класс к каждому элементу

явно содержит свойство border-collapse со значением separate , а border-spacing задано как 0. Причина в том, что элементы получает левую границу. Так как все элементы получает серый background через псевдокласс :nth-child .

Выравнивание текста

В дополнение к границам и чередованию, важную роль в формировании таблицы играет выравнивание текста внутри ячеек. Имена, описания и тому подобное, как правило, выравниваются по левому краю, в то время как номера и другие числа выравниваются по правому. Другая информация, в зависимости от контекста, может быть по центру. Мы можем переместить текст по горизонтали с помощью свойства text-align в CSS, как мы рассмотрели это в уроке 6, «Работа с типографикой».

Для выравнивания текста по вертикали, однако, применяется свойство vertical-align . Это свойство работает только со строчными элементами и ячейками таблицы и не будет работать для блочных, строчно-блочных или ещё каких-либо других элементов.

Свойство vertical-align принимает несколько разных значений, самые популярные — top , middle и bottom . Эти значения вертикально позиционируют текст относительно ячейки таблицы или ближайшего родительского элемента для строчных элементов.

Исправив HTML и CSS и включив свойства text-align и vertical-align , мы можем очистить макет нашей таблицы с книгами. Обратите внимание, что данные в таблице становится намного яснее и удобнее.

Демонстрация выравнивания текста в таблице

Полностью стилизованная таблица

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

Демонстрация стилизации таблицы

На практике

Теперь, когда мы знаем, как создать и стилизовать таблицы, давайте завершим последнюю оставшуюся страницу нашего сайта Styles Conference — расписание.

Мы начнём нашу страницу Расписание с открытия файла schedule.html и добавления элемента с классом row , так же, как мы это проделали со всеми другими страницами. Внутри этого нового также добавим элемент

С помощью этих элементов и классов мы создали новый раздел страницы с белым background и вертикальным padding и выровняли содержимое страницы по центру. Что изменилось здесь по сравнению с другими страницами — класс container на месте класса grid для элемента

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

Для начала давайте наметим структуру первой таблицы, включая элементы

включают в себя границы, в то время как элементы нет. Без свойства border-collapse как separate границы у элементов сделают тело и подвал таблицы шире, чем шапка.

Поскольку свойство border-collapse задано как separate , мы должны быть осторожны в том, как границы применяются к элементам

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

Наконец, все элементы

получают синий фон, а каждый чётный элемент
, и .

В данный момент, хотя наша первая таблица не содержит каких-либо данных, к ней применяются некоторые стили. В частности, сброс, который мы добавили в уроке 1, установил для таблиц свойство border-collapse со значением collapse , а свойство border-spacing со значением 0. Нам нужны эти стили, поэтому оставим их в покое. Тем не менее, создадим новый раздел в нашем файле main.css, чтобы добавить некоторые дополнительные стили.

В нашем новом разделе стилей специально для страницы Расписание (который появится чуть ниже стилей для страницы Спикеры), установим для элементов

свойство width как 100% и нижний margin 44 пикселя.

Затем с помощью псевдокласса :last-child определим последний элемент

в разделе и установим для него нижний margin 0 пикселей. Это предотвратит конфликт этой таблицы с нижним padding , принадлежащему элементу с классом row .

Пока новый раздел в нашем файле main.css выглядит следующим образом:

Теперь добавим данные в нашу таблицу. Начнём с первого дня конференции, с семинара 24 августа.

В элементе

у таблицы добавим элемент . Первой ячейкой в строке будет элемент заполним дневные мероприятия. Начнём с добавления элемента с элементами добавим элемент чуть ниже нашего предыдущего ряда. Затем добавим элемент , color как #648880 и font-size как 24 пикселя для всех элементов . Наши новые стили включают следующее:

Шапка таблицы выглядит хорошо, так что добавим некоторые стили для тела таблицы. Начнём с элементов

: поменяем их цвет, добавим некоторые шрифтовые и текстовые свойства и небольшой верхний padding .

Мы также добавим некоторые стили к элементам

, начиная с верхней границы и padding . Мы стилизуем элементы . Затем псевдокласс :last-of-type выберет последний элемент этого типа в родительском элементе.

Опять же, в нашем случае, селектор td:last-of-type выберет последний элемент

. Наконец, псевдокласс :only-of-type выберет элемент, только если это элемент данного типа в родительском элементе. Здесь селектор td:only-of-type выберет только элемент , например, когда
отмечая центр дня: «Семинары» для этого конкретного дня. Поскольку элемент является заголовком строки, мы также добавим к нему атрибут scope со значением row .

После элемента

идёт элемент с датой «24 августа», в данном случае. Теперь у нас чаще будет три столбца, первый из которых служит заголовком таблицы, он определяет время, а вторые два столбца — это обычные ячейки таблицы, которые указывают спикеров на это время. Так как в этой строке нам не нужно два отдельных спикера, мы хотим добавить атрибут colspan со значением 2 к элементу , заставляя его объединить два столбца.

Наш код для таблицы теперь выглядит следующим образом:

Внутри элемента

и непосредственно в строке.

Ко всем последующим элементам

мы добавим атрибут scope со значением row , чтобы семантически определить этот элемент в качестве заголовка строки. Затем в элементе добавим элемент , который показывает время первого мероприятия — 8:30, в данном случае. Мы также включим атрибут datetime для элемента со значением времени в часах, минутах и секундах — 08:30:00.

В элемент

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

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

Для второй строки внутри элемента

с атрибутом scope и значением row и снова добавим элемент с соответствующим временем и атрибутом datetime в этом элементе .

После

добавим два элемента для двух спикеров, выступающих в одно время. Непосредственно внутри каждого элемента мы добавим элемент , который ссылается туда, где спикер расположен на странице Спикеры. Помните, мы добавили атрибуты id с именем каждого спикера к родительскому элементу? Используя это значение атрибута id , которому предшествует имя файла speakers.html и знак решётки #, мы можем напрямую связать описание доклада спикера с его биографией на странице Спикеры.

с именем спикера с последующим названием доклада.

Код для первых двух семинаров выглядит следующим образом:

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

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

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

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

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

, как и раньше.

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

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

и . Для них добавим нижний padding 22 пикселя и вертикальное выравнивание top . Для элемента специально добавим правый padding 45 пикселей, выравнивание текста как right и width как 20%. Затем для элементов добавим width как 40%.

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

Далее добавим стиль к шапке таблицы и к элементам в ней. Мы установим line-height как 44 пикселя только для элемента

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

Мы добавим все эти горизонтальные padding с помощью псевдоклассов :first-of-type , :last-of-type и :only-of-type . Эти псевдоклассы работают очень похоже на псевдокласс :last-child , который мы использовали ранее.

Псевдокласс :first-of-type выберет первый элемент этого типа в родительском элементе. В нашем случае, селектор td:first-of-type выберет первый элемент

внутри элемента
внутри элемента
, если это только внутри элемента
объединяет два столбца.

Наши стили немного сложные, но они гибкие в удовлетворении потребностей нашей таблицы. Эти новые стили включают следующее:

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

В то время как мы настраиваем стили для докладов, также уберём нижний margin для элементов

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

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

Мы сделаем это, создав новый класс schedule-offset и назначив ему color со значением #a9b2b9.

После того, как класс находится на месте, добавим его ко всем элементам

, которые объединяют два столбца и включают дату, либо мероприятие — регистрацию, обед или перерыв. Вспоминая нашу таблицу для первого дня с семинарами, HTML будет выглядеть следующим образом:

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

Рис. 11.01. Страница Расписание включает несколько таблиц для Styles Conference

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Ладно, теперь мы знаем, как семантически скомпоновать табличные данные в HTML, также делая это интуитивно с помощью CSS. Обсуждение таблиц было нашим последним основным препятствием при изучении HTML и CSS и мы на этом официально завершили наш сайт Styles Conference.

Для проверки, в этом уроке мы рассмотрели следующее:

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

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

Вёрстка с помощью таблиц

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

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

Сделаем таблицу из 5 ячеек : шапка сайта; правая колонка; середина; левая колонка; подвал сайта;

В шапке, как правило, пишут название сайта и размещают логотип.

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

В середине всегда располагается контент сайта: текст, ссылки, картинки, таблицы, блоки и прочее.

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

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

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

Теперь рассмотрим всё выше написанное в более «техническом свете».

Создайте файл page_style.css — в нём будут написаны стили для ячеек шаблона и каких-то отдельных тегов.

Важные параметры для шаблона:

В селекторе #pole_size регулируется растяжение шаблона относительно окна веб-браузера;
vertical-align:top – параметр, благодаря которому меню (и прочий контент) будет прижиматься к верху ячейки;

Остальные параметры задают размер, цвет полей и ориентацию контента внутри них (padding: … )

После стилей для ячеек шаблона с помощью классов будут написаны стили для тегов

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

Содержание файла page_style.css

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

Содержание файла test_page.html

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

Таким образом можно сделать простой движок для своего сайта, если каждую из ячеек шаблона (таблицы) поместить в отдельный файл и подключать его с помощью PHP – Так можно будет внести изменения только в одном файле, а они отобразятся во всех файлах, где объявлено подключение этого элемента. (php include будет работать, только если html-страница находится на хостинге или домашнем сервере).

Вёрстка с помощью таблиц

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

Проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

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

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

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Учись учиться, не учась! 10378 — | 7884 — или читать все.

Табличная вёрстка VS Блочная вёрстка

Одним из самых популярных споров между верстальщиками — это, какая вёрстка лучше: табличная или блочная. Вопрос этот очень спорный и каждый по-своему прав. Хотя я убеждён, что всё зависит от конкретной ситуации, поэтому и блочная вёрстка, и табличная вёрстка имеют право на существование. И в этой статье я постараюсь разобрать преимущества и недостатки каждой из них. Чтобы при выборе типа вёрстки для своего сайта, Вы опирались, в первую очередь, на их особенности.

Начну с преимуществ и недостатков табличной вёрстки:

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

Теперь о преимуществах и недостаках блочной вёрстки:

  • Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы.
  • Блоки загружаются быстрее таблиц (особенно больших таблиц).
  • В отличии от таблиц, блоки — универсальное средство для создания любого дизайна.
  • Гораздо сложнее табличной вёрстки.
  • Огромные проблемы с кроссбраузерностью.
  • Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.

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

Блочная вёрстка лучше табличной, НО при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600, хотя на практике достаточно от 1024 на 768) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.

Вывод: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: «Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?«.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 33 ):

    А как натянуть таблицу на всю страницу, у меня почему то со всех сторон 1-2 пикселя занимает пустое место страницы

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

    Блочная вёрстка — это использование стилизованных div в самой основе структуры страницы.

    да вот щас сюда перешел чтобы удалить пост)) Понял внезапно,спасибо

    Верстаю сайт блоками див.Конструкция простая.шапка и футер,между ними еще три блока(margin: 0; padding: 0;).ширину писал в пикселах сначала.общая получается 1280px ,а эти три блока соответственно 200+800+280px.Всё должно умещатьсь,а нет.Правый блок падает вниз,делаю чуть меньше крайний блок до тех пор пока умещается,тогда у меня появляется горизонтальная полоса прокрутки.Решил всё переделать в %. Всё получилось ровно ничего не падает всё как должно быть.А до того как я всё это настроил ,задавал вопросы в «Ответах@mail» мне сказали что писать размеры в % ,считается дурным тоном.Вопрос к вам ,как вы считаете почему так?мне многие так написали.И может я что то не так делал когда делал в пикселах?

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

    Еще вопрос .Padding Увеличивает размер блока?А то у меня почему то увеличивает,как такое может быть?

    padding увеличивает размер блока. Поэтому при увеличении padding, нужно самостоятельно уменьшать width.

    Я хочу узнать мнения експерта,а все таки Михаил,какая лучшая вёрстка «Блочная» или «Табличная»?Какую вёрстку вы предпочитаете?Жду на ваш ответ.

    Хотя у них свои преимущества и недостатки, в основном, профессионалы выбирают блочную.

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

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

    Не помогло,я по другому сделал я поднял меню с помощю позиционирования и теперь розмещаю таблици куда надо.Вы меня извините за ошибки в тексте,потомушто я с Украини и не учю руский язык,только украинский и английский.Но всеровно спасибо что отозвались!И еще один надеюсь последний вопрос. Подскажите Михаил!с помощю какого тега или атрибута я могу перемищать «Блоки»,котории создаютса с тега

    Илон Маск рекомендует:  Что такое код hw_api_attribute >values
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL