Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

HTML тег <table>

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

Описание

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

Основным тегом-контейнером для HTML-таблицы является тег <table>, который требует обязательного присутствия закрывающего тега. Любая таблица состоит из строк (определяются тегом <tr>), содержащих любое количество как заголовочных ячеек (определяются тегом th), так и ячеек с любыми данными (определяются тегом <td>). Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> - обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Примечание: по стандарту HTML5 все ранее используемые атрибуты таблицы, такие как align, bgcolor, border и т.д. больше не поддерживаются и их использование валидатор будет считать за ошибки в коде. Поэтому для стилизации таблиц нужно использовать CSS, с помощью которого можно заменить все атрибуты. Например, чтобы добавить рамку для таблицы используется свойство border, для изменения заднего фона - свойство background, а для выравнивания строчного содержимого в ячейках таблицы - свойства text-align и vertical-aling.

Атрибуты

Тег <table> поддерживает Глобальные атрибуты и События

Стиль по умолчанию

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Пример

<table>
  <tr>
    <th>Месяц</th>
    <th>Денег на счету</th>
  </tr>
  <tr>
    <td>Декабрь</td>
    <td>100р</td>
  </tr>
</table> 

Результат данного примера в окне браузера:

Пример использования тега <table>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru