Что такое td и tr в html
Перейти к содержимому

Что такое td и tr в html

  • автор:

Что такое td и tr в html

align Определяет выравнивание содержимого ячеек по горизонтали. bgcolor Цвет фона ячеек. bordercolor Цвет рамки. char Выравнивание содержимого ячеек относительно заданного символа. charoff Смещение содержимого ячеек относительно указанного символа. valign Выравнивание содержимого ячеек по вертикали. Устаревшие атрибуты

Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML, но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться последними версиями браузеров.

Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.

Пример

TR

Книга Lorem ipsum dolor sit amet.

Спецификация

Спецификация Статус
HTML Living Standard Живой стандарт
HTML 4.01 Specification Заменённая рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3 12 1 4 1 1
4.4 4 12.1 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Организация данных с помощью таблиц
  • Подсветка строк и колонок таблицы
  • Таблицы
  • Таблицы
  • Таблицы в HTML

Что такое td и tr в html

align Определяет выравнивание содержимого ячеек по горизонтали. bgcolor Цвет фона ячеек. bordercolor Цвет рамки. char Выравнивание содержимого ячеек относительно заданного символа. charoff Смещение содержимого ячеек относительно указанного символа. valign Выравнивание содержимого ячеек по вертикали.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML 4.01 IE Cr Op Sa Fx

    Тег TR   
Книга Lorem ipsum dolor sit amet.

Таблицы (table, tr, td, th) в HTML

В статье будут рассмотрены несколько вопросов: как сделать HTML таблицу, как добавить строку и ячейку в таблицу, как объединить строки или ячейки в таблице.

 
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Код из этого примера отобразит на странице следующую стаблицу:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Довольно часто для задания первых строчек таблицы используется не

.

, а

.

. В таком случае весь текст в ячейках первой строчки таблицы будет выделен жирным и выравнен по центру.
Разберём атрибуты, которые указаны в примере таблицы:

cellspacing

cellspacing=»1″ — этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

cellpadding

cellpadding=»1″ — значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

border

border=»1″ — устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Рамки таблицы и ячеек можно скрыть совсем, если задать стиль style=»border-collapse: collapse;». Читайте подробнее об этом в курсе по CSS.

Высота и ширина таблицы

У тега

есть атрибуты, которые задают ширину (width) и высоту (height) таблицы. Значения этих атрибутов задают ширину и высоту в пикселях.

Попробуем задать таблице из примеры ширину в 300 пикселей, с помощью указания атрибута width=»300″

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Значение width можно задать в процентах от ширины родительского элемента, в котором находится таблица. К примеру, width=»50%»

Если задать height=»300″, то получится такой результат:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Тег table

Тег table создает таблицу. Используется совместно с тегами tr , td , th .

Тег tr создает ряд таблицы, а теги td и th создают ячейки этой таблицы. Разница между td и th : первый — это обычная ячейка, а второй — это ячейка-заголовок.

Атрибуты

Атрибут Описание
cellspacing Задает расстояние между ячейками.
Устарел, вместо него следует использовать CSS свойство border-spacing .
cellpadding Задает расстояние между текстом и границей ячейки.
Устарел, вместо него следует использовать CSS свойство padding .
border Задает границу ячеек и таблицы.
Устарел, вместо него следует использовать CSS свойство border .

Пример

Давайте создадим таблицу с ячейками th и td :

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

table, td, th < border: 1px solid black; >

Смотрите также

  • теги thead , tbody и tfoot ,
    которые группируют ряды таблицы
  • тег caption ,
    который задает заголовок всей таблицы
  • свойство vertical-align ,
    которое задает выравнивание текста по вертикали
  • атрибуты rowspan и colspan ,
    которые объединяют ряды и столбцы таблицы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *