Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Сделайте выравнивание по центру строки таблицы
В предыдущем уроке познакомились с простой структурой HTML-таблицы. В этом уроке подробнее разберем тег <tr>, используемый для создания строк таблиц.
Атрибуты тега <tr>
Атрибут align
Атрибут align задает выравнивание содержимого ячеек строки по горизонтали. Если применять атрибут к тегу <tr>, а мы знаем, что тег <tr> отвечает за разметку строки, то выравнивание происходит во всех ячейках данного тега. Далее таблица значений и пример:
Значение align |
Действие |
|---|---|
left |
Выравнивание содержимого ячеек по левому краю. |
center |
Выравнивание по центру. |
right |
Выравнивание по правому краю. |
justify |
Выравнивание по ширине (одновременно по правому и левому краю). |
<table width = "100%">
<tr align = "center">
<td>Строка 1</td>
<td>Строка 1</td>
</tr>
</table>Атрибут bgcolor
Атрибут bgcolor задает цвет фона строки. Цвета могут задаваться в шестнадцатеричном коде, в формате RGB или зарезервированными словами (red, black и т.д.). Далее пример:
<table>
<tr bgcolor = "green">
<td>Строка 1</td>
<td>Строка 1</td>
</tr>
<tr bgcolor = "#F1F1F1">
<td>Строка 2</td>
<td>Строка 2</td>
</tr>
</table>Атрибут bordercolor
Атрибут bordercolor указывает цвет рамки, но он бесполезен, так как его поддерживает только Internet Explorer.
Атрибут valign
Атрибут valign применяют для вертикального выравнивания содержимого ячеек в строке. Далее таблица значений и пример:
Значения valign |
Действие |
|---|---|
top |
Выравнивание содержимого ячеек по верхнему краю строки. |
middle |
Выравнивание по середине. |
bottom |
Выравнивание по нижнему краю. |
baseline |
Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии. |
<table>
<tr valign = "middle">
<td>Привет</td>
<td>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum at egestas orci. Vivamus
vitae pretium neque. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut finibus commodo nibh, in accumsan nulla
finibus at. Etiam nec lacus eu turpis volutpat sodales.
Ut pretium dui lacus, non commodo est malesuada placerat.
Nulla bibendum quam elit, in placerat ex placerat ut.
Curabitur non aliquet massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Nam gravida mi quis enim vulputate, sed convallis
magna ultrices. Proin purus enim, fermentum vel tincidunt id,
bibendum eget felis.
</td>
</tr>
</table>Заключение
В этом уроке рассмотрели основные атрибуты тега <tr>. Еще раз напомню: вместо атрибутов для «стилизации» элементов (изменение внешнего вида), лучше использовать свойства CSS, с которыми будем знакомиться позднее, после курса по HTML. В следующем уроке познакомимся с атрибутами тега <td>.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
