Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?»
. В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега
указываем браузеру, что в web-страницу вставлена таблица:
. Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.
2. На втором шаге формируем строки
таблицы, помещая парные теги
внутрь
. Каждый элемент
создает отдельную строку:
3. Далее, на третьем шаге формируем ячейки
таблицы с помощью парных тегов
и
, которые помещаются внутрь элемента
. Тег
создает обычную
ячейку, а
ячейку заголовка
, т.е. шапку соответствующего столбца:
4. Ну и на последнем шаге помещаем внутрь элементов
и
содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:
Столбец 1
Столбец 2
Столбец 3
Ячейка 1-1
Ячейка 1-2
Ячейка 1-3
Ячейка 2-1
Ячейка 2-2
Ячейка 2-3
Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.
Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег
Если понадобиться как-то оформить вставляемый текст, то можно использовать .
Кроме текста мы можем помещать в ячейки картинки с помощью тега :
В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами
и
вставляются теги
и
, и в нее вставляются строки и ячейки.
При создании таблиц необходимо учитывать некоторые правила:
для создания таблицы используется только тег
;
тег
может находиться только внутри тега
;
теги
и
могут находиться только внутри тега
, любое другое содержимое тега
игнорируется браузером;
содержимое таблицы(текст или картинки) может находиться только в тегах
и
;
ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал);
таблица относится к блочным элементам web-страницы;
размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
Заголовок таблицы
Начнем с парного тега
,
который задает таблице заголовок. Текст заголовка помещается внутрь этого тега, а тот должен находится внутри тега
. Причем без разницы в каком месте html-кода таблицы поместить тег
, браузер все равно отобразит заголовок над таблицей и выровняет по ее центру. Но обычно тег
помещают сразу после открывающего тега
:
Это таблица
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Отображение:
Секции таблицы
Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:
секция заголовка
, в которую помещают ячейки заголовка, которые формируют шапку таблицы;
секция тела
, в которой располагают ячейки с основными данными;
секция завершения
, в которую помещают ячейки с итоговыми данными.
Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в 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 страницу
я закончу, только подведу итоги:
для вставки таблицы используются теги
— обозначение таблицы,
— добавление строки и
— вставка ячейки;
таблица представляет из себя блочные элемент web-страницы;
в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
таблица может содержать три вида секций: секция заголовка — , секция завершения и секция тела — ;
для объединения ячеек используем атрибуты тега
colspan и rowspan.
На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!
Таблицы в HTML, являются наиболее мощным и часто применяемым средством. В основном веб-мастера применяют таблицы не только как метод группировки отображения данных, но и для форматирования веб-страниц.
Давайте рассмотрим оба способа использования HTML таблиц. Но для начала мы узнаем, как добавить таблицы в HTML документ, а также рассмотрим возможности, которые нам предоставляет HTML для работы с таблицами.
Создание простейшей HTML таблицы
Каждая таблица в HTML состоит из множества ячеек, которые располагаются в строках. А уже все эти строки и образуют целую таблицу. Для обозначение таблицы применяется парный тег
и
.
Как вам уже известно, что таблицы состоят из строк и ячеек. И для того, чтобы создать простейшую таблицу, нам понадобятся ещё два тега: это парные теги
и
которые используются для создания строк, и парные теги,
и
отвечающие за создание ячеек. (Причем закрывающие теги строк и ячеек могут отсутствовать
)
Итак, учитывая то, что мы уже знаем, как создать простейшую HTML таблицу, давайте применим приведенные выше сведения, и создадим простейшую таблицу, как показано на (рисунке 1).
Простейшая таблица рис.1
Код простейшей таблицы
, которая показана на рисунке 1 (выше)
1-Ячейка таблицы
2-Ячейка таблицы
3-Ячейка таблицы
4-Ячейка таблицы
5-Ячейка таблицы
6-Ячейка таблицы
7-Ячейка таблицы
8-Ячейка таблицы
9-Ячейка таблицы
10-Ячейка таблицы
11-Ячейка таблицы
12-Ячейка таблицы
Код сложной таблицы, пример на рисунке 2
Объединение столбцов Атрибут "colspan"
Объединение строк Атрибут "rowspan"
Атрибут "valign" "top"
Атрибут "valign" "bottom"
Получившаяся таблица на рисунке 1
. выглядит некрасиво. Всё это потому, что теги, которые мы использовали для создания простейшей таблицы (
,
,
), могут иметь различные атрибуты, которые необходимо указывать: это может быть фон, границы, размеры и так далее.
Давайте сейчас рассмотрим атрибуты, которые применяются для тега
и
. Для того, чтобы увидеть как будет изменяться таблица с применяемыми к тегу
атрибутами, скопируйте код таблицы и поместите его в текстовый документ, с расширением.html и откройте браузером, добавляя атрибуты в код таблицы и обновляя страницу, вы увидите, как будет выглядеть ваша таблица в браузере.
Атрибуты тега:
1) Атрибут "border", задает ширину рамки всей таблицы в пикселях, записывается так:
.
2) Атрибуты "width" и "height" - этот атрибут задаёт рекомендуемую ширину и высоту вашей таблицы, записывается так:
3) Атрибут "bordercolor"
- задаёт цвет рамки всей таблицы, записывается так:
.
4) Атрибут "align"
- выравнивание таблицы, align=left
- таблица будет выравниваться по левому краю, align=right
- по правому, записывается так:
отвечает за строку, и, соответственно, за высоту. А за ширину уже отвечают столбцы. Хоть и есть у тега
атрибут "height" , но он практически уже нигде не используется.
Атрибуты тега
2) Атрибут тега
"width", атрибута "height" (высота) у тега
нет, так как тег
отвечает за ячейку таблицы и ее ширину, а за высоту отвечает строка (тег
).
3) Атрибут тега
"colspan". Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Другими словами этот атрибут позволяет объединить нескольких смежных ячеек по вертикали в одну.
4) Атрибут тега
"rowspan". Значение этого атрибута означает количество строк, которое занимает данная ячейка. Соответственно этот атрибут позволяет объединить несколько ячеек в одну по горизонтали.
5) Атрибут тега
"align". Этот атрибут позволяет выравнивать элементы внутри ячейки по горизонтали. Имеет три значения: "left" (по левому краю ячейки), "center" (по центру), "right" (по правому краю ячейки). Если ничего не указано, выравнивание будет по левому краю.
6) Атрибут тега
"valign". Этот атрибут позволяет выравнивать элементы внутри ячейки по вертикали. Также как и "align" имеет всего три значения: "top" (по верху), "middle" (по середине), "bottom" (по низу). По умолчанию имеет значение "middle" по середине.
Давайте применим то, что мы сейчас узнали.
На рисунке 2 изображена наша сложная таблица.
Сложная таблица рис.2
Вот в принципе и всё, то что необходимо знать про HTML таблицы и успешно ими пользоваться.
Cоздание html таблицы в редакторе Joomla.
Для создания таблицы в Joomla можно использовать редактор TinyMce который находится в Joomla по умолчанию.
Теперь используя визуальный редактора Jооmla - Вы можете создавать простые, или сложные варианты таблиц, но будьте внимательны и не забывайте про ширину области для контента на Вашем сайте, чтобы при создании таблицы её ширина не привышала это значение.
Скачать файлы:
Видеокурс по HTML от Евгения Попова
Бесплатный видеокурс содержит 33 урока по HTML.
Видеокурс, раскрывает базовые знания по HTML и будет полезен не только для начинающих сайтостроителей, которые еще не знакомы с HTML, но и для более опытных вебмастеров.
09.11.2015
Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML
. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:
…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с . Я частенько использую таблицу на своем блоге или на сайте, вот например, как в .
Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.
Из каких основных тегов состоит таблица?
○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды. Закрывающий тег обязательный.
○ тег T
R
Внутри контейнера
……
размещаются ряды:
Столбики создаются с помощью тега
. Закрывающий тег обязателен.
Внимание:
без использования всех этих тегов таблицу создать не возможно.
Теперь попробуем воспользоваться теорией и создадим таблицу на практике.
Задание:
создать таблицу из одного ряда, где будет три столбика.
ряд -1 /столбик 1
столбик 2
столбик 3
Задание:
создать таблицу из трех рядов и трех столбиков.
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
ряд -3 /столбик 1
столбик 2
столбик 3
До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.
Теперь рассмотрим атрибуты для таблицы.
*Атрибуты
○ Границы таблицы в HTML
Чтобы была видна таблица, к тегу
применяется атрибут «
border
»
.
Если значение атрибута «
border
»
«0»
, границы видно не будет, если не прописать к тегу
атрибут «border»
, граница в таблице тоже видна не будет.
Границы таблицы в HTML – сайт
ряд -1 /столбик 1
столбик 2
столбик 3
Результат:
Попробуйте поменять значение в атрибуте «border»
на «10»
.
○ Как объединить ячейки в таблице
Чтобы объединить ячейки в таблице используют атрибуты «colspan»
и «rowspan»
к тегу <
td
>
.
colspan
- объединение ячеек по горизонтали;
rowspan
- объединение ячеек по вертикали.
В значениях указываете, сколько нужно объединить ячеек.
ряд 1 столбик 1
ряд 2 столбик 1
ряд 2 столбик 2
Результат:
ряд 1 столбик 1
ряд 1 столбик 2
ряд 2 столбик 1
Результат:
Более сложный пример:
Таблицы в HTML – сайт
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
столбик 4
Результат:
○ Как увеличить расстояние между ячейками таблицы
Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding»
к тегу
В значениях у атрибута «cellpadding»
указываете расстояние отступа
ряд 1 столбик 1
столбик 2
Результат:
Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing»
к тегу
В значениях у атрибута «cellspacing»
указываете расстояние между ячейками
ряд 1 столбик 1
столбик 2
Результат:
○ Как сделать фон таблицы HTML
Чтобы сделать фон таблицы HTML используют к тегу
и
такие атрибуты:
BGCOLOR
– цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND
–фон в таблице заполняется рисунком.
Таблицы в HTML – сайт
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
столбик 4
Результат:
○ Как вставить картинку в таблицу HTML
Чтобы вставить картинку в таблицу HTML, между тегом
вставляться тег
.
ряд 1 ячейка 1
ячейка 2
Результат:
Значения задаются в пикселях (px)
или в процентах (%)
○ Выравнивание содержимого в таблице HTML
Чтобы выровнять содержимое в таблице HTML, используют к тегу
атрибут «align»
и «valign»
:
ALIGN
– горизонтальное выравнивание содержимого в таблице.
Значения:
left
-
прижать содержимое к левой части (по умолчанию)
;
center
–
установить по центру;
right
-
прижать содержимое к правой части
VALIGN
– вертикальное выравнивание содержимого в таблице.
Значения:
top
–
прижать содержимое к верху;
bottom
–
прижать содержимое к низу;
middle
–
установить содержимое посередине
текст
ячейка по умолчанию
содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу
содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху
содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине
Результат:
○ Как выровнять таблице HTML по центру
Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом
:
Код таблицы
ряд -1 /столбик 1
столбик 2
столбик 3
Дополнительные и основные теги к таблице
Таблица для сайт
Название 1
Название 2
1
2
Результат:
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Предыдущая запись Следующая запись
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов
,
позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.
Пример:
HTML-код:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Отображение в браузере:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Улучшение внешнего вида таблицы html-страницы
Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства, обрамляющих таблицу извне. По умолчанию браузер разделяет ячейки таблицы полосой в 2 пикселя.
Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.
Чтобы графические изображения, помещенные в соседние ячейки таблицы, выглядели как единое целое, надо задать атрибутам CELLSPACING, CELLPADDING нулевые значения.
Отображение границ таблицы html-страницы
Если значение атрибута BORDER тэга
отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать.
Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы.
Атрибут RULES - указывает набор внутренних разделительных линий.
Ниже приведены допустимые значения этих атрибутов.
FRAME
Значение Результат
void Все линии отсутствуют
above Линия над таблицей
below Линия под таблицей
rhs Линия справа от таблицы
lhs Линия слева от таблицы
hsides Линии над и под таблицей
vsides Линии слева и справа от таблицы
border Все линии присутствуют (по умолчанию)
RULES
none Все линии отсутствуют
cols Линии между столбцами
rows Линии между строками
groups Линии между группами столбцов и строк
all Все линии присутствуют (по умолчанию)
Пример:
HTML-код:
111
111
111
111
111
111
Отображение в браузере:
111
111
111
111
111
111
Перенос слов в ячейках таблицы html-страницы
По умолчанию браузер делает автоматический перенос слов текста внутри ячейки таблицы. Атрибут NOWRAP принудительно отключает функцию переноса слов внутри таблицы и отображает текст в одну строку. Поэтому этот атрибут рекомендуют применять по отношению к ячейкам таблицы, содержащим короткий текст, т.к. в противном случае он выйдет за пределы окна браузера. Следует сказать, что этот атрибут не оказывает воздействие на текст ячейки, отформатированный при помощи тэгов
,
.
Вложенные таблицы html-страницы
Вложение таблиц одну в другую - очень распространенный прием оформления внешнего вида Вэб-страницы.
Прежде всего надо построить главную таблицу, а затем в ее ячейках разместить дочерние таблицы. Определяя таблицы, надо не забывать включать в их описание все закрывающие тэги, содержащие символ косой черты, т.к. пропуск всего одного такого дескриптора исказит таблицу кардинальным образом.
Не следует, также, злоупотреблять вложением, т.к. в этом случае существенно замедляется загрузка страницы браузером.
Форматирование вложенных таблиц осуществляется по общим правилам, что, собственно и делает страницу привлекательной.
Пример:
HTML-код:
111
111
01
01
01
01
111
111
111
Отображение в браузере:
111
111
01
01
01
01
111
111
111
Тег colspan - объединение столбцов
Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра
colspan
тега
. Этот параметр указывает браузеру объединить несколько столбцов
в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Например,
Этот столбец включает в себя два столбца.
Для нашего примера:
Заголовок документа
шапка сайта
меню
контент
низ сайта
Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.
Рассмотрим другой пример разметки web-страницы:
шапка сайта
меню
меню
меню
меню
меню
меню
новости
контент
Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок.
Получится три строки и шесть столбцов.
Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:
шапка сайта
Вторая строка состоит из шести столбцов:
меню
меню
меню
меню
меню
меню
Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:
новости
контент
Не так и сложно. Накладываем зрительно сетку на рисунок и прописываем строки по очереди сверху вниз, описывая в каждой
нужное количество столбцов.
Тег rowspan - объединение строк
А если нам понадобится вот такая разметка?
Обратите внимание, во второй строке у нас только один столбец, т.к. первый столбец тянется из первой строки, просто включает в
себя две.
На первый взгляд, это может показаться сложным, на самом деле немного практики и вы будете создавать таблицы любой сложности.
Рассмотрим еще один пример:
шапка
меню
контент
низ сайта
Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:
шапка
меню
Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):
контент
Наконец, третья строка - это один столбец, включающий в себя три столбца:
низ сайта
Используя эти два параметра rowspan
и colspan
можно создавать таблицы любой сложности.
Потренируйтесь.
Вложенные таблицы
Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере
нашей последней разметки.
