Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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. В следующем уроке познакомимся рамками для таблиц, строк и ячеек.

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Тег TR в HTML таблицахТаблицы в HTML
Заголовок (тег CAPTION) HTML-таблицТаблицы в HTML
Что такое CSS?Знакомство с CSS
Цветные строки в HTML-таблицеТаблицы в HTML
Использование HTML метатегов (мета теги)Знакомство с HTML
Универсальный тег в HTML форме - тег INPUTФормы в HTML
Работаем с цветами в HTML-таблицеТаблицы в HTML
Отступы между ячейками в HTML-таблицахТаблицы в HTML
Cтруктурирование HTML-таблицТаблицы в HTML
Раздел «Таблицы в HTML»
45. УРОК: 1. Что такое таблица в HTML
46. УРОК: 2. Тег TR в HTML таблицах
УРОК 47. 3. Тег TD в HTML таблицах
Вы здесь
48. ПРАКТИКА: 4. Практика по атрибутам colspan и rowspan
49. ПРАКТИКА: 5. Вторая практика по атрибутам colspan и rowspan
50. УРОК: 6. Рамки для таблиц, строк и ячеек в HTML
51. УРОК: 7. Cтруктурирование HTML-таблиц
52. УРОК: 8. Заголовок (тег CAPTION) HTML-таблиц
53. УРОК: 9. Отступы между ячейками в HTML-таблицах
54. УРОК: 10. Работаем с цветами в HTML-таблице
55. УРОК: 11. Цветные строки в HTML-таблице
56. ПРАКТИКА: 12. Практика поиска ошибок в HTML-таблицах
57. ТЕСТ: 13. Тест по разделу «Таблицы в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно