Атрибуты 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 BORDER=“1”> <TR BGCOLOR=“silver”>

<TD COLSPAN=“2” ALIGN=“cente”r>А</TD> </TR>

<TR> <TD>В</TD>

<TD ALIGN=“right”>C</TD> </TR>

</TABLE>

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

В

АС

D

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

<TABLE BORDER=“1” > <TR>

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

BGCOLOR=“silver”> А</TD>

<TD ALIGN=“center”>В</TD> </TR>

<TR>

<TD ALIGN=“center”>C</TD> </TR>

<TR>

<TD ALIGN=“center”>D</TD> </TR>

</TABLE>

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

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

(middle).

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

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

A B

C D

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

<TABLE BORDER=“1”> <TR>

<TD>

<TABLE BORDER=“0”> <TR>

<TD BGCOLOR=“silver”>A</TD> <TD>В</TD>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD>

<TABLE BORDER=“0”> <TR>

<TD ALIGN=“center”>C</TD>

<TD BGCOLOR=“red”>D</TD> </TR>

</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, то они записываются как список строк, разделенных пробелом.
Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

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

<!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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаНетДаДа

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

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия: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

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

Курс по вёрстке сайта на CSS Grid

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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ЧастичноНетЧастичноНет

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

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия: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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *