Как создать таблицу в HTML тег table


Оглавление (нажмите, чтобы открыть):

Работа с HTML таблицами

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

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

Блок . Структура простейшей таблицы

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

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

Сама таблица имеет жесткую структуру: главным является тег

, внутри которого должны лежать теги

, которые создают ряды (строки) таблицы, а внутри них — теги

может содержать в себе только теги для создания ячеек.

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

вставляются теги

, которые создают ячейки.

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

Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

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

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Блок . Ячейки-заголовки

Кроме тегов td существуют также теги

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

В следующем примере ячейки «Иван» и «Николай» должны быть обычными ячейками td, а ячейка «Имя» по логике должна быть ячейкой-заголовком th, так как «Имя» — это общее название содержимого этого столбца:

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

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

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

Блок . Атрибут cellspacing

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

Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

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

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

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

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

Блок . Атрибут cellpadding

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

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

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

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

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает — обнулите его.

Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

Блок . Обнуляем cellpadding и cellspacing

Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

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

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

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

Блок . Добавляем ширину и высоту

Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста — ширина большая, мало текста — ширина маленькая).

Посмотрите на пример их применения:

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

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

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

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

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

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

и

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

Таблица внутри таблицы

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

.

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

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

Как создавать 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 таблиц – задавайте их в комментариях.

Создаем таблицу на html-странице

Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?». В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.

Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.

1. На первом шаге в html-коде с помощью парного тега указываем браузеру, что в web-страницу вставлена таблица: . Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.

2. На втором шаге формируем строки таблицы, помещая парные теги внутрь

. Каждый элемент

создает отдельную строку:

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

. Тег

содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:

создает обычную ячейку, а

ячейку заголовка, т.е. шапку соответствующего столбца:

4. Ну и на последнем шаге помещаем внутрь элементов

и

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

В открывающий тег table я добавил атрибут border и присвоил ему значение 1 для того, чтобы на странице в браузере были видны границы ячеек. По умолчанию этот атрибут равен 0. Результат:

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

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

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

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

Кроме текста мы можем помещать в ячейки картинки с помощью тега :

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

и
и

