Как сделать промежуток между таблицами в html

Добавил пользователь Евгений Кузнецов
Обновлено: 10.09.2024

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

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

Таблицы в HTML: Видео

В этом уроке мы рассмотрим такие вопросы:

И так, обо всем по порядку.

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

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

Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:

Сохраните созданный файл с расширением .html (Например: index.html).

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

Давайте более детально рассмотрим вышеупомянутый код.

Разделение таблицы на логические части

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

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

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

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

Что даёт нам разделение таблицы на логические части?

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

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

Как создать ячейку заголовка столбца таблицы в HTML

Пример как создать ячейку заголовка столбца таблицы в HTML:

Как создать строки и ячейки таблицы в HTML

Для создания строки таблицы HTML используют элемент . А для создания ячейки — тег .

Например, следующим кодом, мы добавили ещё одну строку с двумя ячейками в тело нашей таблицы (в раздел ):

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

Пример как сделать заголовок таблицы в HTML:

Как сделать границы таблицы в HTML

Для того, чтобы сделать границу таблицы в HTML используется атрибут border. Если задан атрибут border="0", то таблица будет без рамки. Если же border="1", то ширина границы будет равна 1px. Если border="10" — то 10px.

Пример как сделать границы таблицы в HTML:

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

Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке и тем самым увеличивает ее размеры. Без cellpadding текст в таблице плохо воспринимается, так как он накладывается на границу ячеек (при условии, что граница таблицы не равна 0). А с cellpadding вокруг текста образуется свободное пространство и благодаря этому такой текст комфортнее читать.

Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет.

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

Как объединить ячейки таблицы в HTML

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

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

Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали.

Пример как объединить ячейки таблицы в HTML по вертикали:

Пример как объединить ячейки таблицы в HTML по горизонтали:

Как сделать фон таблицы в HTML

Атрибут bgcolor устанавливает цвет фона ячейки.

Пример как сделать фон таблицы в HTML:

Как задать размер таблицы в HTML

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

Для этого нам достаточно прописать для элемента table атрибут width="значение", или height="значение". Значение может быть указано как в пикселях, так и в процентах.

Пример как установить ширину таблицы в HTML:

Группирование строк и столбцов таблицы

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

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

Тег также задает ширину и другие характеристики одной или нескольких колонок таблицы.

HTML тег

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

Синтаксис тега

Между открывающим тегом

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

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

Как сделать таблицу в html

Приведем пример, html код:

Преобразуется на странице в следующее:

Обратите внимание на ячейку . Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег (заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

Атрибуты и свойства тега

1. Свойство align="параметр" - задает выравнивание таблицы. Может принимать следующие значения:

left - выравнивание по левому краю
center - выравнивание по центру
right - выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align="center" .

2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Преобразуется на странице в следующее:

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.jpg . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель.

5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing="число" - расстояние между ячейками в пикселях.

8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:

void - не отрисовывать границы
border - граница вокруг таблицы
above - граница по верхнему краю таблицы
below - граница снизу таблицы
hsides - добавить только горизонтальные границы (сверху и снизу таблицы)
vsides - рисовать только вертикальные границы (слева и справа от таблицы)
rhs - граница только на правой стороне таблицы
lhs - граница только на левой стороне таблицы

10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:

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

12. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class="имя_класса" - можно указать имя класса, которому принадлежит таблица.

14. Свойство style="стили" - стили можно задать индивидуально для каждой таблицы.

Атрибуты и свойства и

1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

left - выравнивание по левому краю
center - выравнивание по центру
right - выравнивание по правому краю

2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor="цвет" - задает цвет фона ячейки.

4. Свойство bordercolor="цвет" - задает цвет рамки ячейки.

5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек.

7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек.

10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали.

top - выравнивание содержимого ячейки по верхнему краю строки
middle - выравнивание по середине
bottom - выравнивание по нижнему краю
baseline - выравнивание по базовой линии

Как сделать, чтобы границы ячеек в таблице не склеивались

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

Более подробно про это свойство читайте в специальной статье border-collapse CSS

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

Привет! подскажите плиз как убрать расстояние между двумя таблицами?

сыль на кодепен

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

display:inline-block у .column
inline-block элементы имеют между собой стандартный пробел. Решается через font-size: 0 для родителя.

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding , поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

Результат в браузере

Таблица с измененными отступами и расстояниями:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= "10" — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

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

Один очень важный пункт — таблицы html являются подспорьем в продвижении отдельно взятых страниц в SEO. Т.е просто текст работать не будет, а если он будет приправлен графикой, изображениями, списками, то его восприятие человеком будет более сильным и такой текст с легкостью выйдет в ТОП выдачи поисковых систем. Этим уже не удивишь в сфере интернет маркетинга. Однако для новичков — это на заметку. Что ж, продолжим урок.

Определение HTML таблицы в веб документе

Все таблицы обозначаются специальным парным тегом table > / table >

Таблица внутри себя содержит строки, которые обозначаются тегом tr > / tr > (tr — table row или ряд таблицы) и столбцы, или как их называют ячейки html таблицы, обозначаемые тегом td > / td > (td — table data или табличные данные)

Не забываем также и о том, что у таблицы есть и заголовок, записываемый тегом th > / th > (th — table heading или табличный заголовок). По умолчанию они выделены жирным шрифтом и выровнены по центру.

Читайте также: