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