50. Рамки для таблиц, строк и ячеек в HTML

В предыдущем уроке изучили атрибуты тега <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 и т.д.).

Какие бывают стили, картинка ниже (картинка взята с сайта [ссылка доступна авторизованным пользователям]):

Далее пример стилизации ячейки с помощью 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

1. В CSS коде (где комментарий /* Здесь ваш код */) напишите поля (padding) 10px
2. Сделайте закругленые уголки у ячейки 5px

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.