Как задать границы таблицы в html

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

Example

Border Color

With the border-color property, you can set the color of the border.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

HTML Границы таблицы

HTML таблицы могут иметь границы разных стилей и форм.

Как добавить границу

Когда вы добавляете границу к таблице, вы также добавляете границы вокруг каждой ячейки таблицы:

Чтобы добавить границу, используйте свойство CSS border к таблице table , th и элементам td :

Пример

Свернутые границы таблицы

Чтобы избежать двойных границ, как в приведённом выше примере, задайте для свойства CSS border-collapse значение collapse .

Это заставит границы слиться в единую границу:

Пример

Стилизация границ таблицы

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

Пример

Закругленные границы таблицы

С помощью свойства border-radius границы получают закругленные углы:

Пример

Пропустите границу вокруг таблицы, исключив table в селекторе CSS:

Пример

Пунктирные границы таблицы

С помощью свойства border-style можно настроить внешний вид границы.

Допускаются следующие значения:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

Пример

Цвет границы

С помощью свойства border-color вы можете установить цвет границы.

Пример

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Как сделать таблицу в HTML? Теги таблицы HTML и их атрибуты

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

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

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

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

1. Как создать таблицу в HTML (тег <table>).
2. Разделение таблицы на логические части (теги <thead>, <tbody>, <tfoot>).
3. Как создать ячейку заголовка столбца таблицы в HTML (тег <th>).
4. Как создать строки и ячейки таблицы в HTML (теги <tr> и <td>).
5. Как сделать заголовок таблицы в HTML (тег <caption>).
6. Как сделать границы таблицы в HTML (атрибут border).
7. Как сделать отступ в таблице HTML (атрибуты cellpadding и cellspacing).
8. Как объединить ячейки таблицы в HTML (атрибуты colspan и rowspan).
9. Как сделать фон таблицы в HTML (атрибут bgcolor).
10. Как задать размер таблицы в HTML (атрибуты width и height).
11. Группирование строк и столбцов таблицы (теги <colgroup> и <col>).

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

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

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

Внутри тега <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

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

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

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

• тег <table> — служит контейнером для элементов, определяющих содержимое таблицы.
• тег <tr> — служит контейнером для создания строки таблицы.
• тег <td> — используется в таблицах внутри тегов <tr> для создания ячеек с данными.

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

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

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

В одной таблице допустимо использовать тег <thead> только один раз. Этот элемент должен идти в коде сразу после тега <table> (и после элементов <caption> и <colgroup>, если они есть), но обязательно перед тегами <tbody> и <tfoot>.

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

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

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

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

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

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

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Как правило, текст в такой ячейке отображается браузером жирным шрифтом и выравнивается по центру. Это единственное отличие тега <th> от элемента <td>.

Элемент <th> обязательно размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

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

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

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

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

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

Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавляются эти теги непосредственно после элементов <table> и <caption>.

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

th — обозначает заглавную ячейку. Эта ячейка хранит тип информации, а данные хранятся в tr.

Какие атрибуты элемента table есть в стандарте html5?

До html5 был целый вагон, но не будем забивать этой кучей голову, ибо они объявлены устаревшими. Остался один-единственный: border. По стандарту, обозначает, для чего используется таблица, и принимает 2 значения: 0 — таблица используется для разметки, 1 — таблица применяется как таблица. В придачу добавляет к таблице рамку.

Какие атрибуты ячейки таблицы существуют в стандарте html5?

Опять же, до html5 был вагон, даже не буду приводить, ибо устарели. Остались 3:

• colspan — заставляет ячейку занять заданное количество столбцов
• rowspan — заставляет ячейку занять заданное количество строк
• headers — применяется для настройки accessibility (будет чуть ниже)

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

Как браузер отрисовывает таблицу?

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

Как настроить accessibility для таблицы?

Для этого существует атрибут ячейки headers. Он связывает ячейку с заголовочной ячейкой.

1. Проставляем заголовочным ячейкам id
2. Проставляем остальным ячейкам значение header равное id заголовочных ячеек

Как настроить группировку строк таблицы в семантические секции?

Для этого есть атрибуты thead, tbody, tfoot. Объединив строки в семантические группы, можно назначать им стили, настраивать прокрутку и тд.