Теория урока

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

Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS.

Создание рамки при помощи атрибута

Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:

Код HTML

<table width = "100%" border = "2">
     <tr>
         <td>Ячейка 1</td>
         <td>Ячейка 2</td>
     </tr>
 </table>

Простой способ создать рамку вокруг элемента

Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:

Код CSS

td {
    border: 5px solid #CCCCCC;
}

Рамка слева, справа, снизу и сверху

При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black; рамка справа border-right: 1px dotted #FF0000; рамка снизу border-bottom: 10px solid #000000; рамка сверху border-top: 1px solid green. Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:

Код CSS

table {
    border-left: 5px solid #CCCCCC;
    border-right: 5px solid #CCCCCC;
}
td {
    border-top: 5px solid #CCCCCC;
    border-bottom: 5px solid #CCCCCC;
}

Закругленные углы

Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius. Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

Код CSS

td {
    border: 5px solid #CCCCCC;
    border-radius: 10px;
}

Поля или внутренний отступ

Дабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding. Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

Код CSS

td {
    border: 5px solid #CCCCCC;
    border-radius: 10px;
    padding: 10px;
}

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

Создание рамки при помощи атрибута

Простой способ создать рамку вокруг элемента

Рамка слева, справа, снизу и сверху

Закругленные углы

Поля или внутренний отступ

Похожие уроки и записи блога