атрибут «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 |
Результат:
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Предыдущая запись
Следующая запись
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент
служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента
парный блочный тег
(сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов
вы добавите, столько строк в таблице и будет. Открывающий тег
обозначает начало новой строки таблицы. После него помещаются элементы |
(сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента |
вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом |
.
Элемент
(сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент |
, однако его назначение — создание заголовка строки или столбца. Как правило, элемент |
размещают в первой строке таблицы. Браузеры отображают текст в элементе |
жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента |
помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе
несколько простых правил таблиц стилей. Свойство border
управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border
для всех элементов таблицы, например, вот так:
Пример: Применение свойства border
Рамка вокруг таблицы
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Одинарная рамка для таблицы
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse
к своей таблице стилей:
Пример: Применение свойства border-collapse
Рамка вокруг таблицы
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS.
Поле ячейки (padding
) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding
к элементу |
или |
.
Интервал ячеек (border-spacing
) — это расстояние между ними ( |
или |
). Сначала присвойте значение separate
свойству border-collapse
элемента
, а затем установите расстояние между ячейками, изменив значение параметра border-spacing
. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding
и cellspacing
элемента
, но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding
и border-spacing
:
Пример: Применение свойств padding
и border-spacing
padding и border-spacing
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width
CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет "растягиваться" или "сжиматься" в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width
: Table {width: 100%;}
Пример: Применение свойства width
| Ячейка 1
| Ячейка 2
|
| Ячейка 3
| Ячейка 4
|
width: 100%
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки
или ячейки |
объединяются посредством добавления атрибутов colspan
или rowspan
. Атрибут colspan
определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan
— по вертикали.
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan
в элементах |
или |
— ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan
равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута colspan
Атрибут colspan
| colspan
="2">Ячейка на два столбца |
|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение строк
Строки, объединенные при помощи атрибута rowspan
, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута rowspan
| Ячейка на две строки
|
Ячейка 1
| Ячейка 2
|
|---|
| Ячейка 3
| Ячейка 4
|
Атрибут rowspan
| rowspan
="2">Ячейка на две строки |
Ячейка 1 | Ячейка 2 |
|---|
| Ячейка 3 | Ячейка 4 |
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег
(от англ. caption – подпись). Элемент
предназначен для организации заголовка таблицы. Располагается сразу после тега
, но вне описания строки или ячейки.
Пример: Применение тега
Элемент caption
Это заголовок таблицы
| Ячейка на две строки |
Ячейка 1 | Ячейка 2 |
|---|
| Ячейка 3 | Ячейка 4 |
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги
,
и
.
Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз
дания верхней шапки таблицы) используется тег
. Заголовки таблицы
должны быть помещены в элемент
, например:
| Заголовок 1 | Заголовок 2< /th> |
|---|
Основное содержимое (тело) таблицы должно находиться внутри элемента
(таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег
(в одной таблице допускается не более одного тега
). В исходном коде тег
ставится до тега
.
Кроме логического группирования одной из причин использования элементов
и
является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок (
) и последнюю строку (
), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги
,
и
Теги thead, tbody и tfoot
| Это шапка таблицы |
|---|
| Это подвал таблицы |
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Несмотря на то, что мы перед
добавили
, он, тем не менее, появляется в конце таблицы.
Это исходит из того, что
может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему
в коде прописывается перед элементом
.
Задачи
Рекомендуем
| | |
