Атрибут bordercolor
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Как сделать цвет границы таблицы в html
Для того, чтобы показать пример границы таблицы черным цветом по умолчанию приведем простую таблицу с border=1
Как видим на ниже приведенном примере, цвет границы таблицы по умолчанию — черный:
| border=1 | Цвет черны для границы |
Цвет границы таблицы через атрибут style
Для того, чтобы покрасить границу таблицы в какой-то цвет, мы можем воспользоваться атрибутом Цвет границы таблицы через атрибут style:
style=»border:3px solid #E73134″
Пример цветной таблицы через атрибут style:
Как видим — такой способ красить границу таблицы, окрашивает только внешнюю границу таблицы! А перегородки таблицы и не затрагивает!
| текст | текст |
Цвет границы таблицы через -> class
Следующий способ сделать цветную границу таблицы — это использование класса. Создадим како-то класс, в котором пропишем свойство цветной границы таблицы, но как мы помним, из выше приведенного примера, то у нас отсутствовала перегородка внутри таблицы, поэтому, мы цветную границу пропишем каждой ячейке td:
border: solid; border-color:#253ECC;
И чтобы у нас не было двойной границы добавим border-collapse: collapse;
Соберем всю таблицу со стилями цветной границы вместе:
table.tsvetnaya-granitsa < border-collapse: collapse; >.tsvetnaya-granitsa td
Результат вывода на экран таблицы с цветной границей таблицы через класс:
| здесь текст | здесь текст |
Цвет границы таблицы через -> id
Цвет границы таблицы можно прописать через -> id, берем, весь код, что был приведен выше и заменяем класс на идентификатор!
Алгоритм окраски границ таблиц через идентификатор аналогичный предыдущему пункту, поэтому стразу соберем всю таблицу вместе! И изменим цвет границы на зеленый, чтобы чуть=чуть отличаться!
table#tsvetnaya-granitsa < border-collapse: collapse; >#tsvetnaya-granitsa td
Результат вывода на экран таблицы с цветной границей таблицы через идентификатор:
| здесь текст | здесь текст |
Цвет границы таблицы через -> файл css
Для того, чтобы покрасить границы таблицы в какой-то из цветом через css , нам нужно:
Берем код, из выше приведенных примеров, либо класса, либо ид, и прописываем в нашем файле css
Понятно , что в файл css нужно вставлять классid без style
border: solid; border-color:#253ECC;
Да! И забыл!
Все приведенные примеры окрашивания границ таблиц, кроме последнего будут действовать локально! Т.е. на определенной странице!
Как изменить Цвет рамки таблицы?
Не меняется цвет рамки таблицы
не могу понять почему не меняется на красный цвет <html> <head> <title> Товары и цены.
не получается задать размер и цвет рамки таблицы
что не так? пишу: <table style="border-color: black; border-width: 2px;"> но почему-то не.
Как изменить цвет границы таблицы в Опере?
Всем приве! Мне надо сделать чтобы граница таблицы была вот такого цвета: (205,255,254) Я написал.
Изменить цвет ячейки таблицы
Здравствуйте, подскажите пожалуйста, как изменить цвет ячейки таблицы в html при нажатии? Есть.
Как назначить цвет рамки каждой ячейки таблицы?
Я прохожу курс основ фронтенда, поэтому у меня много, наверно, абсолютно глупых вопросов. В общем, на этот раз я не знаю, как в таблице назначить рамку и цвет для каждой ячейки отдельно. Как на рисунке.
Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
задан 15 дек 2016 в 22:13
139 1 1 серебряный знак 12 12 бронзовых знаков
Так а в чем трудность? Идентифицируешь каждую ячейку (например,
15 дек 2016 в 22:17
class правильнее будет нежели id
15 дек 2016 в 22:18
Псевдокласс :nth-child и иже с ним
15 дек 2016 в 22:20
о, черт, спасибо!
15 дек 2016 в 22:20
моя ошибка была в том, что я писала border: 2 px solid red; и на «текстовый» цвет оно не реагировало спасибо!
15 дек 2016 в 22:21
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
table < width:100%; max-width: 500px; margin: 0 auto; table-layout: fixed; background: #FEF834; border: 2px solid #17152B; >table td < border: 2px solid #BCB946; padding: 15px; >table tr:nth-child(1) td:nth-child(1) < border-color: #ED4630; background: #fff; >table tr:nth-child(1) td:nth-child(2) < border-color: #222200; >table tr:nth-child(1) td:nth-child(3) < border-color: #2242E3; background: #6CF8FC; >table tr:nth-child(2) td:nth-child(1) < border-color: #FFFEF1; background: #E964FE; >table tr:nth-child(2) td:nth-child(2) < border-color: #B23322; background: #EC52A1; >table tr:nth-child(2) td:nth-child(3)
1 2 3 4 5 6 7 8 9
Отслеживать
ответ дан 13 янв 2017 в 10:56
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Вы можете применить отдельные стили для каждого элемента вашей таблицы. Например так:
Рамка Firstname Lastname Age Eve Jackson 94
Документация W3 + цвета ХТМЛ. Эта техника рекомендуется валидатором скорости Гугл. Так сканер быстрее загружает видимую часть страницы.
Отслеживать
ответ дан 16 дек 2016 в 13:54
2,450 1 1 золотой знак 10 10 серебряных знаков 11 11 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.