border-spacing
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse .
Синтаксис
border-spacing: значение1 [значение2]
Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-spacing
Браузеры
Если к тегу <table> добавлен атрибут cellspacing , то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется. Исключением из этого правила является браузер Internet Explorer до версии 7.0 включительно, который не понимает свойство border-spacing .
66. Отступы между ячейками в HTML таблицах
Отступ можно задать при помощи атрибута cellspacing . Атрибут принимает целые числа. Но в наше время атрибуты уже не эффективны, поэтому будем использовать стили CSS, чтобы сделать отступ между ячейками. Будем использовать два свойства: border-collapse и border-spacing . Итак, свойство border-collapse пишем в стилях для таблицы со значением separate (о свойстве можете почитать в интернете подробно). И пишем для стилей таблицы свойство border-spacing – оно задает расстояние между ячейками, является аналогом атрибуту cellspacing . Измеряется в пикселях, процентах и т.д. Важно понять, что если свойство border-collapse со значением collapse : ( border-collapse: collapse ), то свойство border-spacing работать не будет, потому что при таком значении, ячейки в таблице склеиваются, образую одну линию. Если в свойстве border-spacing одно значение, то отступ будет со всех сторон, а если два значения, то первое значение определяет горизонтальное расстояние, а второе вертикальное. Далее пример:
HTML Таблицы
Таблицы HTML позволяют веб-разработчикам упорядочить данные в строки и столбцы.
HTML Пример таблицы
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Определение HTML таблицы — table
HTML таблицы определяются с помощью тега <table> .
Каждая строка таблицы определяется с помощью тега <tr> . Заголовок таблицы определяется с помощью тега <th> . По умолчанию заголовки таблиц выделены жирным шрифтом и центрированы. Данные таблицы/ячейка определяются с помощью тега <td> .
Пример
Примечание: Элементы <td> — это контейнеры данных таблицы. Они могут содержать все виды элементов HTML: текст, изображения, списки, другие таблицы и т.д.
HTML Таблица — Добавление границы — border
Если вы не укажете границу для таблицы, она будет отображаться без границ.
Граница устанавливается с помощью CSS свойства border :
Пример
Не забудьте определить границы как для таблицы, так и для ячеек таблицы.
HTML Таблица — Свернутые границы — border-collapse
Если вы хотите, чтобы границы сворачивались в одну, добавьте CSS свойство border-collapse :
Пример
HTML Таблица — Добавление отступа в ячейках — padding
Отступ (padding) в ячейке определяет пространство между содержимым ячейки и ее границами.
Если вы не укажете отступ (padding), ячейки таблицы будут отображаться без отступа.
Чтобы установить отступ, используйте CSS свойство padding :
Пример
HTML Таблица — Заголовки по левому краю — text-align
По умолчанию заголовки таблицы выделены жирным шрифтом и выравнены по центру.
Чтобы выровнять заголовки таблицы по левому краю, используйте CSS свойство text-align :
Пример
HTML Таблица — Добавление интервала границы — border-spacing
Интервал границы (border spacing) определяет пространство между ячейками.
Чтобы установить интервал границ для таблицы, используйте CSS свойство border-spacing :
Пример
Примечание: Если таблица имеет свернутые границы (т.е. значение border-collapse ), то border-spacing не действует.
HTML Таблица — Ячейки, которые охватывают много столбцов — colspan
Чтобы размер ячейки охватывал более, чем один столбец, используйте атрибут colspan :
Пример
HTML Таблица — Ячейки, которые охватывают много строк — rowspan
Чтобы размер ячейки охватывал более, чем одну строку, используйте атрибут rowspan :
Пример
HTML Таблица — Добавление подписи — caption
Чтобы добавить подпись к таблице, используйте тег <caption> :
Пример
Примечание: Тег <caption> должен быть вставлен сразу после тега <table> .
Специальный стиль для одной таблицы — атрибут Id
Чтобы определить специальный стиль для отдельной таблицы, добавьте атрибут id к тегу <table> :
Пример
Теперь вы можете определить специальный стиль для этой таблицы:
И добавить больше стилей:
Резюме раздела
- Используйте HTML элемент <table> для определения таблицы
- Используйте HTML элемент <tr> для определения строки таблицы
- Используйте HTML элемент <td> для определения ячейки (данных) таблицы
- Используйте HTML элемент <th> для определения заголовка таблицы
- Используйте HTML элемент <caption> для определения подписи таблицы
- Используйте CSS свойство border для определения границы
- Используйте CSS свойство border-collapse для свёртывания границ таблицы
- Используйте CSS свойство padding для добавления отступов в ячейках
- Используйте CSS свойство text-align для выравнивания текста в ячейках
- Используйте CSS свойство border-spacing для установки интервала между ячейками
- Используйте атрибут colspan , чтобы ячейка занимала много столбцов
- Используйте атрибут rowspan , чтобы ячейка занимала много строк
- Используйте атрибут id для указания одной определённой таблицы
HTML Упражнения
HTML Теги таблицы
| Тег | Описание |
|---|---|
| <table> | Определяет таблицу |
| <th> | Определяет ячейку заголовка в таблице |
| <tr> | Определяет строку в таблице |
| <td> | Определяет ячейку в таблице |
| <caption> | Определяет подпись таблицы |
| <colgroup> | Определяет группу из одного или нескольких столбцов в таблице для форматирования |
| <col> | Определяет свойства столбца для каждого столбца в элементе <colgroup> |
| <thead> | Группирует содержимое заголовка в таблице |
| <tbody> | Группирует содержимое body в таблице |
| <tfoot> | Группирует содержимое footer в таблице |
Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Для чего нужны HTML-таблицы?
- Какой тег определяет HTML-таблицу?
- Каким тегом определяется каждая строка HTML-таблицы?
- Каким тегом определяется каждый заголовок HTML-таблицы?
- Каким тегом определяется каждая ячейка с данными HTML-таблицы?
- Какие элементы могут содержать ячейки с данными HTML-таблицы?
- С помощью какого CSS-свойства можно добавить границу к HTML-таблице?
- С помощью какого CSS-свойства можно свернуть границы HTML-таблицы в одну линию?
- Как добавить внутренний отступ в ячейках HTML-таблицы?
- Как выровнять заголовки HTML-таблицы по левому краю?
- Как добавить интервал между границами HTML-таблицы?
- Как сделать ячейку, которая охватывает более одного столбца HTML-таблицы?
- Как сделать ячейку, которая охватывает более одной строки HTML-таблицы?
- Как добавить подпись к HTML-таблице?
- Где нужно вставить тег <caption> HTML-таблицы?
- Как определить специальный стиль для одной конкретной HTML-таблицы?
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
border-spacing
The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table> . This property applies only when border-collapse is separate .
Try it
The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.
Note: The border-spacing property is equivalent to the deprecated cellspacing attribute of the <table> element, except that border-spacing has an optional second value that can be used to set different horizontal and vertical spacing.
Syntax
The border-spacing property may be specified as either one or two values.
- When one <length> value is specified, it defines both the horizontal and vertical spacings between cells.
- When two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
Values
The size of the spacing as a fixed value.
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | table and inline-table elements |
| Inherited | yes |
| Computed value | two absolute lengths |
| Animation type | discrete |
Formal syntax
Examples
Spacing and padding table cells
This example applies a spacing of .5em vertically and 1em horizontally between a table’s cells. Note how, along its outside edges, the table’s padding values are added to its border-spacing values.