Простая 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;
}