Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Как сделать цветную границу таблицы с примерами

Поддержи проект!!!

Сделаем цветную границу таблицы. Чтобы это сделать есть несколько способов, сделать цветную границу в самой таблице, через файл css  на самой странице, и через отдельный файл css.

Цвета можно подобрать здесь.

Все способы сделать цветную границу таблицы

  1. Цвет границы таблицы по умолчанию
  2. Цвет границы таблицы через атрибут -> style
  3. Цвет границы таблицы через -> class
  4. Цвет границы таблицы через -> id
  5. Цвет границы таблицы через -> файл css
  1. Цвет границы таблицы по умолчанию

    Для того, чтобы показать пример границы таблицы черным цветом по умолчанию приведем простую таблицу с border=1
    <table width="500" border=1>

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

    border=1 Цвет черны для границы

  2. Цвет границы таблицы через атрибут style

    Для того, чтобы покрасить границу таблицы в какой-то цвет, мы можем воспользоваться атрибутом Цвет границы таблицы через атрибут style:

    style="border:3px solid #E73134"

    Код таблицы:

    <table width="500" style="border:3px solid #E73134">

    <tbody>

    <tr>

    <td>&nbsp;</td>

    </tr>

    </tbody>

    </table>

    Пример цветной таблицы через атрибут style:

    Как видим - такой способ красить границу таблицы, окрашивает только внешнюю границу таблицы! А перегородки таблицы и не затрагивает!

    текст текст

  3. Цвет границы таблицы через -> class

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

    .tsvetnaya-granitsa td{

    border: solid; border-color:#253ECC;

    }

    И чтобы у нас не было двойной границы добавим border-collapse: collapse;

    table.tsvetnaya-granitsa {

    border-collapse: collapse;

    }

    Соберем всю таблицу со стилями цветной границы вместе:

    <style>table.tsvetnaya-granitsa { border-collapse: collapse; } .tsvetnaya-granitsa td{ border: solid; border-color:#253ECC; } </style>

    <table width="500" class="tsvetnaya-granitsa">

    <tbody>

    <tr>

    <td>здесь текст</td>

    <td>здесь текст</td>

    </tr>

    </tbody>

    </table>

    Результат вывода на экран таблицы с цветной границей таблицы через класс:

    здесь текст здесь текст

  4. Цвет границы таблицы через -> id

    Цвет границы таблицы можно прописать через -> id, берем, весь код, что был приведен выше и заменяем класс на идентификатор!

    Алгоритм окраски границ таблиц через идентификатор аналогичный предыдущему пункту, поэтому стразу соберем всю таблицу вместе! И изменим цвет границы на зеленый, чтобы чуть=чуть отличаться!

    <style>table#tsvetnaya-granitsa { border-collapse: collapse; } #tsvetnaya-granitsa td{ border: solid; border-color: color:green } </style>

    <table width="500" id="tsvetnaya-granitsa">

    <tbody>

    <tr>

    <td>здесь текст</td>

    <td>здесь текст</td>

    </tr>

    </tbody>

    </table>

    Результат вывода на экран таблицы с цветной границей таблицы через идентификатор:

    здесь текст здесь текст

  5. Цвет границы таблицы через -> файл css

    Для того, чтобы покрасить границы таблицы в какой-то из цветом через css , нам нужно:

    1). Сделать файл css
    2). Прикрепить css к странице

    Берем код, из выше приведенных примеров, либо класса, либо ид, и прописываем в нашем файле css

    Понятно, что в файл css нужно вставлять класс(id) без style

    .tsvetnaya-granitsa td{

    border: solid; border-color:#253ECC;

    }

    table.tsvetnaya-granitsa {

    border-collapse: collapse;

    }

    Да! И забыл!

    Все приведенные примеры окрашивания границ таблиц, кроме последнего будут действовать локально! Т.е. на определенной странице!


Вас может еще заинтересовать список тем : #HTML | #CSS | #TABLE | #COLOR |
Последняя дата редактирования : 2020-04-30 07:50
https://dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
цветная граница таблицы

Последние комментарии :
Марат :
08/08/2020 08:59
Нам в очередной раз добавили десяточку, теперь у нас …
подробнее.
Марат :
02/08/2020 12:22
Никогда не задавался такой целью, сделать "клик без onclick"!Как мне кажется, "onclick" и придумали, чтобы отследить…
подробнее.
Darya :
01/08/2020 10:52
А можно сделать клик без…
подробнее.
Марат :
12/07/2020 11:14
Превратите код в html…
подробнее.
Владимир :
11/07/2020 10:29
Строка не прошла, как ее написать…
подробнее.