Атрибуты td: : The Table Data Cell element — Web technology for developers – Html таблицы: теги table, th, tr, td | Создание сайтов и заработок в сети — Вебджем.рф

Простая таблица HTML с двумя ячейками таблицы:

Больше примеров «Попробуйте сами» ниже.

Содержание

Определение и использование

Tег <td> определяет стандартную ячейку в таблице HTML.

Таблица HTML имеет два типа ячеек:

Ячейки заголовка — содержат информацию заголовка (создается в элементе <th>)
Стандартные ячейки — содержат данные (созданные с помощью элемента <td> )

Текст в элементах <th> по умолчанию выделен жирным шрифтом и центрирован.

Текст в элементах <td> является регулярным и выравнивается по левому краю по умолчанию.

Поддержка браузеров

Элемент
<td>	Да	Да	Да	Да	Да

Советы и примечания

Совет: Используйте атрибут

colspan и rowspan, чтобы содержимое охватывало несколько столбцов или строк!

Различия между HTML 4.01 и HTML5

Все атрибуты макета удаляются в HTML5.

Атрибуты

Атрибут	Значение	Описание
abbr	text	Не поддерживается в HTML5. Указывает сокращенную версию содержимого в ячейке
align	left right center justify char	Не поддерживается в HTML5. Выравнивание содержимого ячейки
axis	category_name	Не поддерживается в HTML5. Категории ячеек
bgcolor	rgb(x,x,x) #xxxxxx colorname	Не поддерживается в HTML5. Задает цвет фона ячейки
char	character	Не поддерживается в HTML5. Выравнивание содержимого ячейки по символу
charoff	number	Не поддерживается в HTML5. Задает число знаков содержания будет соотнесено с характером, заданный атрибутом char
colspan	number	Указывает количество столбцов, которая должна охватывать ячейка
headers	header_id	Задает одну или несколько ячеек заголовка, с которыми связана ячейка
height	pixels %	Не поддерживается в HTML5. Устанавливает высоту ячейки
nowrap	nowrap	Не поддерживается в HTML5. Указывает, что содержимое внутри ячейки не должно переноситься
rowspan	number	Задает количество строк, которое должна занимать ячейка
scope	col colgroup row rowgroup	Не поддерживается в HTML5. Определяет способ связывания ячеек заголовка и ячеек данных в таблице
valign	top middle bottom baseline	Не поддерживается в HTML5. Выравнивание содержимого ячейки по вертикали
width	pixels %	Не поддерживается в HTML5. Задает ширину ячейки

Глобальные атрибуты

Tег <td> также поддерживает Глобальные атрибуты в HTML.

Атрибуты событий

Tег <td> также поддерживает Атрибуты событий в HTML.

Примеры — «Попробуйте сами»

Заголовок таблицы
Как создать заголовки таблицы.

Таблица с подписью
Как создать таблицу с подписью.

Теги внутри таблицы
Как создать таблицу с элементы внутри других элементов.

Таблица с несколькими столбцами и строками
Как создать таблицу, более чем с одной строкой или одного столбца.

Cвязанные страницы

Учебник HTML: Таблицы HTML

Справочник HTML DOM: Объект TableData

Учебник CSS: Таблицы СSS

Настройки CSS по умолчанию

Большинство браузеров элемент <td> отображает со следующими значениями по умолчанию:

td {
display: table-cell;
vertical-align: inherit;
}

Атрибуты тегов , и

<TABLE RULES=“rows” FRAME=“void”

CELLSPACING=“0”>

<TR>

<TD> Первая строка </TD> </TR>

<TR>

<TD BGCOLOR=“gray”> Вторая строка </TD> </TR>

<TR>

<TD> Третья строка </TD> </TR>

</TABLE>

Атрибуты <TR>:

атрибут	значение	описание

ALIGN	left, right, center, jus-	Горизонтальное выравнивание
	tify

VALIGN	top, middle, bottom	Вертикальное выравнивание

плюс атрибуты <TABLE>

Атрибуты <TH> и <TD>:

атрибут	значение	описание

ALIGN	left, right, center, jus-	Горизонтальное выравнивание
	tify

VALIGN	top, middle, bottom	Вертикальное выравнивание

COLSPAN	2 (шт)	объединение ячеек по горизонтали

ROWSPAN	3 (шт)	объединение ячеек по вертикали

плюс атрибуты <TABLE>

Пример. Объединение ячеек.

1) Объединение ячеек по горизонтали:

		А

	B		C

Описание в html-виде:

</TABLE>

2) Объединение ячеек по вертикали:

