Основы HTML-таблиц

07-02-2019 15:56
Основы HTML-таблиц

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


Итак, как сделать таблицу в HTML? Когда и почему он используется? Давайте посмотрим на ответы на эти и другие вопросы.


Таблица HTML и области использования


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


Когда следует (не) использовать таблицы?


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


Хотя некоторые данные прекрасно выглядят в таблицах, для некоторых данных лучше не использовать таблицы. Например, вы никогда не должны использовать таблицы для макета сайта. Общее правило заключается в том, что веб-сайты должны быть доступны. Доступность, с другой стороны, напрямую связана со средствами чтения с экрана, которые читают таблицы сверху вниз и слева направо. С таблицами в HTML порядок представления сайта определяется визуальным выбором, а не параметрами доступности. В таких случаях средства чтения с экрана не будут работать так, как вы хотите.


элементы таблицы


Таблицы HTML обычно сопровождаются кратким описанием, объясняющим их назначение. Иногда может также использоваться более подробное определение. Строки таблицы можно сгруппировать в разделы головы, ног и тела. Для этого используются элементы thead, tfoot, tbody.


Если вы хотите предоставить больше структурной информации, вы также можете сгруппировать столбцы. Кроме того, вы можете объявить свойства столбца в начале определения таблицы, используя элементы COLGROUP и COL. Ячейки таблицы содержат информацию заголовка или данные. Таблицы могут иметь несколько строк и столбцов.


Первая строка таблицы является заголовком таблицы и не содержит данных. Вы можете выразить это с помощью элемента thead, который будет семантически заключать в себе первый тег tr. Когда вы используете thead, дочерний элемент tr таблицы не используется. Все строки должны быть в thead, tbody или tfoot.


Наряду с thead и tbody есть tfoot, который охватывает строки таблицы и показывает нижний колонтитул таблицы. Как и thead, это не строки данных, а содержащие вспомогательную информацию.


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


HTML-тег tfoot


tfoot определяет один или несколько элементов tr, содержащих краткое содержимое столбцов таблицы. Тег tfoot всегда должен располагаться под тегом table. В HTML5 tfoot можно разместить до или после тегов tbody и tr, но не перед тегами caption, colgroup и thead.


HTML-тег tbody


Тег tbody всегда должен располагаться под тегом таблицы и используется для определения тегов tr, составляющих тело таблицы. Хотя тег tbody всегда следует использовать после тега thead, он может стоять до или после тега tfoot.


Получите книгу HTML5 CSS3 прямо сейчас, чтобы узнать, как использовать HTML5.

IdeaSoft® | E-Ticaret paketleri ile hazırlanmıştır.