Тег — Справочник html
Общая информация
Тег <td> предназначен для создания ячеек, в которых размещается содержимое таблицы. Спецификацией позволительно оставлять ячейки пустыми. Но при кроссбраузерной вертске важно помнить, что старые браузеры не умеют корректно отображать пустые ячейки. Поправить эту проблему можно, добавив пробел « ». При необходимости тег может объединять и представлять сразу несколько ячеек в одной по горизонтали или по вертикали. Задаются эти свойства с помощью атрибутов.
Синтаксис
- <table>
- <tr>
- <td>Ячейка 1</td>
- <td>Ячейка 2</td>
- </tr>
- </table>
Атрибуты
- align — устанавливает позиционирование внутри ячейки по горизонтали
- background — задает фоновое изображение ячейки
- bgcolor — задает фоновый цвет
- bordercolor — задает цвет границы ячейки
- colspan — устанавливает количество ячеек, объединенных по горизонтали (в рамках строки)
- height — устанавливает высоту ячейки
- nowrap — запрет на перенос строк внутри ячейки
- rowspan — устанавливает количество ячеек, объединенных по вертикали (в рамках столбца таблицы)
- valign — позиционирование содержимого ячейчки по вертикали
- width — устанавливает ширину ячейки
Примеры
Пример 1.
html:
- <table border=»1″>
- <tr>
- <td width=»125″>Дата проведения</td>
- <td width=»70″>№ игры</td>
- <td>Хозяева</td>
- <td width=»115″>Счёт игры</td>
- <td>Гости</td>
- <td width=»105″>Где проходит</td>
- </tr>
- </table>
результат:
| Дата проведения | № игры | Хозяева | Счёт игры | Гости | Где проходит |
Атрибуты тега | htmlbook.ru
Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты, часть из которых совпадает с атрибутами тега <table>.
align
Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.
bgcolor
Устанавливает цвет фона ячейки. Используя этот атрибут совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.
colspan
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких столбцов. Например, как для таблицы, показанной на рис. 12.2.
Рис. 12.2. Пример таблицы, где используется горизонтальное объединение ячеек
В приведенной на рис. 12.2 таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью атрибута colspan.
height
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
rowspan
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 12.3.
Рис. 12.3. Пример таблицы, где применяется вертикальное объединение ячеек
В приведенной на рис. 12.3 таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью атрибута rowspan.
valign
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
width
Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.
seodon.ru | Теги HTML — Тег TD
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <TD> применяется для создания обычных ячеек таблицы, в отличие от заголовочных (тег <TH>). В ячейках содержатся все данные таблицы. Спецификацией HTML допускается оставлять ячейки пустыми, но некоторые старые браузеры не отображают фон таких ячеек, даже если поставить в них пробел. Поэтому выходом будет указать в ячейке неразрывный пробел-мнемонику ( ). Если же необходимо сделать ее совсем маленькой, то можно вставить прозрачный рисунок с размером в один пиксель.
Атрибуты
Личные атрибуты:
- align — Задает положение содержимого ячейки по горизонтали.
- background — Устанавливает Фоновое изображение для ячейки.
- bgcolor — Устанавливает фоновый цвет.
- bordercolor — Цвет границы (рамки) ячейки.
- colspan — Указывает количество ячеек объединенных в одну по горизонтали.
- height — Задает рекомендуемую высоту ячейки.
- nowrap — Запрещает переносить строки.
- rowspan — Указывает количество ячеек объединенных в одну по вертикали.
- valign — Задает положение содержимого ячеек по вертикали.
- width — Рекомендуемая ширина.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: таблицы.
Модель тега: может располагаться внутри элемента <TR>.
Может содержать: block-теги и/или inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: не обязателен.
Синтаксис
<table>
<tr>
<td>содержимое</td>
</tr>
</table>Пример HTML: применение тега TD
<!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</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" align="center" bgcolor="#FFD700">Модель</td>
<td colspan="2" align="center" bgcolor="gold">Двигатель</td>
</tr>
<tr><td>Мощность, л.c.</td><td>Объем, см<sup>3</sup></td></tr>
<tr><td>Lamborghini Murcielago</td><td>640</td><td>6496</td></tr>
<tr><td>Lamborghini Gallardo</td><td>500</td><td>4961</td></tr>
</table>
</body>
</html> Результат примера
Результат. Применение тега TD.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Тег | bookhtml.ru
Тег <td> — элемент языка html, используемый для создания обычной ячейки таблицы. Размещается внутри элемента <tr>, который в свою очередь прописывается внутри тега <table>.
Текст в элементе <td> по умолчанию выровнен по левому краю. Тег <td> нельзя использовать в элементе <thead>.
Пример написания:
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
Атрибуты тега <td>
abbr………………….Краткое описание содержимого ячейки.
align…………………Определяет выравнивание содержимого ячейки по горизонтали.
axis………………….Группирует ячейки связанные между собой похожей информацией.
background………..Задает фоновый рисунок в ячейке.
bgcolor………………Цвет фона ячейки.
bordercolor…………Цвет рамки.
char………………….Выравнивает содержимое ячейки по заданному символу.
charoff………………Смещает содержимое ячейки относительно заданного символа.
colspan………………Объединяет горизонтальные ячейки.
headers……………..Позволяет связать ячейки с заголовком.
height……………….Высота ячейки.
nowrap……………..Запрещает перенос строк.
rowspan…………….Объединяет вертикальные ячейки.
scope………………..Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign………………..Выравнивание содержимого ячейки по вертикали.
width………………..Ширина ячейки.
Закрывающий тег не обязателен.
Язык HTML — изучай вместе с нами.
Тег | HTML справочник
HTML тегиЗначение и применение
Основное содержимое таблицы заключается в тег <table>..</table>.
Каждая строка таблицы помещается в элемент <tr>…</tr>.
Ячейка заголовка таблицы помещается в элемент <th>…</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).
Каждая ячейка данных таблицы помещается в элемент <td>…</td>.
Наименование таблицы, если оно требуется размещается внутри элемента <caption>…</caption> (необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | right left center justify char | Не поддерживается в HTML5. Выравнивает содержимое в строке таблицы. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Не поддерживается в HTML5. Задает цвет фона для строки таблицы. |
| char | character | Не поддерживается в HTML5. Выравнивает содержимое в строке таблицы по заданному символу. Атрибут char может быть использован только если атрибут align = «char». |
| charoff | number | Не поддерживается в HTML5. Атрибут, который позволяет произвести выравнивание с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char». |
| valign | top middle bottom baseline | Не поддерживается в HTML5. Вертикальная выравнивает содержимое в строке таблицы |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <tr></title> </head> <body> <table border = "1"> <!--начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!-- наименование таблицы--> <tr> <!--описываем первую строку--> <th>Ячейка заголовка 1</th> <th>Ячейка заголовка 2</th> <th>Ячейка заголовка 3</th> </tr> <tr> <!--описываем вторую строку--> <td>Ячейка данных 1 Строка 2</td> <td>Ячейка данных 2 Строка 2</td> <td>Ячейка данных 3 Строка 2</td> </tr> <tr> <!-- описываем третью строку--> <td>Ячейка данных 1 Строка 3</td> <td>Ячейка данных 2 Строка 3</td> <td>Ячейка данных 3 Строка 3</td> </tr> </table> <!-- конец таблицы--> </body> </html>
К данной таблице для наглядности мы добавили атрибут border (граница) со значением «1», которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.
Результат нашего примера:
Пример таблицы, составленной на HTML.Объединение столбцов
Объединение столбцов в элементах <td> или <th> допускается с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).
<!DOCTYPE html> <html> <head> <title>Пример объединения столбцов в таблице</title> </head> <body> <table border = "1"> <!--начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!--наименование таблицы--> <tr> <!--описываем первую строку--> <th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки--> <th>Ячейка заголовка 2</th> </tr> <tr> <!--описываем вторую строку--> <td>Ячейка данных 1 Строка 2</td> <td>Ячейка данных 2 Строка 2</td> <td>Ячейка данных 3 Строка 2</td> </tr> <tr> <!--описываем третью строку--> <td>Ячейка данных 1 Строка 3</td> <td>Ячейка данных 2 Строка 3</td> <td>Ячейка данных 3 Строка 3</td> </tr> </table> <!--конец таблицы--> </body> </html>
Результат нашего примера:
Пример таблицы с объединёнными столбцами на HTML.Объединение строк
Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).
<!DOCTYPE html> <html> <head> <title>Пример объединения строк в таблице</title> </head> <body> <table border = "1"> <!-- начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!--наименование таблицы--> <tr> <!--описываем первую строку--> <th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки--> <th>Ячейка заголовка 2</th> </tr> <tr><!--описываем вторую строку--> <td rowspan = "2">Ячейка данных 1 Строка 2</td> <td>Ячейка данных 2 Строка 2</td> <td>Ячейка данных 2 Строка 3</td> </tr> <tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) --> <td>Ячейка данных 2 Строка 3</td> <td>Ячейка данных 3 Строка 3</td> </tr> </table> <!--конец таблицы--> </body> </html>
Результат нашего примера:
Пример таблицы с объединёнными столбцами и строками на HTML.Отличия HTML 4.01 от HTML 5
В HTML 5 прекращена поддержка всех атрибутов тега.Значение CSS по умолчанию
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиНеобязательные теги HTML5-разметки
В спецификации HTML5 некоторые правила разметки были ослаблены. В частности, использование элементов <html>, <head> и <body> уже не является обязательным для разметки HTML5. Тем не менее браузер все равно считает, что они существуют, в чем можно убедиться, просмотрев разметку веб-страницы в Mоzilla Firebug или в Google Chrome Inspector.
Эти элементы всегда «подразумеваются», но если они будут использоваться в таблице CSS-стилей или в JavaScript-сценариях, то их надо прописывать в явном виде.
Также разрешается не использовать закрывающую обратную косую черту в элементах без содержимого, их список можно увидеть в нижеприведенной таблице.
1. Элемент <html>
Начальный тег <html> может быть опущен, если сразу за тегом не идет комментарий:
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>Закрывающий тег </html> также может быть опущен, если перед ним нет комментария.
2. Элемент <head>
Начальный тег <head> может быть опущен, если элемент <head> пуст, или если сразу после него идет другой HTML-элемент.
Закрывающий тег </head> может быть опущен, если он не следует сразу за пробелом или за комментарием.
<!DOCTYPE HTML>
<title>Hello</title>
<body>
<p>Welcome to this example.</p>
</body>3. Элемент <body>
Начальный тег <body> может быть опущен, если элемент пуст, или если первое, что внутри элемента не является пробелом или комментарием, за исключением случаев, когда первое, что идет за тегом <body> являются элементы <meta>, <link>, <script> или <style>.
Закрывающий тег </body> может быть опущен, если перед ним нет комментария.
<!DOCTYPE HTML>
<title>Hello</title>
<p>Welcome to this example.</p>4. Элемент <li>
Закрывающий тег </li> может быть опущен, если элемент <li> сразу следует за другим элементом <li>, или если больше нет содержания в элементе, в который вложен тег.
5. Элементы <dt> и <dd>
Закрывающий тег </dt> может быть опущен, если элемент <dt> следует сразу за еще одним элементом <dt> или <dd>.
Закрывающий тег </dd> может быть опущен, если элемент <dd> следует сразу за еще одним элементом <dd> или <dt>, или если больше нет содержания в элементе, в который вложен тег.
6. Элемент <p>
Закрывающий тег </p> может быть опущен, если <p> следует сразу за любым из перечисленных элементов:
address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h2, h3, h4, h5, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, ul, или если больше нет содержания в элементе, в который вложен тег <p>, или родительским элементом не является тег <a>.
7. Элементы <rt> и <rp>
Закрывающий тег </rt> может быть опущен, если элемент <rt> следует сразу за еще одним элементом <rt> или <rp>, или если больше нет содержания в элементе, в который вложен тег.
Закрывающий тег </rp> может быть опущен, если элемент <rp> следует сразу за еще одним <rp> или <rt> элементом, или если больше нет содержания в элементе, в который вложен тег.
8. Элементы <optgroup> и <option>
Закрывающий тег </optgroup> может быть опущен, если элемент <optgroup> следует сразу за еще одним элементом <optgroup>, или если нет больше содержания в родительском элементе.
Закрывающий тег </option> может быть опущен, если элемент <option> следует сразу за еще одним элементом <option>, или если он идет сразу после <optgroup>, или если нет больше содержания в родительском элементе.
9. Элемент <colgroup>
Начальный тег элемента <colgroup> может быть опущен, за элементом <colgroup> сразу идет элемент <col>, и если перед элементом непосредственно не предшествует другой элемент <colgroup>, закрывающий тег которого был опущен. (Он не может быть опущен, если элемент пустой.)
10. Элементы <thead>, <tbody>, <tfoot>, <td>, <tr>
Закрывающий тег </thead> может быть опущен, если элемент <thead> следует сразу за <tbody> или <tfoot>.
Открывающий тег <tbody> может быть опущен, если за ним сразу идет элемент <tr>, и если перед элементом непосредственно не предшествует другой <tbody>, <thead>, или <tfoot>, закрывающий тег которого был опущен. (Он не может быть опущен, если элемент является пустым.)
Закрывающий тег </tbody> может быть опущен, если после элемента <tbody> сразу следует <tbody> или <tfoot>, или если больше нет содержания в родительском элементе.
Закрывающий тег </tfoot> может быть опущен, если элемент <tfoot> следует сразу же за <tbody>, или если больше нет содержания в родительском элементе.
Закрывающий тег </tr> может быть опущен, если элемент <tr> следует сразу же за еще одним элементом <tr>, или если больше нет содержания в родительском элементе.
Закрывающий тег </td> может быть опущен, если элемент <td> следует сразу же за еще одним элементом <td> или <th>, или, если нет больше содержания в родительском элементе.
Закрывающий тег </th> может быть опущен, если элемент <th> следует сразу же за <td> или <th>, или, если больше нет содержания в родительском элементе.
<table>
<caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
<colgroup><col><col><col>
<thead>
<tr><th>Function<th>Control Unit<th>Central Station
<tbody>
<tr><td>Headlight<td>✔<td>✔
<tr><td>Interior Lights<td>✔<td>✔
<tr><td>Electric locomotive operating sounds<td>✔<td>✔
<tr><td>Engineer's cab lighting<td><td>✔
<tr><td>Station Announcements - Swiss<td><td>✔
</table>| Тег | Открывающий тег | Закрывающий тег | Пустой тег |
|---|---|---|---|
| area | Запрещен | Разрешен | |
| base | Запрещен | Разрешен | |
| body | Необязательный | Необязательный | |
| br | Запрещен | Разрешен | |
| col | Запрещен | Разрешен | |
| colgroup | Необязательный | ||
| dd | Необязательный | ||
| dt | Необязательный | ||
| head | Необязательный | Необязательный | |
| hr | Запрещен | Разрешен | |
| html | Необязательный | Необязательный | |
| img | Запрещен | Разрешен | |
| input | Запрещен | Разрешен | |
| li | Необязательный | ||
| link | Запрещен | Разрешен | |
| meta | Запрещен | Разрешен | |
| option | Необязательный | ||
| p | Необязательный | ||
| param | Запрещен | Разрешен | |
| tbody | Необязательный | Необязательный | |
| td | Необязательный | ||
| tfoot | Необязательный | ||
| th | Необязательный | ||
| thead | Необязательный | ||
| tr | Необязательный |