47. Тег TD в HTML таблицах
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке познакомились с атрибутами тега <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>
Для доступа необходимо авторизоваться на сайте Codebra.
Атрибут 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>
Для доступа необходимо авторизоваться на сайте Codebra.
Атрибут 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
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Для ячейки, которая содержит текст "
Знакомство
" сделайте ширину 400 пикселей - Для ячейки, которая содержит текст "
О теге td
" сделайте высоту 200 пикселей - Для ячейки, которая содержит текст "
Курсы на codebra
" сделайте цвет фона#F1F1F1
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.