DWWEB.RU
СКРИПТЫ

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

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

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

1.

Внутри тега table прописываем style с бордюром.

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

Цвет границы таблицы устанавливается по умолчанию черным. Для иллюстрации цветной границы у таблицы сделаем её, ну, например красной:

style="border:3px solid #E73134"

Код таблицы:

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

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

смотрим:

 

2.

Второй способ это:

Цветная граница таблицы через css используя стили.

Напоминаю, что css стили можно использовать на самой странице - идущее ниже описание или в отдельном файле css спсоб 3.

Для этого нужно создать уникальный класс или ид.

Назовем его

tsvetnaya-granitsa

Сверху страницы в титлах прописываем стили css . Сделаем цвет  синий…

<style>

.tsvetnaya-granitsa{

border: solid;

border-color:#253ECC;

}

</style>

код таблицы будет такой:

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

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

Смотрим:

class="tsvetnaya-granitsa"
3. Третий способ сделать цветную границу таблицы через отдельный файл css . Его нужно создать, потом прикрепить к странице и прописать в нем свойства.

Назовём наш файл как и сама данная страница, только будет отличаться разрешением:

Tsvet-granitsi-tablitsi.css

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

.tsvetnaya-granitsa2{

border: 1px solid;

border-color:#E1F50D;

}

Далее прикрепляем данный файл css к нашей странице:

<link href="https://dwweb.ru/__a-data/_primer/css/color/Tsvet-granitsi-tablitsi.css" rel="stylesheet" type="text/css"/>

Код таблицы:

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

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

Смотрим, что получилось:

class="tsvetnaya-granitsa2"
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019