Атрибуты таблиц HTML дают вам гораздо больший контроль над таблицами HTML. Для таблиц доступно множество атрибутов, которые делают их более интересными и изменяют внешний вид вашей страницы.
Атрибуты элемента HTML TABLE
В HTML5 элемент использует глобальные атрибуты и еще один атрибут, и он был изменен, чтобы иметь только значение 1 или пустое (то есть border = ""). Если вы хотите изменить ширину границы, вы должны использовать ширину границы CSS свойство.
См. Ниже, чтобы узнать о допустимых атрибутах таблицы HTML5.
Есть также несколько атрибутов, которые являются частью спецификации HTML 4.01, которая устарела в HTML5:
- —Используйте свойство заполнения CSS для элементов TD и TH таблицы.
- —Используйте свойство CSS border-spacing в таблице.
- —Используйте стили CSS border-color: black; и стиль границы на столе.
- —Используйте стили CSS border-color: black; и стиль границы на соответствующих элементах таблицы.
- —Вместо этого вы должны описать структуру таблицы в CAPTION или поместить всю таблицу в FIGURE и описать ее в FIGCAPTION. В качестве альтернативы вы можете упростить структуру таблицы, чтобы не требовать пояснений.
- —Используйте свойство ширины CSS.
И еще один атрибут, который устарел в HTML 4.01 и также устарел в HTML5.
- align - используйте вместо этого свойство CSS margin.
Есть также несколько атрибутов, которые не являются частью какой-либо спецификации HTML. Используйте эти атрибуты, если вы знаете, что поддерживаемые вами браузеры могут их обрабатывать, и вам наплевать на действительный HTML.
- - Вместо этого используйте свойство CSS background-color.
- bordercolor - вместо этого используйте свойство CSS border-color.
- bordercolorlight - вместо этого используйте свойство CSS border-color.
- bordercolordark - вместо этого используйте свойство CSS border-color.
- cols - альтернативы этому атрибуту нет.
- height - вместо этого используйте свойство CSS height.
- —Используйте вместо этого поле свойства CSS.
- - Вместо этого используйте свойство CSS white-space.
- - Вместо этого используйте свойство CSS vertical-align.
Атрибуты элемента HTML5 TABLE
Как мы упоминали выше, есть только один атрибут, помимо глобальных, который действителен для элемента HTML5 TABLE: border.
Атрибут border используется для определения границы вокруг всей таблицы и всех ячеек в ней. Был некоторый вопрос относительно того, будет ли он включен в спецификацию HTML5, но он остался, потому что он предоставил информацию о структуре таблицы, помимо простого влияния на стиль.
Чтобы добавить атрибут границы, вы устанавливаете значение 1, если граница есть, и пустое (или не указывайте атрибут), если нет. Большинство браузеров также поддерживают 0 для отсутствия границы и любые другие целочисленные значения (2, 3, 30, 500 и т. Д.) Для объявления ширины границы в пикселях, но в HTML5 это устарело. Вместо этого вы должны использовать свойства стиля границы CSS для определения ширины границы и других стилей.
Чтобы создать таблицу с рамкой, напишите:
border = "1">
Это таблица с рамкой
Здесь описаны атрибуты TABLE, которые действительны в HTML 4.01, но устарели в HTML5. Если вы все еще пишете документы HTML 4.01, вы можете использовать эти атрибуты, но у большинства из них есть альтернативы, которые сделают ваши страницы более ориентированными на будущее, когда вы действительно перейдете на HTML5.
Valid HTML 4.01 Атрибуты
Атрибут, который мы описали выше. Единственное отличие HTML 4.01 от HTML5 заключается в том, что вы можете указать любое целое число (0, 1, 2, 15, 20, 200 и т. Д.) Для определения ширины границы в пикселях.
Чтобы построить таблицу с рамкой 5 пикселей, напишите:
border = "5">
Эта таблица имеет границу 5 пикселей.
Атрибут определяет расстояние между границами ячеек и содержимым ячейки. По умолчанию - два пикселя. Установите для ячейки значение 0, если вы не хотите, чтобы между содержимым и границами не было пробелов.
Чтобы установить заполнение ячейки равным 20, напишите:
cellpadding = "20">
В этой таблице есть 20 ячеек.
Границы ячеек будут разделены 20 пикселями.
Посмотрите пример таблицы с заполнением ячеек.
Атрибут определяет количество пространства между ячейками таблицы и содержимым ячейки. Как и в случае с ячейками, по умолчанию установлено два пикселя, поэтому вы должны установить его в 0, если вы не хотите использовать интервал между ячейками.
Чтобы добавить интервал между ячейками в таблице, напишите:
cellspacing = "20">
В этой таблице интервал между ячейками равен 20.
Ячейки будут разделены 20 пикселями.
Атрибут определяет, какие части границы вокруг таблицы будут видимы. Вы можете обрамлять свой стол со всех четырех сторон, с любой одной стороны, сверху и снизу, слева и справа или без него.
Вот HTML-код таблицы только с левой границей:
frame = "lhs">
Этот стол
будет
только
левая сторона обрамлена.
И еще пример с нижней рамкой:
frame = "ниже">
У этого стола есть рамка внизу.
Ознакомьтесь с некоторыми таблицами с рамками.
Атрибут аналогичен атрибуту рамки, только он влияет на границы вокруг ячеек таблицы. Вы можете установить правила для всех ячеек, между столбцами, между группами, такими как TBODY и TFOOT, или ни одной.
Чтобы построить таблицу со строками только между строками, напишите:
rules = "rows">
Этот стол 4x4 имеет
строки, а не столбцы
обозначен
атрибут rules.
И еще один со строками между столбцами:
rules = "cols">
Это
стол
где
столбцы
находятся
выделил
В атрибут предоставляет информацию о таблице для программ чтения с экрана и других пользовательских агентов, у которых могут возникнуть проблемы с чтением таблиц. Чтобы использовать сводный атрибут, вы составляете краткое описание таблицы и указываете его как значение атрибута. Сводка не отображается на веб-странице в большинстве стандартных веб-браузеров.
Вот как написать простую таблицу с резюме:
summary = "Это образец таблицы, содержащей информацию о заполнителях. Цель этой таблицы - продемонстрировать сводку. ">
столбец 1 строка 1.
столбец 2 ряд 1.
столбец 1 ряд 2.
столбец 2 ряд 2.
Атрибут определяет ширину таблицы либо в пикселях, либо в процентах от элемента контейнера. Если ширина не задана, таблица будет занимать ровно столько места, сколько необходимо для отображения содержимого, с максимальной шириной, равной ширине родительского элемента.
Чтобы построить таблицу с определенной шириной в пикселях, напишите:
width = "300">
Эта таблица составляет 80% ширины контейнера, в котором она находится.
А чтобы построить таблицу с шириной в процентах от родительского элемента, напишите:
width = "80%">
Эта таблица составляет 80% ширины контейнера, в котором она находится.
Устаревший атрибут HTML 4.01 TABLE
Есть один атрибут элемента TABLE, который устарел в HTML 4.01 и устарел в HTML5: align. Этот атрибут позволяет вам установить, где должна располагаться таблица на странице относительно текста рядом с ней. Этот атрибут объявлен устаревшим в HTML 4.01, и вам следует избегать его использования. Вместо этого вы должны использовать свойство CSS или margin-left: auto; и правое поле: авто; стили. Свойство float дает результат, который ближе к тому, что предоставлен атрибутом align, но может повлиять на способ отображения остальной части содержимого страницы. Правое поле: авто; и маржа слева: авто; W3C рекомендует в качестве альтернативы.
Вот устаревший пример с использованием атрибута align:
align = "right">
Эта таблица выровнена по правому краю.
Текст обтекает его слева.
И чтобы получить тот же эффект с действующим (не устаревшим) HTML, напишите:
style = "float: right;">
Эта таблица выровнена по правому краю.
Текст обтекает его слева.
Устаревшие атрибуты TABLE
Предыдущая информация описывает атрибуты элемента HTML, которые действительны в HTML 4.01, но устарели в HTML5.
Ниже описаны атрибуты TABLE, которые не допустимы ни в одной из текущих спецификаций. Если вас не волнует, проверяются ли ваши страницы, и ваши пользователи используют браузер, который поддерживает эти элементы, вы можете использовать эти элементы. Но большинство из них либо не поддерживаются в современных браузерах, либо имеют альтернативы, более соответствующие стандартам.
Мы не рекомендуем использовать эти атрибуты в ваших HTML-таблицах.
Атрибут - это старый атрибут, который был включен до того, как CSS получил широкую поддержку. Он позволяет изменить цвет фона таблицы. Вы можете установить название цвета или шестнадцатеричный код. Этот атрибут по-прежнему работает во многих браузерах, но для будущего HTML вы не должны его использовать, а вместо этого используйте CSS.
Лучшей альтернативой этому атрибуту является свойство стиля.
Чтобы изменить цвет фона таблицы, напишите:
style = "background-color: #ccc;">
Эта таблица имеет серый фон.
Подобно атрибуту bgcolor, атрибут bordercolor позволяет изменять цвет атрибута. Этот атрибут поддерживается только Internet Explorer. Вместо этого вы должны использовать свойство стиля border-color.
Чтобы изменить цвет границы таблицы, напишите:
style = "цвет границы: красный;">
Эта таблица имеет красную рамку.
Атрибуты bordercolorlight и bordercolordark были включены в Internet Explorer, чтобы вы могли создать трехмерную рамку вокруг вашего стола. Однако, начиная с IE8, это поддерживается только в стандартном режиме IE7 и Режим причуд. Microsoft заявляет, что эти свойства больше не поддерживаются.
На короткое время был предложен атрибут cols в элементе TABLE, чтобы помочь браузерам узнать, сколько столбцов в таблице. Предполагалось, что это поможет ускорить рендеринг больших таблиц. Однако это было реализовано только в Internet Explorer, а начиная с IE8 и выше, это поддерживается только в IE7 Standards Mode и Quirks Mode.
Поскольку существует атрибут ширины (устаревший в HTML5), многие люди предполагали, что атрибут высоты существует и для таблиц. Но поскольку таблицы соответствуют ширине своего содержимого или ширине, определенной в атрибуте CSS или width, высоту нельзя ограничить. Поэтому вместо этого браузеры разрешили атрибуту высоты определять минимальную высоту таблицы. Если бы стол был выше этой высоты, он бы казался выше. Но вы должны использовать собственность.
С помощью свойства CSS height вы можете ограничить высоту, если вы также используете свойство CSS, чтобы определить, что происходит с любым избыточным содержимым.
Чтобы установить минимальную высоту стола, напишите:
style = "height: 30em;">
Высота этого стола не менее 30 ems.
Два атрибута и добавленное пространство вокруг левой / правой сторон (hspace) и сверху / снизу (vspace) таблицы. Вместо этого вам следует использовать свойство стиля.
Чтобы установить вертикальное пространство на 20 пикселей и горизонтальное на 40 пикселей, напишите:
style = "margin: 20px 40px;"
Эта таблица имеет vspace из 20 пикселей и hspace из 40 пикселей.
Атрибут является логическим атрибутом, который определяет, должно ли содержимое таблицы переноситься по краю родительского элемента или окна или вызывать горизонтальную прокрутку. Вместо этого вы должны определить характеристики упаковки каждой ячейки таблицы с помощью свойства CSS.
Чтобы столбец с большим количеством текста не переносился, напишите:
style = "white-space: nowrap;"> Это столбец с большим количеством содержимого. Но даже если он шире контейнера, текст не должен переноситься на следующую строку, а вместо этого заставлять окно браузера прокручиваться по горизонтали, чтобы увидеть все содержимое.
Наконец, атрибут определяет, как содержимое каждой ячейки должно быть выровнено по вертикали внутри ячейки. Вместо этого недопустимого атрибута вы должны использовать свойство CSS для каждой ячейки, выравнивание которой вы хотите изменить. Вы не заметите эффекта этого стиля, если содержимое ячейки не будет меньше доступного пространства, созданного другими, более крупными ячейками.
Чтобы выровнять ячейку по нижнему краю (а не по середине, как по умолчанию), напишите:
Эта ячейка длиннее остальных, поэтому высота будет выше. Итак, вы увидите, что выровненная по вертикали ячейка выровнена по низу.
style = "vertical-align: bottom;"> Содержимое внизу.
Содержимое посередине.