АС

Описание в html-виде:

<TD ROWSPAN=“3“ ALIGN=“center”

BGCOLOR=“silver”> А</TD>

<TR>

<TR>

</TABLE>

Внимание! Не нужно указывать соответсвующие размеры в объеденённых ячейках! В случае объединения по вертикали можно задать только ширину, при объединении по горизонтали – только высоту.

По умолчанию данные в ячейках таблицы выравниваются по горизонтали (ALIGN) по левому краю (left) и по вертикали (VALIGN) – по середине

(middle).

Таблицы могут вкладываться одна в другую. Но не стоит увлекаться. Используйте не более 3-х уровней вложения. Более сложную конструкцию труднее обновлять, находить и исправлять в ней ошибки.

Пример. Вложенные таблицы.

A B

C D

Описание в html-виде:

<TD>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD>

</TABLE>

</TD>

</TR>

</TABLE>

Практическое задание 6.

1. Пришло время окончательно оформить первую страницу нашего сайта. Добавляем ссылки: “как меня найти”, “партнеры”. Три ссылки располагаем слева от фотографии, три — справа. Для этого создаем таблицу 100%Х100% из пяти строк и трех столбцов. В нее помещаем все содержимое веб-страницы. Ячейке с фотографией задаем жесткие размеры — в пикселах, соответственно размерам фотографии. На меню слева отводим 50% и на меню справа — 50%.

В объединенных ячейках соответствующие размеры не задаем! Обновленная страница index.html:

Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела!

резюме	фото
партнеры	юмор
портфолио	как меня найти
	Пишите мне: [email protected]

2. Оформляем раздел “партнеры”, файл partners.html. Необходимо разместить фотографию и минимальные данные о каждом из партнеров (9 человек). Располагаем фотографии и текст в шахматном порядке:

3. Страница “фото” нуждается в доработке. Иконки вверху страницы следует поместить в таблицу из одной строки и выровнять по центру. Большие фотографии, расположенные ниже, также помещаем в таблицу, состоящую из одного столбца.

Атрибут headers тега | HTML справочник

HTML тег <td>

Значение и применение

Атрибут headers (HTML тега <td>) указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

Поддержка браузерами

Синтаксис:

<td headers =  "th_id" >

Отличия HTML 4.01 от HTML 5

Нет.

Значения атрибута

Значение	Описание
th_id	Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. В случае если указывается несколько id, то они записываются как список строк, разделенных пробелом. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

Значение

Описание

th_id

Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. В случае если указывается несколько id, то они записываются как список строк, разделенных пробелом. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута headers HTML тега <td></title>
</head>
<body>
	<table border = "1">
		<tr>
			<th  id = "abiturient" colspan = "3">Ф.И.О</th>
			<th  id = "kurs" >Курс</th>
			<th  id = "phone" >Телефон</th>
		</tr>
		<tr>
			<td headers = "abiturient">Фамилия</td>
			<td headers = "abiturient">Имя</td>
			<td headers = "abiturient">Отчество</td>
			<td headers = "kurs">1</td>
			<td headers = "phone">8 800 555 35 35</td>
		</tr>
	</table>
</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута headers HTML тега <td> (связывает ячейку данных с заглавной ячейкой).HTML тег <td>

seodon.ru | Теги HTML — Тег TD

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут valign, тега <TD>, задает положение содержимого ячейки таблицы по вертикали.

Значения

Значением атрибута valign является одно из ключевых слов.

top — Содержимое прижимается к верху ячейки.
middle — Располагается по центру ячейки.
bottom — Прижимается к низу.
baseline — В этом случае все первые строки ячеек в ряду выравниваются по общей для данного ряда базовой линии. Остальные строки отображаются как обычно.

Значение по умолчанию: middle.

Базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ц, у, д, р, ф) частично выходят за базовую линию. Базовой линией ячейки является базовая линия первой строки или первого блока в ячейке.

Синтаксис

<td valign="значение">...</td>

Обязательный атрибут: нет.

Пример HTML: применение атрибута valign

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег TD, атрибут valign</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>По центру</td>
    <td valign="top">Сверху</td>
    <td valign="bottom">Снизу</td>
   </tr>
  </table>
 </body>
</html>

Результат примера

Результат. Применение атрибута valign.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Нет	Да	Да

Данный атрибут отсутствует в HTML 5, вместо него рекомендуется использовать стили (CSS).

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Атрибут rowspan | HTML | WebReference

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Пример таблицы, где используется вертикальное объединение ячеек

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

