HTML <td> тег

  • Предыдущая страница <tbody>
  • Следующая страница <template>

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

<td> Этикетка определяет стандартные ячейки данных в HTML-таблице.

У HTML-таблицы есть два типа ячеек:

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

По умолчанию:<td> Текст в элементе обычный и выровнен слева.

Текст в элементе <th> по умолчанию жирный и居中对齐.

См. также:

Урок HTML:HTML таблица

Руководство по HTML DOM:Объект TableData

Урок CSS:Настройка стиля таблицы

Пример

Пример 1

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

<table>
  <tr>
    <td>Ячейка A</td>
    <td>Ячейка B</td>
  </tr>
  <tr>
    <td>Ячейка C</td>
    <td>Ячейка D</td>
  </tr>
</table>

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

Пример 2

Как выровнять: <td> содержимое (используя CSS):

<table style="width:100%">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

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

Пример 3

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

<table>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Январь</td>
    <td style="background-color:#00FF00">3400 юаней</td>
  </tr>
 </table>

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

Пример 4

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

<table>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td style="height:100px">Январь</td>
    <td style="height:100px">3400 юаней</td>
  </tr>
</table>

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

Пример 5

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

<table>
  <tr>
    <th>Поэзия</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Солнце прощается с Белым императором, между цветными облаками, тысяча миль до Яньчэня за один день. Крики обезьян на обоих берегах не могут остановить, легкая лодка уже прошла через тысяча гор.</td>
  </tr>
</table>

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

Пример 6

Как выровнять по вертикали: <td> содержимое (используя CSS):

<table style="width:50%;">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">Январь</td>
    <td style="vertical-align:bottom">3400 юаней</td>
  </tr>
</table>

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

Пример 7

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

<table style="width:100%">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td style="width:70%">Январь</td>
    <td style="width:30%">3400 юаней</td>
  </tr>
</table>

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

Пример 8

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

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

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

Пример 9

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

<table>
  <caption>Месячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>3400 юаней</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>4500 юаней</td>
  </tr>
</table>

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

Пример 10

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

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

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

Атрибут

Атрибут Значение Описание
colspan Число Определяет количество столбцов, на которые должна пересекаться ячейка.
headers header_id Определяет одну или несколько ячеек заголовка, связанных с ячейкой.
rowspan Число Устанавливает количество строк, на которые должна пересекаться ячейка.

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

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

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

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

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

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <tbody>
  • Следующая страница <template>