Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <td>



Пример

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

<table>
  <tr>
    <td>Ячейка A</td>
    <td>Ячейка B</td>
  </tr>
  <tr>
    <td>Ячейка C</td>
    <td>Ячейка D</td>
  </tr>
</table>
Попробуйте сами »


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

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

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

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

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

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


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

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

Атрибуты <td>

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

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

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


События атрибутов <td>

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


Еще примеры <td>

Пример

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

<table style="float:right">
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table style="background-color:#00FF00">
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td style="height:100px">Январь</td>
    <td style="height:100px">$100</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table>
  <tr>
    <th>Стих</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Никогда не приувеличивайте, сверх того, что необходимо, количество сущностей, необходимых для объяснения чего-либо</td>
  </tr>
</table>
Попробуйте сами »
Пример

Как выровнять содержимое по вертикали внутри <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">$100</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table style="width:400px">
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table>
  <tr>
    <th>Имя</th>
    <th>Email</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Андрей Щипунов</td>
    <td>and-shhipunov@example.com</td>
    <td>123-45-678</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table>
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »
Пример

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

<table>
  <tr>
    <th>Имя</th>
    <th>Email</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Андрей Щипунов</td>
    <td>and-shhipunov@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>
Попробуйте сами »

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

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

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

CSS Учебник: Стиль таблиц


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

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

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