HTML (HyperText Markup Language) – «язык гипертекстовой разметки». Он является базовым «строительным блоком» интернет-проектов и сервисов. HTML дает возможность определять содержание и структуру веб-контента. Другие интернет-технологии обычно используются в качестве дополнительных инструментов для описания функциональности/поведения (JavaScript) и внешнего вида (CSS) онлайн-проекта.
HTML выступает в качестве стандартизированного языка гипертекста. Он используется в браузерах для отображения веб-страниц, а также онлайн-приложений. Интернет-обозреватели получают HTML-документы с серверной стороны при помощи протоколов HTTP/HTTPS или открывают их с локального диска. После этого осуществляют интерпретацию исходного кода в готовый к отображению интерфейс на мониторе компьютера/ноутбука.
При помощи HTML можно создавать на сайтах различные объекты. Примером могут послужить таблицы. Далее предстоит познакомиться с их формированием на веб-портале поближе. Необходимо выяснить, что собой представляет HTML-таблица, а также какие теги отвечают за работу с соответствующим объектам. Эта информация пригодится преимущественно тем, кто уже знает азы программирования на HTML, но и начинающим разработчикам она пригодится.
Таблица – это…
Таблица – это способ структурирования информации за счет ее распределения по строкам и столбцам. HTML-таблица ничем не отличается от «обычной» таблицы, которая может использоваться в повседневной жизни, работе или учебе.
Это сетка из ячеек, которые формируют строки и столбцы. Отличается такой HTML-элемент лишь средствами создания, виртуализации и редактирования. В случае с «классической» электронной таблицей предстоит использовать Numbers или MS Excel. Для формирования HTML-таблицы предстоит задействовать CSS и HTML-язык.
Изучаемый элемент поможет упорядочить и вывести на экран данные при помощи строк или столбцов. Он использовался для верстки сайтов. Сейчас такой подход к разработке веб-контента утратил актуальность из-за отсутствия адаптивности сервисов и структурной гибкости. Современные технологии не предусматривают верстку веб-порталов и страниц при помощи таблиц.
В табличных ячейках могут содержаться самые разные HTML-элементы:
- изображения;
- текстовые данные;
- компоненты форм;
- другие таблицы;
- списки;
- заголовки.
Каждая таблица поддерживает возможность добавления связанного с ней заголовка. Он может располагаться перед соответствующим элементом или после него. Рассматриваемый компонент поддерживает различные атрибуты: как глобальные, так и собственные.
Области применения
HTML-tables могут быть использованы абсолютно на любом веб-сайте. Этот элемент верстки встречается там, где требуется в понятной пользователям форме структурировать и отобразить те или иные данные. Примеры подобной информации:
- расписание хождения транспорта/вылетов самолетов/организации занятий;
- сравнение товаров и услуг;
- курсы валют;
- сведения о параметрах или комплектации чего-либо.
Код таблицы в HTML в каждом отдельном случае будет меняться. Единого шаблона, который подошел бы сразу для всех соответствующих элементов на страницах, нет. Вместо этого можно изучить базовые теги, отвечающие за определенные команды и операции над HTML-таблицами. Эта информация поможет научиться формировать рассматриваемый элемент даже со сложной структурой. Главное – заранее продумать ее.
Семантические теги
В процессе верстки веб-страниц приходится изучать теги, благодаря которым получится задать таблицу. Для этого в HTML поддерживаются такие семантические теги как:
- tr;
- tfoot;
- table;
- thread;
- tbody;
- td;
- th.
Этого будет достаточно для того, чтобы создать на сайте HTML-table даже со сложной структурой. Каждый представленный тег будет изучен более подробно. Это необходимо для общего понимания принципов формирования таблиц на веб-страницах.
Table
Тег table – это своеобразный контейнер. В нем будут располагаться все остальные табличные компоненты. Именно с этого тега осуществляется дальнейшая верстка. Им же этот процесс и заканчивается. Если в исходном коде онлайн-портала встречается table, значит далее будет создан рассматриваемый объект.
Table – это парный тег. Внутри него размещаются все строки и ячейки. Если не указывать закрывающий тег, таблица нарисована на сайте не будет.
Tr
Tr – очередной парный тег. Он используется для формирования строк, без которых не обходится ни одна HTML-table. Tr в программном коде пишется столько раз, сколько строк должно появиться в табличном объекте в конечном итоге.
Tr – обозначение, которое произошло от «table row». С английского переводится как «ряд таблицы».
Td
Изучая примеры таблиц HTML, можно столкнуться с тегом td. Ранее рассмотренные теги использовались для формирования табличной структуры. С заполнением изучаемого компонента сайта информацией они никак не связаны.
За соответствующую операцию будут отвечать ячейки. Td – тег, используемый для их появления на веб-портале. Он может быть написан только в пределах tr. Повторяется td столько раз, сколько нужно разместить ячеек в HTML-table.
Ячейки используются для формирования столбцов. Для создания таких объектов в HTML отсутствуют специальные теги – необходимо пользоваться tr и td. Без tr создать ячейки можно, но тогда они будут выстраиваться на экране друг за другом, формируя цепочку. Tr позволяет перенести необходимые ячейки «вниз».
Td – сокращение от «table data». Переводе с английского – «данные таблицы».
Th
Tr и td – это своеобразные «маркеры». С их помощью программисты смогут сформировать HTML-table на своих сайтах. Этого обычно недостаточно. Любая таблица должна выглядеть удобной для чтения. Для этого используются специальные теги. Примером может послужить th.
Если tr и td помогают формировать таблицу, то th используется для подписи ячеек. Он был создан специально для заголовков. Для подписи строк th тоже может применяться.
Этот тег является парным. К ячейкам, которые обернуты таким «маркером» будут применяться дефолтные CSS-стили. Текст, написанный внутри заголовка, выделяется жирным и выравнивается «по центру» ячейки.
Th произошло от «table header». В переводе – «заголовок таблицы».
Логическая группировка
При помощи ранее представленных «маркеров» получится сформировать только простейшую и примитивную HTML-table. Верстка может осуществляется за счет тегов логической группировки. Их функциональное предназначение сильно отличается от tr, td, th. К таким «маркерам» относят:
- thead;
- caption;
- tfoot;
- tbody.
За счет этих «маркеров» программист получит возможность улучшения читаемости разметки и отделения структурных частей в HTML-table друг от друга.
Thead
Thead используется для создания шапки. Внутри этого тега могут располагаться одна или несколько строк с заголовками (они формируются с помощью tr). Thead размещается сразу после открывающего table или caption. Этот элемент должен располагаться в исходном коде до tbody и tfoot.
Thead с точки зрения семантики напоминает header. Он оказывает влияние на все, что размещается в пределах tr и td.
Tbody
Tbody используется для основной части в HTML-table. Внутри этого «маркера» размещаются tr с необходимой информацией. Допускается использование нескольких tbody внутри одной таблицы. С помощью соответствующего тега разработчик сможет поделить имеющиеся данные на смысловые блоки. По назначению этот компонент напоминает работу main в коде, но в пределах HTML-table.
Tfoot
Изучив td и tr, можно рассмотреть более «сложные маркеры» в HTML. Tfoot – это элемент, который используется для формирования строки «Итого». Он представляет собой td с тем или иным информационным итогом.
Tfoot предусматривает следующие особенности:
- В каждой HTML-table может размещаться только один tfoot-блок.
- Если в программном коде не использовались tbody и thead, tfoot будет размещаться после всех tr.
- Браузер будет отрисовывать соответствующий элемент в самом низу. Размещение tfoot в исходном коде не имеет значения. Даже если он будет написан не в конце документа, браузер все равно разместит соответствующий компонент «снизу».
- С точки зрения семантики смысл tfoot напоминает footer, но в пределах HTML-table.
Дефолтный стилей у таких тегов нет. Они никак не влияют на работу с tr, td, th. Tfoot необходимо применять для формирования более понятной и красивой HTML-table.
Caption
Caption – «маркер», который используется для вставки названия HTML-table. Он является парным. Включает в себя общие данные о таблицах.
Обычно caption размещается после table в исходном коде. В других местах этот элемент не вставляется.
Атрибуты табличных элементов
Помимо глобальных атрибутов tr, td и th у HTML-tables поддерживается ряд иных параметров. Ниже можно ознакомиться с ними:
| Colspan | Td colspan – используется для объединения ячеек (td) из двух и более столбцов (tr). |
| Headers | Th headers применяется для формирования ячеек (td) заголовка, включающих в себя информацию о заголовке текущей ячейки информации. Используется для речевых Интернет-обозревателей. Принимаемыми значениями выступают списки имен ячеек, которые разделяются пробелами. Соответствующие имена присваиваются ячейкам (td) при помощи атрибута id. |
| Rowspan | Td rowspan помогает объединить ячейки в столбце (tr) по вертикали. Значение атрибута может меняться в пределах от 1 до 999 включительно. |
| Span | Col span используется для указания колонок, объединяемых для формирования единого (общего) стиля. По умолчанию значение этого параметра является 1. Вместо него может стоять любое целое положительное число. |
Из чего формируются коды таблиц, понятно. Теперь можно рассмотреть несколько ключевых операций, которые помогут быстрее разобраться с принципами формирования HTML-tables.
Ключевые операции – примеры кодов
Для создания рассматриваемого элемента используется «маркер» table. Вот пример формирования HTML-table, состоящей из двух столбцов и двух строк (tr):
<table>
< tr >< th >заголовок</ th >< th >заголовок</ th ></ tr > <!—ряд с ячейками заголовков—>
< tr >< td >информация</ td >< td >информация</ td ></ tr > <!—ряд с ячейками тела HTML-table—>
</table>Границ по умолчанию в HTML-table нет. Они могут быть заданы при помощи свойства border:
Убрать промежутки между ячейками получится при помощи свойства table {border-collapse: collapse;}. А для изменения ширины HTML-table предстоит воспользоваться свойством width:
Теперь понятно, как сделать таблицу в HTML. Лучше освоить верстку, изучить HTML и CSS, а также разнообразные инструменты для веб-программирования помогут дистанционные компьютерные курсы. Они рассчитаны на срок до года, предусматривают богатую практику и кураторство опытными специалистами. В конце обучения каждый получит электронный сертификат для подтверждения пройденного курса. Также удастся сформировать портфолио для дальнейшего использования, а некоторым ученикам – найти работодателя для продвижения по карьерной лестнице в выбранном направлении.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
