Как использовать атрибуты элемента TABLE (HTML)

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

Атрибуты элемента HTML TABLE

В HTML5 элемент использует глобальные атрибуты и еще один атрибут, и он был изменен, чтобы иметь значение только 1 или пусто (т.е. border = «»). Если вы хотите изменить ширину границы, вы должны использовать CSS-свойство border-width.

См. Ниже, чтобы узнать о допустимых атрибутах таблицы HTML5.

Есть также несколько атрибутов, которые являются частью спецификации HTML 4.01, которая устарела в HTML5:

• —Используйте свойство отступа CSS для элементов TD и TH таблицы.
• —Используйте интервал границы свойства CSS в таблице.
• —Использование стилей CSS. Цвет рамки: черный; и стиль бордюра на столе.
• —Использование стилей CSS. Цвет рамки: черный; и стиль рамки на соответствующих элементах таблицы.
• — Вместо этого вы должны описать структуру таблицы в CAPTION или поместить всю таблицу в FIGURE и описать ее в FIGCAPTION. В качестве альтернативы вы можете упростить структуру таблицы, чтобы не требовалось никаких пояснений.
• —Используйте свойство ширины CSS.

И один атрибут, который устарел в HTML 4.01 и также устарел в HTML5.

• выровнять — используйте вместо этого свойство CSS margin.

Есть также несколько атрибутов, которые не являются частью какой-либо спецификации HTML. Используйте эти атрибуты, если вы знаете, что поддерживаемые вами браузеры могут обрабатывать их, и вам не нужен корректный HTML.

• Вместо этого используйте свойство CSS background-color.
• bordercolor — вместо этого используйте CSS-свойство border-color.
• bordercolorlight — вместо этого используйте CSS-свойство border-color.
• bordercolordark — вместо этого используйте CSS-свойство border-color.
• cols — альтернативы этому атрибуту нет.
• высота — вместо этого используйте высоту свойства CSS.
• Вместо этого используйте поле свойства CSS.
• Вместо этого используйте свойство CSS пробел.
• Вместо этого используйте свойство CSS вертикальное выравнивание.

Атрибуты элемента HTML5 TABLE

Как мы упоминали выше, кроме глобальных атрибутов есть только один атрибут, действительный для элемента HTML5 TABLE: border.

Атрибут border используется для определения границы вокруг всей таблицы и всех ячеек в ней. Был некоторый вопрос относительно того, будет ли он включен в спецификацию HTML5, но он остался, потому что он предоставил информацию о структуре таблицы, помимо просто стилевых последствий.

Чтобы добавить атрибут границы, установите значение 1, если есть граница, и пустое значение (или не указывайте атрибут), если его нет. Большинство браузеров также поддерживают 0 для отсутствия границы и любое другое целочисленное значение (2, 3, 30, 500 и т. Д.) Для объявления ширины границы в пикселях, но это устарело в HTML5. Вместо этого вы должны использовать свойства стиля рамки CSS для определения ширины рамки и других стилей.

Чтобы создать таблицу с рамкой, напишите:

Это таблица с рамкой
 

Здесь описываются атрибуты TABLE, которые действительны в HTML 4.01, но устарели в HTML5. Если вы все еще пишете документы HTML 4.01, вы можете использовать эти атрибуты, но у большинства из них есть альтернативы, которые сделают ваши страницы более защищенными для будущего, когда вы перейдете на HTML5.

Допустимые атрибуты HTML 4.01

Атрибут мы описали выше. Единственное отличие HTML 4.01 от HTML5 состоит в том, что вы можете указать любое целое число (0, 1, 2, 15, 20, 200 и т. Д.) Для определения ширины границы в пикселях.

Чтобы построить таблицу с рамкой 5 пикселей, напишите:

Эта таблица имеет границу 5 пикселей.

Атрибут определяет количество пространства между границами ячейки и содержимым ячейки. По умолчанию используется два пикселя. Установите для cellpadding значение 0, если вы не хотите оставлять пробел между содержимым и границами.

Чтобы установить заполнение ячейки на 20, напишите:

У этой таблицы 20 штук.


Границы ячейки будут разделены на 20 пикселей.

Посмотреть пример таблицы с cellpadding

Атрибут определяет количество пространства между ячейками таблицы и содержимым ячейки. Как и в случае с ячеистым планшетом, по умолчанию установлено значение в два пикселя, поэтому вы должны установить его в 0, если вы не хотите использовать интервал между ячейками.

Чтобы добавить интервал между ячейками в таблицу, напишите:

Эта таблица имеет ячейку 20.


Ячейки будут разделены на 20 пикселей.

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

Вот HTML-код для таблицы с левой границей:

Этот стол
буду иметь
только
левая сторона в рамке.

И еще один пример с нижней рамкой:

Эта таблица имеет рамку в нижней части.

Проверьте некоторые таблицы с фреймами

Атрибут похож на атрибут frame, только он влияет на границы вокруг ячеек таблицы. Вы можете установить правила для всех ячеек, между столбцами, между группами, такими как TBODY и TFOOT, или вообще без них.

Чтобы построить таблицу со строками только между строками, напишите:

Этот стол 4x4 имеет
строки не столбцы
изложил с
атрибут правил.

И еще один с линиями между столбцами:

Это
стол
где 
столбцы
находятся
выделены

Атрибут предоставляет информацию о таблице для программ чтения с экрана и других пользовательских агентов, которые могут иметь проблемы с чтением таблиц. Чтобы использовать итоговый атрибут, вы должны написать краткое описание таблицы и указать его в качестве значения атрибута. Сводка не будет отображаться на веб-странице в большинстве стандартных веб-браузеров.

Вот как можно написать простую таблицу со сводкой:

столбец 1 строка 1
столбец 2 строка 1


столбец 1 строка 2
столбец 2 строка 2

Атрибут определяет ширину таблицы в пикселях или в процентах от элемента контейнера. Если ширина не задана, таблица займет столько места, сколько нужно для отображения содержимого, с максимальной шириной, равной ширине родительского элемента.

Чтобы построить таблицу с определенной шириной в пикселях, напишите:

Эта таблица составляет 80% ширины контейнера, в котором она находится.

И чтобы построить таблицу с шириной, которая является процентом от родительского элемента, напишите:

Эта таблица составляет 80% ширины контейнера, в котором она находится.

Устаревший атрибут HTML 4.01 TABLE

Существует один атрибут элемента TABLE, который устарел в HTML 4.01 и устарел в HTML5: выровнять. Этот атрибут позволяет указать, где таблица должна располагаться на странице относительно текста рядом с ней. Этот атрибут устарел в HTML 4.01, и вы должны избегать его использования. Вместо этого вы должны использовать свойство CSS или margin-left: auto; и поле справа: авто; стили. Свойство float дает результат, который ближе к предоставленному атрибуту выравнивания, но может влиять на способ отображения остальной части содержимого страницы. Поля справа: авто; и поле слева: авто; это то, что W3C рекомендует в качестве альтернативы.

Вот устаревший пример использования атрибута align:

Эта таблица выровнена по правому краю


Текст обтекает его слева

И чтобы получить тот же эффект с действительным (не осуждаемым) HTML, напишите:

Эта таблица выровнена по правому краю


Текст обтекает его слева

Устаревшие атрибуты таблицы

Предыдущая информация описывает атрибуты элемента HTML, которые действительны в HTML 4.01, но устарели в HTML5.

Далее описываются атрибуты TABLE, которые недопустимы в любой текущей спецификации. Если вам не важно, проверяются ли ваши страницы, а пользователи используют браузер, который поддерживает эти элементы, вы можете использовать эти элементы. Но большинство из них либо не поддерживаются в современных браузерах, либо имеют альтернативы, более совместимые со стандартами.

Мы не рекомендуем использовать эти атрибуты на ваших таблицах HTML.

Атрибут является старым атрибутом, который был включен до того, как CSS получил широкую поддержку. Позволяет изменить цвет фона таблицы. Вы можете установить имя цвета или шестнадцатеричный код. Этот атрибут по-прежнему работает во многих браузерах, но для HTML, ориентированного на будущее, его не следует использовать, а вместо этого используйте CSS.

Лучшей альтернативой этому атрибуту является свойство style.

Чтобы изменить цвет фона таблицы, напишите:

Эта таблица имеет серый фон

Подобно атрибуту bgcolor, атрибут bordercolor позволяет изменить цвет атрибута. Этот атрибут поддерживается только Internet Explorer. Вместо этого вы должны использовать свойство стиля border-color.

Чтобы изменить цвет границы вашей таблицы, напишите:

Эта таблица имеет красную рамку.

Атрибуты bordercolorlight и bordercolordark были включены в Internet Explorer, чтобы позволить вам создать трехмерную рамку вокруг таблицы. Однако, начиная с IE8 и выше, это поддерживается только в стандартном режиме IE7 и в режиме Quirks. Microsoft заявляет, что эти свойства больше не поддерживаются.

В течение короткого времени был предложен атрибут cols в элементе TABLE, чтобы помочь браузерам узнать, сколько столбцов имеет таблица. Предполагалось, что это поможет ускорить рендеринг больших таблиц. Однако он был реализован только в Internet Explorer, а начиная с IE8 и выше он поддерживается только в стандартном режиме IE7 и в режиме Quirks.

Поскольку существует атрибут ширины (в HTML5 устаревший), многие люди предполагали, что атрибут атрибутов для таблиц также существует. Но поскольку таблицы соответствуют ширине их содержимого или определенной ширине в атрибуте CSS или width, высота не может быть ограничена. Поэтому вместо этого браузеры позволили атрибуту height определять минимальную высоту таблицы. Если бы таблица была выше этой высоты, она бы выглядела выше. Но вы должны использовать свойство

С помощью свойства CSS height вы можете ограничить высоту, если вы также используете свойство CSS для определения того, что происходит с лишним содержимым.

Чтобы установить минимальную высоту таблицы, напишите:

Эта таблица имеет высоту не менее 30 ems.

Два атрибута и дополнительное пространство вокруг левой / правой сторон (hspace) и верхней / нижней (vspace) таблицы. Вместо этого вы должны использовать свойство стиля.

Чтобы установить вертикальное пространство до 20 пикселей и горизонтальное пространство до 40 пикселей, напишите:

Эта таблица имеет пространство 20 пикселей и пространство 40 пикселей.

Атрибут является логическим атрибутом, который определяет, должно ли содержимое таблицы переноситься по краю родительского элемента или окна или принудительно выполнять горизонтальную прокрутку. Вместо этого вы должны определить характеристики обтекания каждой ячейки таблицы, используя свойство CSS.

Чтобы столбец с большим количеством текста не переносился, напишите:

Это столбец с тонной контента. Но даже если он шире контейнера, текст не следует переносить на следующую строку, а вместо этого заставлять окно браузера прокручивать по горизонтали, чтобы увидеть весь контент.

Наконец, атрибут определяет, как содержимое каждой ячейки должно выравниваться по вертикали внутри ячейки. Вместо этого недопустимого атрибута вы должны использовать свойство CSS в каждой ячейке, для которой вы хотите изменить выравнивание. Вы не заметите эффекты этого стиля, если содержимое ячейки не будет меньше доступного пространства, созданного другими, более крупными ячейками.

Чтобы заставить ячейку выравниваться по низу (а не по середине, как по умолчанию), напишите:

Содержание внизу.


Эта ячейка длиннее остальных, поэтому высота будет выше. Таким образом, вы увидите, что вертикально выровненная ячейка выровнена по дну.
Содержание в середине.