Ячейки html: Тег HTML ячейка таблицы

Тег HTML ячейка таблицы

Рейтинг: 3 из 5, голосов 11

07 января 2018 г.

Тег <td> определяет обычную ячейку в HTML таблице. Используется в HTML таблицах определенных тегом <table>.

В HTML таблицах существует 2 типа ячеек: обычные и ячейки-заголовки. Тег <td> указывает на обычные ячейки таблицы HTML. Для определения ячейки-заголовка используйте тег <th>.

HTML тег ячейки <td> ставится внутри тега <tr> – строки таблицы.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<td>контент ячейки</td>

Отображение в браузере

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Пример использования <td> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Простая таблица на 4 ячейки</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>

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

Тег
<td>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значения	Описание
colspan	число	Количество ячеек по горизонтали, которые должны быть объединены.
headers	id_заголовка	Указывает заголовок, к которому относится ячейка.
rowspan	число	Количество ячеек по вертикали, которые должны быть объединены.
Устаревшие атрибуты
abbr	текст	Короткая версия содержимого ячейки.
align	left right center justify	Задает правило выравнивания содержимого ячейки по горизонтали. В HTML5 используйте CSS.
axis	имя_категории	Используется для категоризации ячеек. Задает категорию, к которой принадлежит ячейка. В HTML5 используйте классы CSS.
bgcolor	rgb HTML hex HTML colorname	Фоновый цвет. В HTML5 используйте CSS. Примеры: RGB: rgb(236,123,050), rgb(0, 20, 187). HTML hex: #faf3e1, #ccc. HTML colorname: white, green;
height	пиксели проценты	Высота ячейки. В HTML5 используйте CSS.
nowrap	пусто / nowrap	Логический атрибут. Устанавливает запрет переноса в тексте ячейки. В HTML5 используйте CSS.
scope	col colgroup row rowgroup	Устанавливает ячейку как заголовок для: col – колонки; colgroup – группу колонок; row – ряда; rowgroup – группы рядов.
valign	top middle bottom baseline	Задает правило выравнивания содержимого ячейки по вертикали. В HTML5 используйте CSS.
width	пиксели проценты	Ширина ячейки. В HTML5 используйте CSS.

by Lebedev

Тег | htmlbook.

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> должен размещаться внутри контейнера <tr>, который
в свою очередь располагается внутри тега <table>.

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

abbr: Краткое описание содержимого ячейки.
align: Определяет выравнивание содержимого ячейки по горизонтали.
axis: Группирует ячейки связанные между собой похожей информацией.
background: Задает фоновый рисунок в ячейке.
bgcolor: Цвет фона ячейки.
bordercolor: Цвет рамки.
char: Выравнивает содержимое ячейки по заданному символу.
charoff: Смещает содержимое ячейки относительно заданного символа.
colspan: Объединяет горизонтальные ячейки.
headers: Позволяет связать ячейки с заголовком.
height: Высота ячейки.
nowrap: Запрещает перенос строк.
rowspan: Объединяет вертикальные ячейки.
scope: Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign: Выравнивание содержимого ячейки по вертикали.
width: Ширина ячейки.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!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</title>
 </head>
 <body>
  <table border="1" cellpadding="7" cellspacing="0">
   <tr>
     <td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
   </tr>
   <tr>
     <td valign="top" align="center">Ячейка 2</td>
     <td valign="top">Ячейка 3</td>
   </tr>
  </table> 
 </body>
</html>

Таблицы

Атрибуты тега <td>
Выравнивание элементов
Колонки таблицы
Макет из двух колонок
Макет из двух колонок
Макет из трех колонок
Макет из трёх колонок
Объединение ячеек
Объемная таблица
Особенности верстки слоями
Особенности таблиц
Применение таблиц
Простая таблица
Разрезание и склейка изображений
Сетка таблицы
Строки таблицы
Таблица без рамки
Таблица с рамкой
Таблицы
Таблицы и стили
Таблицы и стили
Теги для таблиц

HTML тэг td

❮ Назад
Полный справочник HTML
Далее ❯

Пример

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

Ячейка A	Ячейка B
Ячейка C	Ячейка D

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

Другие примеры “Попробуйте сами” ниже.

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

Тег

определяет стандартную ячейку данных в таблице HTML.

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

Ячейки заголовков — содержат информацию заголовка (созданную с помощью элемент)
Ячейки данных – содержат данные (созданы с помощью элемента )

Текст в элементах

является обычным и по умолчанию выровнен по левому краю.

Текст в элементах

выделен полужирным шрифтом и по центру по умолчанию.

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

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

Атрибуты

Атрибут	Значение	Описание
столбец	номер	Указывает количество столбцов, которые должна охватывать ячейка
коллекторы	заголовок_id	Указывает одну или несколько ячеек заголовка, с которыми связана ячейка
ряд	номер	Устанавливает количество строк, которые должна охватывать ячейка

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

Тег

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

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

Тег

также поддерживает атрибуты событий в HTML.

Дополнительные примеры

Пример

Как выровнять содержимое внутри

(с помощью CSS):

Месяц	Экономия
Январь	100 долларов США
Февраль	$80

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

Пример

Как добавить цвет фона в ячейку таблицы (с помощью CSS):

Месяц	Экономия
январь	100$

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

Пример

Как установить высоту ячейки таблицы (с помощью CSS):

Месяц< /th>	Экономия
январь	100$

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

Пример

Как указать отсутствие переноса слов в ячейке таблицы (с помощью CSS):

Поэма
Никогда не увеличивайте сверх необходимого количество сущностей, необходимых для объяснения чего-либо

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

Пример

Как выровнять содержимое внутри

по вертикали (с помощью CSS):

Месяц	Экономия
январь	$100

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

Пример

Как установить ширину ячейки таблицы (с помощью CSS):

Месяц	Экономия
Январь	100$

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

Пример

Как создать заголовки таблиц:

Name< /th>	Электронная почта	Телефон
Джон Доу	john. [email protected]	123-45-678

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

Пример

Как создать таблицу с заголовком:

Ежемесячная экономия
Месяц	Экономия
Январь	100 долларов
Февраль	80$

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

Пример

Как определить ячейки таблицы, которые охватывают более одной строки или один столбец:

Имя	Электронная почта	Телефон
Джон Доу	[email protected]	123-45-678	212-00-546

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

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

Руководство по HTML: Таблицы HTML

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

Учебное пособие по CSS: Таблицы стилей

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

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

td {
display: table-cell;
вертикальное выравнивание: наследовать;
}

❮ Предыдущий
Полный справочник HTML
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top Examples
Примеры HTML

Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

HTML-тег colgroup

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Установите цвет фона трех столбцов с помощью тегов

ISBN	Название	Цена
3476896	Мой первый HTML	$53

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

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

Тег

указывает группу из одного или нескольких столбцов в таблице для форматирования .


 9Тег 0029 удобен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки для каждой строки. 
  Примечание:  Тег  

  должен быть дочерним элементом элемента 
,

после любых элементов 
, 
, 
 и 
элементы. 
  Совет:  Чтобы определить различные свойства столбца в  
 ,

используйте тег 
внутри  Тег 
. 
 Поддержка браузера 

 и перед любыми 





 
  




 Элемент 








 
 Да 
 Да 
 Да 
 Да 
 Да 




 Атрибуты 


 Атрибут 
 Значение 
 Описание 


 диапазон 
  номер  
 Указывает количество столбцов, которые должна охватывать группа столбцов 



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

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

 Атрибуты событий 
 Тег  

  также поддерживает атрибуты событий в HTML. 

 Связанные страницы 
 Ссылка HTML DOM: Объект ColumnGroup 

 Настройки CSS по умолчанию 
 Большинство браузеров отображают элемент  

  со следующими значениями по умолчанию: 
 Пример 
 colgroup { 
   display: table-column-group; 
 } 
 Попробуйте сами » 
 ❮ Предыдущая

Полный справочник HTML

Следующий ❯ 

 ВЫБОР ЦВЕТА 



 Лучшие учебники 
Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
 Учебник по SQL 
 Учебник по Python 
 Учебник по W3.CSS 
 Учебник по Bootstrap 
 Учебник по PHP 
 Учебник по Java 
 Учебник по C++ 
 Учебник по jQuery 
 Лучшие ссылки 
Справочник по HTML 
 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3.

Тег HTML ячейка таблицы

Синтаксис

Отображение в браузере

Пример использования <td> в HTML коде

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

Атрибуты

Тег | htmlbook.

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

Описание

Синтаксис

Атрибуты

Закрывающий тег

HTML тэг td

Пример

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

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

Атрибуты

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

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

Дополнительные примеры

Пример

Пример

Пример

Пример

Пример

Пример

Пример

Пример

Пример

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

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

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

Top Examples Примеры HTML

HTML-тег colgroup

Пример

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

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

Атрибуты

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

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

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

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

Пример

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Top Examples
Примеры HTML