Теория урока

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

Атрибуты для тега <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 задает выравнивание в ячейке. Далее таблица значений и пример:

Таблица взята с сайта htmlbook.ru
left	Выравнивание содержимого ячеек по левому краю.
center	Выравнивание по центру.
right	Выравнивание по правому краю.
justify	Выравнивание по ширине (одновременно по правому и левому краю).

Код 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>

Атрибут 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>

Атрибут valign

Атрибут valign применяют для вертикального выравнивания содержимого ячеек. Далее таблица значений и пример:

Таблица взята с сайта htmlbook.ru
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>

Возможно, вам это будет интересно: Практика 1: поиск ошибок в таблицах

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков), вам нужно авторизоваться

Для ячейки, которая содержит текст "Знакомство" сделайте ширину 400 пикселей
Для ячейки, которая содержит текст "О теге td" сделайте высоту 200 пикселей
Для ячейки, которая содержит текст "Курсы на codebra" сделайте цвет фона #F1F1F1

– Не пропускайте новостей, подпишитесь на нашу страницу ВК, Facebook или Twitter.

– Не знаете как сделать? Нажмите на кнопку Обсуждение и задайте вопрос!

Проверить задание