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

59. Тег 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>

Похожие уроки и записи блога

Тег TR в HTML таблицахТаблицы
Свойство background для работы с фономЦвета и фон
Горизонтальное и вертикальное выравнивание в CSS Свойства текста
Добавляем градиент к фону элементаЦвета и фон
Рамки для таблиц, строк и ячеек в HTMLТаблицы
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Универсальные атрибуты в HTMLРазметка текста
Универсальный тег в HTML форме - тег INPUTФормы
Управляющие последовательности в JavaScriptТипы и переменные
<
×
>
Раздел «Таблицы»
57. УРОК: Что такое таблица в HTML
58. УРОК: Тег TR в HTML таблицах
УРОК 59. Тег TD в HTML таблицах
Вы здесь
60. ТЕСТ: Тест по основам создания таблиц в HTML
61. ПРАКТИКА: Практика 1: colspan и rowspan
62. ПРАКТИКА: Практика 2: colspan и rowspan
63. УРОК: Рамки для таблиц, строк и ячеек в HTML
64. УРОК: Cтруктурирование HTML таблиц
65. УРОК: Заголовок (CAPTION) HTML таблиц
66. УРОК: Отступы между ячейками в HTML таблицах
67. УРОК: Работаем с цветами в HTML таблице
68. УРОК: Цветные строки в HTML таблице
69. ТЕСТ: Заключительный тест по таблицам в HTML
70. ПРАКТИКА: Поиск ошибок в таблицах
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста
Раздел 3. Ссылки
Раздел 4. Изображения
Раздел 6. Формы
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

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

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

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

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

Закрыть окно