border-bottom-style

border — style

Рамку можно сделать двойной, пунктирной и даже объёмной в точку! И всё это одним свойством.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — style управляет стилем рамки элемента.

Пример

Скопировать ссылку «Пример» Скопировано

Вокруг абзаца текста будет рамка, состоящая из чёрточек:

 p  border-style: dashed;> p  border-style: dashed; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Стиль рамки задаётся при помощи ключевых слов:

• none — отключает рамку (значение по умолчанию).
• solid — сплошная рамка. Этот стиль используется чаще всего.
• dotted — рамка состоит из точек с пробелами между ними.
• dashed — рамка состоит из коротких чёрточек с пробелами между ними.
• double — рамка состоит из двух сплошных линий с небольшим нерегулируемым отступом между ними.

Редкие значения

Скопировать ссылку «Редкие значения» Скопировано

Ниже будут перечислены редко используемые стили рамки:

• groove — рамка объёмная, с тенями от источника света, находящегося в верхнем левом наружном углу.
• ridge — рамка объёмная, с тенями от источника света, находящегося в нижнем правом внешнем углу.
• inset — рамка с тенями от источника света, находящегося в нижнем правом внутреннем углу.
• outset — рамка с тенями от источника света, находящегося в левом верхнем внутреннем углу.

Понять текстовое описание этих стилей довольно сложно, посмотрите пример ниже:

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство border — style является шорткатом для свойств:

• border — bottom — style
• border — left — style
• border — right — style
• border — top — style

Но без особой необходимости эти свойства отдельно не используются. Более того, чаще всего стиль рамки задаётся внутри шортката border .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

💡 Если рамка тонкая, например, 1 пиксель, то внешне значение double почти не будет отличаться от solid . Для визуальной разницы задавайте рамку большей ширины.

💡 Если border — style свойство применяется к таблице со свойством border — collapse в значении collapsed , то inset будет вести себя как groove , outset — как ridge .

Источник

border-bottom-style

none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае нижняя граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
  

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom-style

Объектная модель

[window.]document.getElementById(» elementID «).style.borderBottomStyle

Браузеры

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

CSS по категориям

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

Псевдоэлементы

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Селекторы

• Селекторы тегов
• Идентификаторы
• Классы
• Мультиклассы
• Универсальный селектор
• Вложенные селекторы
• Дочерние селекторы
• Соседние селекторы
• Родственные селекторы
• [атрибут$=»значение»]
• [атрибут*=»значение»]
• [атрибут~=»значение»]
• [атрибут|=»значение»]
• Селекторы атрибутов
• [атрибут=»значение»]
• [атрибут^=»значение»]

Источник

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

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

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

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:

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 Границы таблицы

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

Пример

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

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

Пример

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

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

Пример

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

Пример

Пример

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

• 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 Границы таблицы

По умолчанию текст элементы выделены жирным шрифтом и центрированы.

Пример

Добавление границ

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

Пример

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

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

Чтобы позволить границам свернуться в одну границу, добавьте CSS свойство border-collapse :

Пример

Добавление заполнения ячеек

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

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

Чтобы установить отступ, используйте CSS свойство padding :

Пример

Выравнивание заголовков по левому краю

По умолчанию заголовки таблиц выделены жирным шрифтом и центрированы.

Чтобы выровнять заголовки таблиц по левому краю, используйте CSS свойство text-align :

Пример

Добавление интервал между границами

Расстояние между границами определяет расстояние между ячейками.

Чтобы задать интервал между границами таблицы, используйте CSS свойство border-spacing :

Пример

Примечание: Если таблица имеет свернутые границы, border-spacing это не имеет никакого эффекта.

Ячейка, охватывающая много столбцов

Чтобы сделать ячейку охватывающей более одного столбца, используйте атрибут colspan :

Пример

Ячейка, охватывающая много строк

Чтобы сделать ячейку охватывающей более одной строки, используйте атрибут rowspan :

Пример

Добавление подписи

Чтобы добавить подпись к таблице, используйте тег :

Пример

Особый стиль для одного стола

Чтобы определить специальный стиль для одной конкретной таблицы, добавьте атрибут id к таблице:

Пример

Теперь вы можете определить специальный стиль для этой таблицы:

И добавьте больше стилей:

#t01 tr:nth-child(even) <
background-color: #eee;
>
#t01 tr:nth-child(odd) <
background-color: #fff;
>
#t01 th <
color: white;
background-color: black;
>

Краткое содержание

• Используйте в HTML элемент для определения таблиц
• Используйте в HTML элемент чтобы определить строку таблицы
• Используйте в HTML элемент для определения табличных данных
• Используйте в HTML элемент чтобы определить заголовок таблицы
• Используйте в HTML элемент чтобы определить надпись таблицы
• Используйте в CSS свойство border чтобы определить границы
• Используйте в CSS свойство border-collapse чтобы рухнули границы ячеек
• Используйте в CSS свойство padding чтобы добавить отступы для ячеек
• Используйте в CSS свойство text-align для выравнивания текста в ячейке
• Используйте в CSS свойство border-spacing чтобы задать интервал между ячейками
• Используйте атрибут colspan для создания ячейки охватывают множество столбцов
• Используйте атрибут rowspan чтобы сделать промежуток ячейке несколько строк
• Используйте атрибут id для определения одной таблицы

HTML Упражнения

HTML Теги таблицы

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

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

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

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

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

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Читайте также:  Css fonts in all browsers