Атрибут border

Что такое атрибут border!? Где используется атрибут border!? Примеры использования. Насколько я знаю, то атрибут "border" есть у двух тегов - это img и table - не путать со свойством border.

Об атрибуте border

1. Что такое атрибут border
2. Использование атрибута border для тега img
3. Использование атрибута border для тега table

Что такое атрибут border

Некоторые теги в html могут использовать атрибут border

Валидация атрибута border

Данный атрибут считается устаревшим, хотя исполняется браузерами, валидный код получается только при использовании переходного <!DOCTYPE>.

Синтаксис атрибута border для тега img

<img border="толщина рамки">

Синтаксис атрибута border для тега table

<table border="толщина рамки"></table>

Значение по умолчанию атрибута border

У атрибута border значение по умолчанию равно "0"

Значение толщины рамки атрибута border

Значение для атрибута border - любое положительное число в пикселях, без указания "px".

Пример атрибута border

<img border="1">



Использование атрибута border для тега img

Для того, чтобы посмотреть результаты добавления атрибута в теге img вам понадобится:

Тег img + атрибут src и вас получится что-то типа:

<img src="https://dwweb.ru/__img/__dates/logo.png">

Давайте данный код выведем прямо здесь, как видим... никакого обрамления вокруг картинки нет...:



Теперь давайте добавим в наш тег атрибут border равный "1".

<img border="1" src="https://dwweb.ru/__img/__dates/logo.png">

Поступим аналогично выведем данный тег с атрибутом border прямо здесь:



Второй пример использования атрибута border для тега img

Изменим значение в атрибуте border с "1" на "3"

<img border="3" src="https://dwweb.ru/__img/__dates/logo.png">

Пример использования атрибута border со значением "3"

Как видим... у картинки обрамление , ширина изменилась - она стала толще!





Использование атрибута border для тега table

Следующим рассмотрим применение атрибута border для тега table нам понадобится тег table

Во внутрь тега table помещаем border="1"

<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>


Результат использования атрибута border для тега table

Первая ячейка

Вторая ячейка

Если вы обратили внимание, что у border="1" обводка состоит из двух линий.

Чтобы от них избавиться придется использовать css, "прописываем border-collapse":

Style

Добавим class - example

<style>

table.example {

border-collapse: collapse;

}

</style>

Html :

<table border="1" class="example">

<tr>

<td>Первая ячейка</td>

<td>Вторая ячейка</td>

</tr>

</table>

Результат:

Первая ячейка

Вторая ячейка