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

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

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

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

Цвет границы таблицы по умолчанию

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

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

border=1

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

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

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

style="border:3px solid #E73134"

Код таблицы:

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

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

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

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

текст

текст

Цвет границы таблицы через -> 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>

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

здесь текст

здесь текст

Цвет границы таблицы через -> 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>

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

здесь текст

здесь текст

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

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

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


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

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

.tsvetnaya-granitsa td{

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

}

table.tsvetnaya-granitsa {

border-collapse: collapse;

}

Да! И забыл!

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

Всего комментариев : 0 Comments+ 2.0

+ =