Какова цель ячейки таблицы в Tailwind

Имея дело с большими наборами данных, важно создать систему понимания. Это помогает управлять всеми значениями и позволяет нам делать ценные выводы из собранных данных и принимать обоснованные решения. Существует много эффективных методов представления данных, и один из наиболее важных — в виде таблиц.

Назначение таблицы-ячейки

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

Типы ячеек таблицы

Таблица в HTML в основном имеет два типа ячеек. Это ' Ячейки заголовка ' и ' Ячейки данных ». Более подробная информация об их различиях и сходствах приведена ниже.

Ячейки заголовка

Ячейки заголовка представлены знаком « <й> ” в HTML Tailwind CSS. Они составляют заголовки столбцов в таблице. Заголовки определяют, какими будут все значения в конкретном столбце. Примерами заголовков являются имя, адрес электронной почты, контактный номер, номер социального страхования и т. д.

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

Пример
В приведенном ниже коде мы создали ячейку заголовка таблицы с помощью тега «»:

< стол >
< голова >
< тр >
< й > Ячейка заголовка 01 < / й >
< / тр >
< / голова >
< / стол >

В этом блоке кода:

Создайте таблицу с помощью тега «».

Теперь используйте тег «

».

Наконец, закройте теги «

», «» и «

», чтобы создать ячейку заголовка таблицы. Затем определите запись ячейки « Ячейка заголовка 01 », используя тег «	» внутри тега «

» соответственно, чтобы заполнить ячейку таблицы.

Выход

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

Ячейки данных

Ячейки данных представлены « <тд> ” в HTML Tailwind CSS. Эти ячейки содержат всю информацию в таблице. Они перечислены под ячейками заголовка и содержат данные для всех записей для определенного заголовка. Например, если ячейка заголовка называется «Имя», ячейки данных под ней будут содержать имена всех сотрудников, для которых записываются данные.

Ячейки данных также имеют особое форматирование. Они имеют меньший размер шрифта, чем ячейки заголовка, и содержат обычный текст или числа в соответствии с требованиями. Это так, что ячейки данных под ячейкой заголовка «Имя» будут иметь имена заинтересованных лиц, например, Джон, Дэвид, Майкл и Джеймс.

Пример
Код для создания ячейки данных таблицы с использованием «

” приведен ниже: < голова >
< стиль >
стол {
граница коллапса: коллапс;
}
тд {
граница : 1 пиксель сплошной черный;
отступ: 10 пикселей;
}
< / стиль >
< / голова >
< тело >
< стол >
< тр >
< тд >Таблица-ячейка< / тд >
< / тр >
< / стол >

Следующие шаги объясняют код для создания ячейки данных таблицы:

Тег «