Теория урока

47. Тег TD в HTML таблицах

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

В предыдущем уроке познакомились с атрибутами тега <tr>. В этом уроке пройдемся по атрибутам тега <td>.

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

Атрибут `abbr`

Атрибут abbr применяют для краткого описания ячеек, предназначается для речевых (говорящих) браузеров. Этот текст никак не отображается, но легко поддается скриптам JavaScript. Далее пример:

Пример (html)

<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:

Пример (html)

<table width = "100%">
    <tr>
        <td align = "center">Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

Атрибут `background`

Атрибут background определяет изображение, которое будет помещено в ячейку. Аналогом в CSS является свойство background-image. Далее пример:

Пример (html)

<table width = "100%">
    <tr>
        <td background = "img/bg.png">Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

Атрибут `bgcolor`

Атрибут bgcolor добавляет цвет фона заданной ячейке. В значении должен быть указан цвет фона. Аналогом в CSS является свойство background-color. Далее пример:

Пример (html)

<table width = "100%">
    <tr>
        <td bgcolor = "#000000">Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

Атрибут `colspan`

Атрибут colspan применяется для объединения ячеек по горизонтали. Чтобы понять его, рассмотрим пример:

Пример (html)

<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. Далее пример:

Пример (html)

<table width = "100%" border = "2">
    <tr>
        <td height = "300px">Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
</table>

Атрибут `rowspan`

Атрибут rowspan отвечает за объединение ячеек по вертикали. Атрибут полезен для создания сложных таблиц. Далее пример:

Пример (html)

<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`	Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии.

Пример:

Пример (html)

<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. Далее пример:

Пример (html)

<table width = "100%" border = "2">
     <tr>
         <td width = "100px">Ячейка 1</td>
         <td>Ячейка 2</td>
     </tr>
</table>

Заключение

В этом уроке рассмотрели основные атрибуты тега <td>. Еще раз напомню: вместо атрибутов для «стилизации» элементов (изменение внешнего вида), лучше использовать свойства CSS, с которыми будем знакомиться позднее, после курса по HTML. В следующем уроке познакомимся рамками для таблиц, строк и ячеек.

47. Тег TD в HTML таблицах

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

Атрибут abbr

Атрибут align

Атрибут background

Атрибут bgcolor

Атрибут colspan

Атрибут height

Атрибут rowspan

Атрибут valign

Атрибут width

Заключение

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

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

Атрибут `abbr`

Атрибут `align`

Атрибут `background`

Атрибут `bgcolor`

Атрибут `colspan`

Атрибут `height`

Атрибут `rowspan`

Атрибут `valign`

Атрибут `width`