В приведённой на рис. 1 таблице содержатся две строки и две колонки, причём левые вертикальные ячейки объединены с помощью атрибута rowspan.

Синтаксис

<td rowspan="<число>">...</td>

Значения

Любое целое положительное число. Если значение установлено как 0, то ячейки объединяются до конца раздела таблицы (<thead>, <tbody> или <tfoot>) или самой таблицы. Максимально допустимое значение равно 65534.

Значение по умолчанию

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TD, атрибут rowspan</title>
 </head>
 <body>
   <table border="1" align="center" 
     cellpadding="4" cellspacing="0">
    <tr> 
     <td rowspan="2" bgcolor="#FBF0DB">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr> 
     <td>Ячейка 3</td>
    </tr>
   </table>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

seodon.ru | Теги HTML — Тег TD

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут height, тега <TD>, применяется для указания рекомендуемой высоты ячейки. По умолчанию браузеры сами определяют высоту ячеек исходя из их содержимого, ширины таблицы, внутренних отступов ячеек и так далее. При помощи атрибута height можно переопределить высоту отдельных ячеек, но если их содержимое не будет вмещаться в указанные размеры, то браузер все равно их увеличит, то есть проигнорирует атрибут height. Кроме этого, высота ячеек в одном ряду таблицы всегда равна размеру самой высокой ячейки, поэтому применять атрибут height достаточно для одной (любой) ячейки ряда.

Значения

Высота ячеек может быть задана двумя способами.

1. Любое неотрицательное число, задающее размер в пикселях.

2. Любое неотрицательное число, задающее размер в процентах, со знаком процента (%) в конце. В этом случае высота будет высчитываться исходя из высоты таблицы, которая будет принята за 100%. Все браузеры игнорируют высоту ячеек в процентах, если высота таблицы не задана явно (атрибут height тега <TABLE>).

Значение по умолчанию: высота рассчитывается исходя из содержимого ячеек и, для каждого ряда таблицы, равна размеру самой высокой ячейки.

Если в одной таблице сразу используются оба способа задания значений атрибута height, то браузеры абсолютно по разному считают высоту «процентных» ячеек. Одни за 100% берут высоту всей таблицы, другие — высоту таблицы за минусом рядов, где высота задана в пикселях.

Синтаксис

<td>...</td>

Обязательный атрибут: нет.

Пример HTML: применение атрибута height

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Тег TD, атрибут height</title> </head> <body> <table border="1"> <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

Результат примера

Результат. Применение атрибута height.

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Частично Нет Частично Нет
В HTML 4.01 и XHTML 1.0 использовать атрибут height допускается только с <!DOCTYPE> Transitional и Frameset, в противном случае будет невалидный код. А вообще, рекомендуется применять стили (CSS).

Поддержка браузерами

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да

Атрибут valign | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

<td valign="top | middle | bottom | baseline">...</td>

Значения

top

Выравнивание содержимого ячейки по верхнему краю строки.

middle

Выравнивание по середине.

bottom

Выравнивание по нижнему краю.

baseline

Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TD, атрибут valign</title> </head> <body> <table border="1"> <tr> <td valign="top">Выравнивание по верхнему краю</td> <td valign="bottom">Выравнивание по нижнему краю</td> </tr> </table> </body> </html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	1.0+	1.0+	1.0+	1.0+	1.0+

Атрибуты td: : The Table Data Cell element — Web technology for developers – Html таблицы: теги table, th, tr, td | Создание сайтов и заработок в сети

Определение и использование

Поддержка браузеров

Советы и примечания

Различия между HTML 4.01 и HTML5

Атрибуты

Глобальные атрибуты

Атрибуты событий

Примеры — «Попробуйте сами»

Cвязанные страницы

Настройки CSS по умолчанию

Атрибуты тегов , и

Практическое задание 6.

Атрибут headers тега | HTML справочник

Значение и применение

Поддержка браузерами

Отличия HTML 4.01 от HTML 5

Значения атрибута

Пример использования

seodon.ru | Теги HTML — Тег TD

Значения

Синтаксис

Поддержка версиями HTML

Поддержка браузерами

Атрибут rowspan | HTML | WebReference

Синтаксис

Значения

Значение по умолчанию

Пример

Браузеры

Автор и редакторы

seodon.ru | Теги HTML — Тег TD

Значения

Синтаксис

Поддержка версиями HTML

Поддержка браузерами

Атрибут valign | htmlbook.ru

Спецификация

Описание

Синтаксис

Значения

Значение по умолчанию

Аналог CSS

Добавить комментарий Отменить ответ

Рубрики