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

Теги и атрибуты таблиц

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

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

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

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

  , столько ячеек в ней и будет: один тег - одна ячейка.

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

  , если его нет, то после .

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

  span - атрибут, задающий число столбцов, к которым применяются свойства контейнера

  .

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

  Инструменты создания сайтов

  Назначение	Инструмент
Разметка	HTML	XHTML
Оформление	CSS
Разработка	PHP	Python

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

  Разберём, какие строчки кода за что отвечают.

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

    Инструменты создания сайтов

    Назначение	Инструмент
  Разметка	HTML	XHTML

    - закрыли таблицу.

  Задача

  Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.

  Решение

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

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

  Исходный код таблицы HTML c

  и

  . Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега	использовать тег	. Текст в ячейке, оформленной с помощью тега	, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги	и	нет. Пример 1. Создание таблицы HTML5 IE Cr Op Sa Fx Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 1. Рис. 1. Результат создания таблицы с четырьмя ячейками Атрибут border тега допустимо добавлять только с пустым значением ( ) или равным 1. Все остальные значения не проходят валидацию. Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0. Пример 2. Поля внутри ячеек HTML5 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек. Рис. 2. Поля в ячейках таблицы Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления. Создание таблицы Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег . Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов и Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan="2" . Пример HTML таблицы с объединением ячеек Исходный код таблицы HTML с объединенными ячейками . Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега использовать тег . Текст в ячейке, оформленной с помощью тега , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги и нет. Пример 12.1. Создание таблицы Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 12.1. Исходный код простой таблицы HTML Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8 Ячейка 9 Заголовки таблицы HTML В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега . Пример HTML таблицы с заголовком th Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Smart Rolls-Royce Исходный код таблицы HTML с заголовками th Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Smart Rolls-Royce Объединение ячеек в таблице HTML В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали. Чтобы объединить ячейки по горизонтали используйте атрибут colspan="х " , у ячейки или , где x Чтобы объединить ячейки по вертикали используйте атрибут rowspan="х " , у ячейки или , где x - количество ячеек для объединения. Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки: Текст ячейки Nissan Модель Комплектация Наличие Nissan Qashqai VISIA + TEKNA + Nissan X-Trail ACENTA + CONNECTA - Колонтитулы и подпись в HTML таблицах HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул. Делается это при помощи обвертки строк выбранной части таблицы тегами. определяет область верхнего колонтитула, - область нижнего колонтитулы, - основную часть таблицы. По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице. Правильный порядок размещения тегов областей в коде HTML таблицы следующий: вначале верхний колонтитул , за ним нижний колонтитул , после них основная часть . При этом на странице основная часть будет выведена между колонтитулами. По необходимости к таблице можно добавить подпись. Для этого используйте тег . Пример HTML таблицы с колонтитулами и подписью Исходный код таблицы с колонтитулами и подписью Комплектации Renault Sandero Stepway Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R Наличие + + + Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.) Топливо бензин бензин дизель Норма токсичности Евро-6 Евро-6 Евро-5 Колонки и группы колонок HTML таблицу можно делить на колонки и группы колонок с помощью тегов и . Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу). Теги и ставятся внутри тега перед тегами , АКП6 (EDC)	Трансмиссия

  ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

  Таблицы в макете страниц сайта

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

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

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

  Теги, используемые для построения таблицы в html

  table - обязательный тег, открывающий и закрывающий таблицу
  caption - необязательный тег, обозначающий заголовок таблицы
  th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
  tr - обязательный тег, с которого открывается и закрывается строка
  td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

  Пример кода простой таблицы

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

  Стобец 1	Стобец 2
Текст в первой ячейке	Текст во второй ячейке

  В браузере отобразится

  Назначение таблиц в html

  Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
  На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...

  Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

  У тега table есть следующие атрибуты:

  width - ширина таблицы. может быть в пикселях или % от ширины экрана.
  bgcolor - цвет фона ячеек таблицы
  background - заливает фон таблицы рисунком
  border - рамка и границы в таблице. Толщина указывается в пикселях
  cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
  Как и ранее, значение атрибута прописываем в кавычках.

  Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th ) и зададим параметр атрибуту border (граница) , width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

  В результате в браузере будет выведена таблица следующего вида

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

  Void - рамки нет,
  above - только верхняя рамка,
  below - только нижняя рамка,
  hsides - только верхняя и нижняя рамки,
  vsides - только левая и правая рамки,
  lhs - только левая рамка,
  rhs - только правая рамка,
  box - все четыре части рамки.

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

  None - между ячейками нет границ,
  groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
  rows - границы только между строками,
  cols - границы только между стобцами,
  all - отображать все границы.

  Рассмотрим пример кода

  Стобец 1	Стобец 2

  Результат

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

  align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
  cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
  cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
  Рассмотрим пример

  Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

  В браузере отобразится выравненная по центру таблица следующего вида

  Строки tr и ячейки td в таблицах HTML

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

  Для тегов tr и td есть следующие

  align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
  valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
  bgcolor - задает цвет строки
  width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
  height - высота ячейки (все ячейки в строке примут данный параметр)

  Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

  Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца
Стобец 1	Стобец 2

  Результат

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

  Спасибо за внимание! Надеюсь материал был полезен!

  СХОЖИЕ СТАТЬИ

  • Обратная связь
  • Карта сайта
  • О сайте

  Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

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