Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке изучили атрибуты тега <td>. В этом уроке будем рисовать рамки для таблиц, строк и ячеек с помощью HTML.

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

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

Атрибут border устанавливает только толщину рамки. Далее пример:

Пример (html)
<table width = "100%" border = "2">
    <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table> 

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

Сразу скажу, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки).

Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.).

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

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Далее пример стилизации ячейки с помощью CSS:

Пример (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.

Как видите, они необязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Далее пример:

Пример (css)
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 принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных единицах измерения, например, в пикселях, процентах и так далее. Далее пример:

Пример (css)
td {
    border: 5px solid #CCCCCC;
    border-radius: 10px;
} 

Поля или внутренний отступ с помощью CSS

Чтобы текст не был впритык к рамке, нужно сделать отступ от нее. В этом нам поможет свойство padding. Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине.

Будем использовать только одно значение. Значение может быть в разных единицах измерения, например, в пикселях, процентах и так далее. Далее пример:

Пример (css)
td {
    border: 5px solid #CCCCCC;
    border-radius: 10px;
    padding: 10px;
} 

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

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Общая информация и форматирование таблицВерстка таблиц
Операторы в PHPКурс по PHP
Цветные строки в HTML-таблицеТаблицы в HTML
Отступы между ячейками в HTML-таблицахТаблицы в HTML
Первое знакомство с PythonЗнакомство с Python
Итоги раздела «Структуры данных в Python»Знакомство с Python
Строковые функции в PHPКурс по PHP
Введение в курс по PHPКурс по PHP
Управляющие последовательности в JavaScriptТипы и переменные
Раздел «Таблицы в HTML»
45. УРОК: 1. Что такое таблица в HTML
46. УРОК: 2. Тег TR в HTML таблицах
47. УРОК: 3. Тег TD в HTML таблицах
48. ПРАКТИКА: 4. Практика по атрибутам colspan и rowspan
49. ПРАКТИКА: 5. Вторая практика по атрибутам colspan и rowspan
УРОК 50. 6. Рамки для таблиц, строк и ячеек в HTML
Вы здесь
51. УРОК: 7. Cтруктурирование HTML-таблиц
52. УРОК: 8. Заголовок (тег CAPTION) HTML-таблиц
53. УРОК: 9. Отступы между ячейками в HTML-таблицах
54. УРОК: 10. Работаем с цветами в HTML-таблице
55. УРОК: 11. Цветные строки в HTML-таблице
56. ПРАКТИКА: 12. Практика поиска ошибок в HTML-таблицах
57. ТЕСТ: 13. Тест по разделу «Таблицы в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно