Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Для ячейки, которая содержит текст "
Знакомство" сделайте ширину 400 пикселей - Для ячейки, которая содержит текст "
О теге td" сделайте высоту 200 пикселей - Для ячейки, которая содержит текст "
Курсы на codebra" сделайте цвет фона#F1F1F1
В предыдущем уроке познакомились с атрибутами тега <tr>. В этом уроке пройдемся по атрибутам тега <td>.
Атрибуты тега <td>
Атрибут abbr
Атрибут abbr применяют для краткого описания ячеек, предназначается для речевых (говорящих) браузеров. Этот текст никак не отображается, но легко поддается скриптам JavaScript. Далее пример:
<table width = "100%" border = "1">
<tr align = "center">
<td abbr = "Ячейка 1">Ячейка 1</td>
<td abbr = "Ячейка 2">Ячейка 2</td>
</tr>
</table>Атрибут align
Атрибут align задает выравнивание в ячейке. Далее таблица значений и пример:
Значение align |
Действие |
|---|---|
left |
Выравнивание содержимого ячеек по левому краю. |
center |
Выравнивание по центру. |
right |
Выравнивание по правому краю. |
justify |
Выравнивание по ширине (одновременно по правому и левому краю). |
Пример использования атрибута align:
<table width = "100%">
<tr>
<td align = "center">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>Атрибут background
Атрибут background определяет изображение, которое будет помещено в ячейку. Аналогом в CSS является свойство background-image. Далее пример:
<table width = "100%">
<tr>
<td background = "img/bg.png">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>Атрибут bgcolor
Атрибут bgcolor добавляет цвет фона заданной ячейке. В значении должен быть указан цвет фона. Аналогом в CSS является свойство background-color. Далее пример:
<table width = "100%">
<tr>
<td bgcolor = "#000000">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>Атрибут colspan
Атрибут colspan применяется для объединения ячеек по горизонтали. Чтобы понять его, рассмотрим пример:
<table width = "100%" border = "2">
<tr>
<td colspan = "3">Строка 1</td>
</tr>
<tr>
<td>Строка 2</td>
<td colspan = "2">Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
<td>Строка 3</td>
<td>Строка 3</td>
</tr>
</table>
Атрибут height
Атрибут height отвечает за высоту ячейки. Принимает значения в пикселях и процентах. Он осуждается и считается, что лучше использовать CSS. Далее пример:
<table width = "100%" border = "2">
<tr>
<td height = "300px">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>Атрибут rowspan
Атрибут rowspan отвечает за объединение ячеек по вертикали. Атрибут полезен для создания сложных таблиц. Далее пример:
<table width = "100%" border = "1">
<tr align = "center">
<td rowspan = "2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr align = "center">
<td>Ячейка 3</td>
</tr>
</table>
Атрибут valign
Атрибут valign применяют для вертикального выравнивания содержимого ячеек. Далее таблица значений:
Значение valign |
Действие |
|---|---|
top |
Выравнивание содержимого ячеек по верхнему краю строки. |
middle |
Выравнивание по середине. |
bottom |
Выравнивание по нижнему краю. |
baseline |
Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии. |
Пример:
<table>
<tr>
<td valign = "middle">Привет</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>Атрибут width
Атрибут width отвечает за ширину ячейки. Принимает значения в пикселях и процентах. Он осуждается и считается, что лучше использовать CSS. Далее пример:
<table width = "100%" border = "2">
<tr>
<td width = "100px">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>Заключение
В этом уроке рассмотрели основные атрибуты тега <td>. Еще раз напомню: вместо атрибутов для «стилизации» элементов (изменение внешнего вида), лучше использовать свойства CSS, с которыми будем знакомиться позднее, после курса по HTML. В следующем уроке познакомимся рамками для таблиц, строк и ячеек.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
