50. Рамки для таблиц, строк и ячеек в HTML
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке изучили атрибуты тега <td>
. В этом уроке будем рисовать рамки для таблиц, строк и ячеек с помощью HTML.
Рамка таблиц важный элемент. Она универсальна и часто используется. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута border
. Несмотря на то, что курс по HTML, основная часть урока будет направлена на свойства CSS.
Создание рамки при помощи атрибута border
Атрибут border
устанавливает только толщину рамки. Далее пример:
<table width = "100%" border = "2">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
Простой способ создать рамку вокруг элемента с помощью CSS
Сразу скажу, подробные записи приводить не буду, так как о свойстве border
будет огромный урок в дальнейшем. Универсальное свойство border
способно установить сразу и толщину, и стиль, и цвет границ (рамки).
Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red
, black
и т.д.).
Какие бывают стили, картинка ниже (картинка взята с сайта [ссылка доступна авторизованным пользователям]):
Для доступа необходимо авторизоваться на сайте Codebra.
Далее пример стилизации ячейки с помощью CSS:
td {
border: 5px solid #CCCCCC;
}
Рамка (слева, справа, снизу и сверху) с помощью CSS
При использовании свойства border
рамка создается со всех сторон. Но мы можем контролировать с какой стороны нарисовать рамку.
- рамка слева:
border-left: 2px solid black
; - рамка справа:
border-right: 1px dotted #FF0000
; - рамка снизу:
border-bottom: 10px solid #000000
; - рамка сверху:
border-top: 1px solid green
.
Как видите, они необязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Далее пример:
table {
border-left: 5px solid #CCCCCC;
border-right: 5px solid #CCCCCC;
}
td {
border-top: 5px solid #CCCCCC;
border-bottom: 5px solid #CCCCCC;
}
Закругленные углы с помощью CSS
Теперь немного затронем тему «красивостей». Чтобы сделать края рамок закругленными, существует свойство border-radius
. Это тоже отдельный урок, сильно подробно разбирать не будем.
Свойство border-radius
принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных единицах измерения, например, в пикселях, процентах и так далее. Далее пример:
td {
border: 5px solid #CCCCCC;
border-radius: 10px;
}
Поля или внутренний отступ с помощью CSS
Чтобы текст не был впритык к рамке, нужно сделать отступ от нее. В этом нам поможет свойство padding
. Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине.
Будем использовать только одно значение. Значение может быть в разных единицах измерения, например, в пикселях, процентах и так далее. Далее пример:
td {
border: 5px solid #CCCCCC;
border-radius: 10px;
padding: 10px;
}
В этом уроке мы изучили способы создания рамок для таблиц и сделали основной упор на свойства CSS. В дальнейшем мы будем все глубже погружаться в CSS. Выполняйте практику и переходите к следующему уроку.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- В CSS коде (где комментарий
/* Здесь ваш код */
) напишите поля (padding
)10px
- Сделайте закругленые уголки у ячейки
5px
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.