Таблицы - одни из наиболее важных, но в тоже время сложных элементов, которые должны присутствовать на веб-страницах. С их помощью удобно подавать важную и полезную информацию в довольно сжатой форме. Конечно, большинство редакторов в шаблонах, работающих на различных движках, позволяют автоматически вставлять таблицу на страницу сайта или отдельной публикации, но что, если дизайн веб-ресурса, его страницы создаются с нуля? Тогда перед начинающим мастером может встать проблема: как сделать Давайте разберемся, как же правильно и быстро создать данный элемент.
Выбираем редактор
В первую очередь, приступая к созданию таблицы, следует определиться с редактором, в котором вы будете работать. Конечно, проще всего выбрать ту программу, в которой вы создаете основной код сайта. Но лучше всего использовать для этих целей старый добрый блокнот.
Вы можете спросить, для чего усложнять себе жизнь, ведь если делать все сразу в редакторе, то и результат можно увидеть тоже сразу, еще и подсказки программы использовать.
Да, это действительно так, но, создавая таблицу с чистого листа, вы не только сможете досконально изучить сам принцип ее создания, но и не допустить досадных опечаток и ошибок в основном коде. Иногда случается так, что курсор случайно перемещается вниз, и в процессе написания в код закрадывается ошибка, которую порой сложно найти. Создав таблицу в блокноте, вы сможете скопировать ее шифр и вставить в нужное вам место.
Алгоритм создания таблицы
Для начала составим краткий алгоритм, как сделать таблицу в HTML. Это нужно для того, чтобы вы понимали последовательность каждого шага. Затем разберем, как именно выполнять каждый из пунктов.
Начнем с подготовительных действий.
1. Рисуем на листе бумаги схематическое изображение таблицы.
2. Подсчитываем количество строк и ячеек. Если количество последних разное - считаем для каждого рядочка отдельно.
3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.).
4. Записываем основные параметры таблицы - цвет, высоту и ширину, выравнивание текста - в общем, все, что вам покажется нужным.
1. Вставляем тэги таблицы.
2. Вставляем тэги строк исходя из того количества, которое вам нужно.
3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге.
4. Задаем параметры для таблицы в целом.
5. При надобности задаем показатели для отдельных ячеек.
6. Заполняем наши ячейки текстом.
Создаем таблицу
Итак, вы выбрали редактор, теперь давайте разберемся, как создать таблицу в HTML. Тэг, с помощью которого в код страницы вставляется таблица (
Вставив тэги таблицы, переходим к созданию строк и ячеек.
Сразу отметим, что данные элементы также являются парными. Тэг
Для заглавных ячеек следует использовать парный элемент
Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу "Tab".
Как это может выглядеть? Примерно так:
;
.; ;№ п/п ;Фамилия ;; ;1 ; Иванов ;
Как видите, ничего сложного в этом нет. Главное - не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить.
Мы с вами разобрали создание таблицы в HTML, теперь можем переходить к параметрам как самой матрицы, так и ее строк и ячеек.
Параметры таблицы
Когда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее.
Параметры таблицы задаются в тэге
№ п/п | ;Фамилия | ;|
---|---|---|
1 | ;Иванов | ; |
Параметры строк
Итак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы?
Параметры строки прописываются в тэге
1. Уже известные вам border, bordercolor и bgcolor.
2. Align - выравнивание текста в строке. Может принимать значения left, center и right.
3. Valign - данный тэг выравнивает текст по вертикали. Принимает следующие значения:
- top - текст выравнивается по верхней границе;
- middle - по центру;
- bottom - по нижней границе.
Пример оформления строки:
; .№ п/п ;Фамилия ;
Параметры ячеек
И последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML - параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента:
1. Colspan - данный параметр указывает количество столбцов, на которые может простираться ячейка.
2. Rowspan - указывает уже количество строк, которое занимает данная ячейка.
Так как оформление ничем не отличается от прописывания строки, то не будем приводить пример кода.
Выводы
Сделать таблицу не так сложно, как может показаться на первый взгляд. Главное при написании ее кода - усидчивость и внимание.
Что касается того, как вставить таблицу в HTML, то ее шифр достаточно скопировать и вставить именно в то место вашей страницы, в котором она, по вашему мнению, должна располагаться.
Не бойтесь экспериментировать, и вскоре вы в совершенстве овладеете техникой создания таблиц. Успехов!
Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?» . В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега 2. На втором шаге формируем строки
таблицы, помещая парные теги 3. Далее, на третьем шаге формируем ячейки
таблицы с помощью парных тегов 4. Ну и на последнем шаге помещаем внутрь элементов Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ. Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег Если понадобиться как-то оформить вставляемый текст, то можно использовать . Кроме текста мы можем помещать в ячейки картинки с помощью тега : В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами При создании таблиц необходимо учитывать некоторые правила: Начнем с парного тега Отображение: Таблицу html можно логически разбить на части — секции. Всего существует три вида секций: Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега Секцию тела создают парным тегом Секция завершения формируется парным тегом Все эти парные теги должны содержать теги Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
и rowspan
тегов Результат примера: При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция Пример неправильного html-кода при объединении ячеек: И результат отображения в браузере: Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка. В этом посте мы уже столкнулись с одним атрибутом тега Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left. Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением. bgcolor
— устанавливает цвет фона
таблицы. Можно использовать совместно с атрибутом background. Атрибут bordercolor
задает цвет рамки
таблицы. Cellpadding
— определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число. Cellspacing
— задает расстояние между внешними границами ячеек
. На этом рассказывать о том как вставить таблицу в html страницу
я закончу, только подведу итоги: На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч! Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег Пример 1. Создание таблицы HTML5
IE
Cr
Op
Sa
Fx
Порядок расположения ячеек и их вид показан на рис. 1. Рис. 1. Результат создания таблицы с четырьмя ячейками Атрибут border
тега Для управления полями внутри ячеек используется стилевое свойство padding
, которое добавляется к селектору td
. Расстояние между ячейками меняется свойством border-spacing
(пример 2) добавляемым к селектору table
, браузер IE понимает его только с версии 8.0. Пример 2. Поля внутри ячеек HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек. Рис. 2. Поля в ячейках таблицы HTML-таблицы
упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц
могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё. Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку. Для всех элементов таблицы доступны , а также собственные атрибуты. Таблица создаётся при помощи парного тега По умолчанию таблица и ячейки не имеют видимых границ. Границы
задаются с помощью свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */
table {border: 1px solid grey;}
/* границы ячеек первого ряда таблицы */
th {border: 1px solid grey;}
/* границы ячеек тела таблицы */
td {border: 1px solid grey;}
Промежутки между ячейками таблицы
убираются с помощью свойства table {border-collapse: collapse;} . Ширина
таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:
/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */
table {width: 100%;}
/* задаст фиксированную ширину для таблицы */
table {width: 600px;}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения: Строки или ряды таблицы создаются с помощью тега Создает подпись таблицы. Добавляется непосредственно после тега Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами Элемент должен быть использован в следующем порядке: как дочерний элемент Создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега, перед тегами
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают и
как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали. Разметка HTML
Л
юбая таблица в HTML
представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать
таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только
для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы. Для создания таблиц в языке HTML применяется элемент table
, а весь код (ее содержимое)
таблицы располагается между тегами
. Атрибуты этого элемента задают значения для всей таблицы целиком: Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы: bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
> В каждой таблице должна быть хотя бы одна строка, задается она тегами
.
В следующем примере смотрим пример добавления строки: bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
> Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами
. Добавляем к нашей таблице ячейки: bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
> Ячейка №1 В увидим получившуюся таблицу: В некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan
,
значение которого определяет количество строк, необходимых для объединения. Смотрим пример:
bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
> rowspan="2"
>Строки №1 и №2 объединены Ячейка №3 Строка №3 Браузер отобразит: Столбцы объединяются по такому же принципу, только с использованием атрибута colspan
. Смотрим пример: bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
> colspan="2"
>Столбцы №1 и №2 объединены Ячейка №1 Ячейка №4 Браузер отобразит: Атрибуты colspan
и rowspan
можно применять одновременно. В браузере это будет выглядеть так: Или вот так: А ты попробуй написать код самостоятельно! Высоту и ширину можно задавать как для всей таблицы в целом, так и для отдельных строк и столбцов делается это спомощью уже
знакомых атрибутов width
и height
, значения задаются как в пикселях, так и в процентах. Выравнивание таблицы по горизонтали задается атрибутом align
, значения тебе уже знакомы: left, center, right
.
А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align
необходимо применить к каждому тегу td
.
С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign
. Он так же
имеет свои значения - вертикальное выравнивание по центру middle
, по верху top
и по низу bottom
базовой линии
(линией, на которой расположен текст текущей строки). Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие
цели ты преследуешь. Задается это - для изображения - атрибутом background
, в значении которого прописывается путь к необходимому
графическому файлу. Для цветового фона - атрибутом bgcolor
, здесь значением является наименование цвета. Вот вобщем и все, что необходимо для начального уровня. По окончании раздела о построении таблиц в HTML, заканчивается твое
первое знакомство с языком HTML. С помощью таблиц в HTML
можно создавать несложные шаблоны web-страниц, так что я предлагаю тебе создать свою
первую полноценную уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!
указываем браузеру, что в web-страницу вставлена таблица:
. Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.
внутрь . Каждый элемент
создает отдельную строку:
и
, которые помещаются внутрь элемента . Тег создает обычную
ячейку, а ячейку заголовка
, т.е. шапку соответствующего столбца:
и содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1-1 Ячейка 1-2 Ячейка 1-3
Ячейка 2-1 Ячейка 2-2 Ячейка 2-3
и вставляются теги и
, и в нее вставляются строки и ячейки.
;
может находиться только внутри тега ;
и могут находиться только внутри тега , любое другое содержимое тега игнорируется браузером;
и ;
Заголовок таблицы
. Причем без разницы в каком месте html-кода таблицы поместить тег
:
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Секции таблицы
.
может быть только одна.
, которые формируют строки, относящиеся к соответствующим секциям:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Итог 1 Итог 2 Итог 3
Объединение ячеек таблицы
и . Атрибут 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
заменяет две ячейки, поэтому в следующей строке должно быть два тега , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.
ячейка 1.1 ячейка 1.2
ячейка 2.1 ячейка 2.2
Атрибуты тега
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
. Давайте их рассмотрим.
— обозначение таблицы,
— добавление строки и — вставка ячейки;
colspan и rowspan.
Задача
Решение
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
. Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
допустимо добавлять только с пустым значением (
) или равным 1. Все остальные значения не проходят валидацию.
Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 Создание таблиц в HTML
1. Как создать таблицу
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.2. Как создать строки (ряды) таблицы
. Количество горизонтальных строк таблицы определяется количеством парных тегов
.
3. Как сделать ячейку заголовка столбца таблицы
создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов
4. Как сделать ячейку тела таблицы
создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги
, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек должно быть равно количеству пар ячеек
. Для элемента доступны атрибуты colspan , rowspan , headers .
и
для указания каждой части таблицы.
5. Как добавить подпись (заголовок) к таблице
6. Группирование строк и столбцов таблицы
7. Группировка разделов таблицы
, после и, и перед
,
и
элементами. В пределах одной таблицы можно использовать один раз.
группирует основное содержимое таблицы. Используется в сочетании с элементами и
.
.
8. Как объединить ячейки таблицы
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
9. Атрибуты элементов таблицы
Таблица 1. Атрибуты элементов таблицы
Атрибут
Описание, принимаемое значение
colspan
Количество ячеек в строке для объединения по горизонтали.
headers
Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
...
...
Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
rowspan
Количество ячеек в столбце для объединения по вертикали.
Возможные значения: число от 1 до 999.
span
Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
Принимаемые значения: любое целое положительное число.
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Кухня
Холодные блюда
Горячие блюда
Десерты
Салаты
Закуски
Первые блюда
Вторые блюда
Русская
Винегрет
Язык с хреном
Щи с квашеной капустой
Вареники с картошкой
Печеные яблоки с медом
Оливье
Студень говяжий
Рассольник домашний
Караси запеченые в сметане
Блинчатый пирог
Сельдь под "шубой"
Судак заливной
Мясная солянка
Котлеты "Пожарские"
Пирожное "Картошка"
Испанская
Севиче из гребешков
Эмпанадас
Хлебный суп с чесноком
Паэлья с морепродуктами
Чуррос
Тимбал из авокадо и тунца
Ахотомате
Астурийская фабада
Свиное раксо
Альмойшавена
Фасоль с ветчиной
Чанфайна
Рыбный суп с манными клецками
Тортилья картофельная
Бунуэлос
Французская
Вогезский салат
Рийет из курицы
Баклажанный крем-суп "Ренуар"
Картофель огратен
Бриоши
Салат "Панзанелла"
Делисьез из сыра
Французский тыквенный суп
Гратин из птицы
Лигурийский лимонный пирог
Тар-тар
Маринованный лосось
Суп "Конти"
Тартифлетт
Саварен "Триумф"
Элемент TABLE, создаем таблицу
Добавляем строку
Добавляем ячейки
Ячейка №2
Ячейка №3Объединение строк
Ячейка№1
Ячейка№2
Ячейка №4
Ячейка №5
Ячейка №6Строки №1 и №2 объединены
Ячейка№1
Ячейка№2
Ячейка №3
Ячейка №4
Строка №3
Ячейка №5
Ячейка №6
Объединение столбцов
Столбец №3
Ячейка №2
Ячейка №3
Ячейка №5
Ячейка №6Размеры и выравнивание таблицы
Фон таблицы
В заключение
/
То, без чего не создать сайт:
∼
∼