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

Разберем ключевые атрибуты для тегов <table>, <tr>, и <td>, и создадим практический пример, чтобы закрепить полученные знания

Атрибуты тега <table>

Тег <table> в HTML обладает несколькими атрибутами, которые позволяют дополнительно настраивать внешний вид и параметры таблицы.

border Атрибут border определяет толщину границы таблицы. Значение этого атрибута устанавливает размер границы в пикселях.

<table border="1">
 <!-- Контент таблицы -->
</table>

height Атрибут height задает высоту таблицы в пикселях. Если атрибут не указан, высота таблицы автоматически регулируется под содержимое.

<table height="100px">
 <!-- Контент таблицы -->
</table>

width Атрибут width устанавливает ширину таблицы в пикселях. Если не указан, ширина таблицы растягивается по содержимому.

<table width="300px">
 <!-- Контент таблицы -->
</table>

bgcolor Атрибут bgcolor изменяет цвет фона таблицы. Может принимать любой цвет в качестве значения.

<table bgcolor="yellow">
 <!-- Контент таблицы -->
</table>

align Атрибут align используется для выравнивания таблицы. Может принимать значения: left, right, center.

<table align="center">
 <!-- Контент таблицы -->
</table>

cellspacing Атрибут cellspacing изменяет расстояние между ячейками таблицы в пикселях. Значение по умолчанию зависит от значения атрибута border.

<table cellspacing="10px">
 <!-- Контент таблицы -->
</table>

Обратите внимание, что значения и использование этих атрибутов могут существенно варьироваться в зависимости от конкретных требований вашего проекта.

Атрибуты тега <tr>

Тег <tr>, который определяет строки таблицы в HTML, также обладает несколькими атрибутами для более гибкой настройки внешнего вида и выравнивания содержимого ячеек.

bgcolor Атрибут bgcolor изменяет цвет фона ячеек внутри строки. Устанавливается для всей строки, и все ячейки этой строки будут иметь указанный цвет фона.

<tr bgcolor="yellow">
 <td>Ячейка 1</td>
 <td>Ячейка 2</td>
</tr>

align Атрибут align используется для выравнивания содержимого ячеек по горизонтали внутри строки. Может принимать значения: left, right, center.

<tr align="center">
 <td>Центрированный текст</td>
 <td>Еще текст</td>
</tr>

valign Атрибут valign выравнивает содержимое ячеек по вертикали внутри строки. Может принимать значения: top, middle, bottom.

<tr valign="middle">
 <td>Текст посередине вертикали</td>
 <td>Еще текст</td>
</tr>

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

Атрибуты тега <td>

Тег <td>, который представляет собой ячейку внутри строки таблицы в HTML, обладает несколькими атрибутами для тонкой настройки внешнего вида и выравнивания содержимого.

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

<td height="30px">
 <!-- Содержимое ячейки -->
</td>

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

<td width="60px">
 <!-- Содержимое ячейки -->
</td>

bgcolor Атрибут bgcolor изменяет цвет фона ячейки. Может принимать любой цвет в качестве значения.

<td bgcolor="yellow">
 <!-- Содержимое ячейки -->
</td>

align. Атрибут align выравнивает содержимое ячейки по горизонтали. Может принимать значения: left, right, center.

<td align="center">
 <!-- Содержимое ячейки -->
</td>

valign. Атрибут valign выравнивает содержимое ячейки по вертикали. Может принимать значения: top, middle, bottom.

<td valign="middle">
 <!-- Содержимое ячейки -->
</td>

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

Применение Знаний на Практике

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

<table border="1" cellspacing="0">
   <!-- Первая строка -->
   <tr bgcolor="green" height="50px">
       <td width="150px" align="center">Курс </td>
       <td width="110px" align="center">Цена</td>
   </tr>
   <!-- Вторая строка -->
   <tr bgcolor="yellow" height="30px">
       <td align="center">HTML</td>
       <td align="center">Бесплатно</td>
   </tr>
   <!-- Третья строка -->
   <tr bgcolor="yellow" height="30px">
       <td align="center">CSS</td>
       <td align="center">799 руб.</td>
   </tr>
   <!-- Четвертая строка -->
   <tr bgcolor="yellow" height="30px">
       <td align="center">Java Script</td>
       <td align="center">799 руб.</td>
   </tr>
</table>

border="1": Устанавливаем толщину границы таблицы в 1 пиксель.

cellspacing="0": Расстояние между ячейками установлено в 0 пикселей.

bgcolor и height для строк: Первая строка (шапка таблицы) имеет зеленый фон и высоту 50 пикселей, остальные три строки имеют желтый фон и высоту 30 пикселей.

width и align для ячеек: Устанавливаем ширину и выравнивание для каждой из ячеек в соответствии с предоставленными значениями.

Этот пример демонстрирует, как применять атрибуты таблицы, строки и ячейки для создания структурированных и стилизованных таблиц в HTML.

Заключение

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