, и в нее вставляются строки и ячейки.

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

  • для создания таблицы используется только тег
    ;
  • тег
  • может находиться только внутри тега

    ;
  • теги
  • , любое другое содержимое тега

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

    в пределах одной таблицы, и он должен идти в html коде сразу после тега

    и

    могут находиться только внутри тега

    и

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

    Далее рассмотрим дополнительные секции таблиц html. На практике они используются редко, но иногда могут пригодиться.

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

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

    :

    Это таблица

    Ячейка 1.1 Ячейка 1.2
    Ячейка 2.1 Ячейка 2.2

    Это таблица

    Ячейка 1.1 Ячейка 1.2
    Ячейка 2.1 Ячейка 2.2

    Секции таблицы

    Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:

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

    Секция заголовка таблицы формируется с помощью парного тега

    .

    Секцию тела создают парным тегом

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

    Секция завершения формируется парным тегом и в пределах одного контейнера

    может быть только одна.

    Все эти парные теги должны содержать теги

    , которые формируют строки, относящиеся к соответствующим секциям:

    Столбец 1 Столбец 2 Столбец 3
    Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
    Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
    Итог 1 Итог 2 Итог 3

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

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

    и

    . Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:

    1.1 1.2-1.3
    2.1 2.2 2.3
    3.1-4.1 3.2 3.3
    4.2 4.3

    1.1 1.2-1.3
    2.1 2.2 2.3
    3.1-4.1 3.2 3.3
    4.2 4.3

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

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

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

    Пример неправильного html-кода при объединении ячеек:

    ячейка 1.1 ячейка 1.2
    ячейка 2.1 ячейка 2.2

    И результат отображения в браузере:

    Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.

    Атрибуты тега

    В этом посте мы уже столкнулись с одним атрибутом тега

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

    Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом

    . Давайте их рассмотрим.

    Атрибут align — задает выравнивание таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.

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

    bgcolor — устанавливает цвет фона таблицы. Можно использовать совместно с атрибутом background.

    Атрибут bordercolor задает цвет рамки таблицы.

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

    Cellspacing — задает расстояние между внешними границами ячеек.

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

    • для вставки таблицы используются теги
    — обозначение таблицы,

    — добавление строки и

    , секция завершения и секция тела —

    ;
  • для объединения ячеек используем атрибуты тега
  • Разметка HTML XHTML

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

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

    • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
    • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
    • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

    Как создать таблицу в HTML: тег table

    В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

    Средства описания таблиц в HTML

    По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
    Использование таблиц в дизайне

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

    Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка (Таblе Неаder, заголовок таблицы). Эти теги подобны . Отличие состоит в том, что текст, заключенный между тегами , автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться с тегом и атрибутом , текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью .

    Использование заголовков таблицы — тег

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

    Атрибут NOWRAP

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

    Атрибут СОLSPAN

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

    Атрибут ROWSPAN

    Атрибут ROWSPAN, используемый в тегах и , подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.

    Атрибут WIDТН

    Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег , чтобы дать ширину всей таблицы, а можно использовать в тегах или , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге W > таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

    Применение пустых ячеек

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

    Атрибут СЕLLРАDDING

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

    Атрибуты АLIGN и VALIGN

    Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

    ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

    ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

    АLIGN=сеnter располагает содержимое ячейки по центру.

    АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

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

    VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

    VALIGN=middle центрирует содержимое ячейки по вертикали.

    VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

    Атрибут BORDER

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

    Атрибут CELLSPACING

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

    Атрибут BGCOLOR

    Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

    Атрибут BACKGROUND

    Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.

    Использование таблиц в дизайне страницы

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

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

    Использование таблиц в дизайне

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

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

    Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег будет выглядеть примерно так:

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

    Работа с HTML таблицами

    Учебник HTML CSS

    Практика

    Продвинутый курс

    Практика

    Адаптив

    Продвинутые вещи

    Практика

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

    Блок . Структура простейшей таблицы

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

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

    Сама таблица имеет жесткую структуру: главным является тег

    — вставка ячейки;
  • таблица представляет из себя блочные элемент web-страницы;
  • в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
  • таблица может содержать три вида секций: секция заголовка —
  • colspan и rowspan.

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

    Cоздание таблицы в HTML

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

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

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

    • — контейнер, внутри которого располагается таблица (такой же, как для маркированных или для нумерованных списков).
    • border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
    • задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега , вне ячеек и строк.
    • — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
    • — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри обозреватель выделяет жирным и размещает по центру.
    • — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег , столько ячеек в ней и будет: один тег — одна ячейка.
    • позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега , если его нет, то после .
    • используется для той же цели, что и . может содержать , но не наоборот.
    • span — атрибут, задающий число столбцов, к которым применяются свойства контейнера .
    • , и — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и в HTML-документе.
    • colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
    • rowspan объединяет ячейки по столбцам.

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

    Создайте документ формата HTML и скопируйте в него следующий код:

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

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

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

    , внутри которого должны лежать теги

    , которые создают ряды (строки) таблицы, а внутри них — теги

    , которые создают ячейки.

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

    Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

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

    Ячейка 1 Ячейка 2 Ячейка 3
    Ячейка 4 Ячейка 5 Ячейка 6
    Ячейка 7 Ячейка 8 Ячейка 9

    Блок . Ячейки-заголовки

    Кроме тегов td существуют также теги

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

    В следующем примере ячейки «Иван» и «Николай» должны быть обычными ячейками td, а ячейка «Имя» по логике должна быть ячейкой-заголовком th, так как «Имя» — это общее название содержимого этого столбца:

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

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

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

    Блок . Атрибут cellspacing

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

    Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

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

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

    То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

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

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

    Блок . Атрибут cellpadding

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


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

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

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

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

    Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает — обнулите его.

    Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

    Блок . Обнуляем cellpadding и cellspacing

    Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

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

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

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

    Блок . Добавляем ширину и высоту

    Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста — ширина большая, мало текста — ширина маленькая).

    Посмотрите на пример их применения:

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

    Имя Фамилия Зарплата
    Иван Иванов 200$
    Николай Сидоров 1000$

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

    Что вам делать дальше:

    Приступайте к решению задач по следующей ссылке: задачи к уроку.

    Когда все решите — переходите к изучению новой темы.

    HTML тег table

    Тег определяет HTML таблицу для представления табличных данных.

    HTML таблица состоит из элемента и одного или более элементов , и .

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

    Более сложные HTML таблицы также могут содержать элементы , , , , и .

    Разница между HTML 4.01 и HTML5

    В HTML5 атрибуты align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, w >Атрибуты тега

    Атрибут Описание
    align Определяет горизонтальное выравнивание содержимого элемента
    bgcolor Определяет цвет фона элемента
    border Определяет, следует ли отображать рамку вокруг ячеек таблицы
    cellpadding Определяет расстояние между содержимым ячейки таблицы и ее границей
    cellspacing Определяет расстояние между ячейками таблицы
    frame Определяет, каким образом отображается внешняя граница таблицы
    rules Определяет, каким образом следует отображать границы между ячейками таблицы
    summary Определяет краткое описание таблицы
    width Определяет ширину таблицы

    Общие атрибуты

    HTML пример

    Простая HTML таблица с двумя строками и двумя столбцами:

    Создание таблиц в HTML — фон таблицы — рамка таблицы — объединение ячеек

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

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

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

    За создание таблиц в HTML отвечает тег

    и закрывающий тег

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

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

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

    У вас должно получиться следующее:

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

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

    т. е. то что мы будем изменять.

    И так тег

    имеет следующие атрибуты:

    border — задает ширину рамки таблицы в пикселях, записывается так: .

    bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки:

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

    width – задает ширину таблицы в пикселях или процентах:

    height – высота таблицы в пикселях или процентах:

    Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:

    align – выравнивание таблицы;

    align=left – таблицы будет выровнена по левому краю;

    align=right – таблица будет выровнена по правому краю:

    Наша таблица должна выровняться по правому краю.

    bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:

    Таблица получит следующий вид:

    background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.

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

    добавьте background=»fon.gif » весь код:

    Таблица примет следующий вид:

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

    добавить сellpadding=10, то текст, написанный внутри ячеек, получит отступ.

    cellspacing – задает отступ между ячейками таблицы.

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

    прописать cellspacing=0. Весь код:

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

    hspace — задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20

    nowrap – запрещает перенос слов в ячейке, записывается просто nowrap

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

    Теперь рассмотрим атрибуты тега

    , некоторые из них такие же, как и атрибуты тега

    width — ширина ячейки в пикселях или в процентах.

    height – высота ячейки в пикселях или процентах.

    Например, зададим ширину первой ячейки первой строки в 30% — w >

    Наша таблица примет следующий вид:

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

    align – выравнивает содержимое ячеек, имеет следующие значения:

    align=»lef» – содержимое ячейки будет выровнено по левому краю;

    align=»right» – содержимое будет выровнено по правому краю;

    align=»center» – содержимое будет выровнено по центру ячейки.

    Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 — й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.

    bgcolor – при помощи данного атрибута можно задать цвет ячейки.

    background – устанавливает изображение в виде фона ячейки.

    С данными атрибутами мы уже встречались, рассматривая атрибуты тега

    . Работают они одинаково, только в этом случае ими задается фон ячейки. Например, зададим цвет фона 2-й ячейки желтым, а в качестве фона 4-й ячейки установим следующее изображение ( ).

    Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor=»#FFFF00″ для 2-й ячейки и background= «fon.jpg» для 4-й ячейки. В результате наша таблица станет выглядеть так:

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

    bordercolor – задает цвет рамки ячейки.

    C этим атрибутом мы так же встречались, рассматривая атрибуты тега

    . Напоминаю, что он работает не во всех браузерах. Обратите внимание на то, что у тега

    нет атрибута border обозначающего рамку ячейки. Зададим цвет рамки 2 – й ячейки красным для этого ко второй ячейке добавим атрибут bordercolor=»#FF0000″

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

    valign – он производит выравнивание содержимое ячеек по вертикали.

    Имеет следующие значения:

    valign=»top» – выравнивание содержимого ячейки по верхнему краю;

    valign=»bottom» – выравнивание содержимого ячейки по нижнему краю;

    valign=»middle» – выравнивание посередине ячейки;

    valign=»baseline» – выравнивание содержимого ячейки по базовой линии.

    Добавим эти атрибуты к каждой из наших 4-х ячеек.

    Наша таблица примет следующий вид:

    Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan=»» где в кавычках указывается количество ячеек которое необходимо объединить.

    Чтобы объединить ячейки по вертикали т. е. в столбце, необходимо использовать атрибут rowspan=»» где в кавычках указывается количество ячеек, которое необходимо объединить.

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

    Теперь объединим 1-ю и 2-ю ячейку в строке и 3-ю, 6-ю и 7-ю ячейку в ряду. Код нашей таблицы будет следующий:

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

    Это были последние атрибуты ячеек. Как вы можете видеть атрибутов у тегов

    и

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

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

    Web Press

    Статьи Вебмастеру

    Web Press

    Создание и оформление таблиц. HTML + CSS

    Категория

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

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

    Основа таблицы

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

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

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

    Как видно из кода расположенного выше, таблица содержит четыре строки (

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

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