Что такое атрибут «rowspan» и как его использовать с элементом «td» в HTML?

Cto Takoe Atribut Rowspan I Kak Ego Ispol Zovat S Elementom Td V Html



В HTML « ряды ” — это атрибут, который можно использовать при создании таблиц. Он обычно используется для объединения нескольких соседних ячеек в вертикальном направлении. Его можно использовать для создания сложных дизайнов таблиц, добавляя визуальный интерес для пользователя. Используя его, разработчик может сократить HTML-код и улучшить читаемость таблицы. Более того, атрибут rowspan может помочь организовать таблицу, сгруппировав несколько ячеек.

В этом руководстве показано, что такое атрибут rowspan и как его использовать с элементом td.

Что такое атрибут rowspan?

Атрибут rowspan используется для объединения нескольких ячеек в вертикальном направлении. Доступ к нему можно получить как « диапазон строк = значение ', где ' ценить ” — это количество строк, которые необходимо объединить в вертикальном направлении. Это полезно для повышения удобочитаемости для пользователя и отображения сложных данных в более привлекательной для пользователя форме.







Что такое элемент «td»?

тд ” или элемент данных таблицы используется для определения ячейки в таблице HTML. В основном он используется в сочетании с другими HTML-элементами таблицы, такими как «», «», «

для создания содержимого таблицы. Его также можно использовать с такими атрибутами, как «colspan» и «rowspan», чтобы добавить дополнительные функции проектирования, уменьшить сложность и улучшить коэффициент читабельности и т. д. Он используется в файле HTML с помощью « <тд> ' ярлык.



Как использовать атрибут «rowspan» с элементом «td»?

Для лучшей демонстрации связи между атрибутом «rowspan» и элементом «td». Давайте рассмотрим практический пример, следуя приведенному ниже пошаговому руководству:



Шаг 1: Создание таблицы в HTML

Сначала создайте таблицу с помощью команды « <таблица> ' ярлык. Внутри него добавьте несколько «

», которые вставляют строки в таблицу и используют « <тд> ” для создания ячеек:





< стиль >

стол{

граница коллапса: коллапс;

поле: 40px;

}

й, тд {

граница: 2px сплошной красный;

отступ: 20 пикселей;

}

< / стиль >

< / голова >

< тело >

< стол >

< тр >

< й > emp.id < / й >

< й > Имя сотрудника < / й >

< й > Зарплата < / й >

< / тр >

< тр >

< тд > 1 < / тд >

< тд > Джон < / тд >

< тд > 160 000 < / тд >

< / тр >

< тр >

< тд > 2 < / тд >

< тд > Джозеф < / тд >

< тд > 120 000 < / тд >

< / тр >

< тр >

< тд > 3 < / тд >

< тд > Анджела < / тд >

< тд > 120 000 < / тд >

< / тр >

< тр >

< тд > 4 < / тд >

< тд > Скарлет < / тд >

< тд > 80 000 < / тд >

< / тр >

< / стол >

< / тело >

В приведенном выше фрагменте кода:

  • Во-первых, были созданы пять строк, и каждой ячейке были предоставлены некоторые фиктивные данные.
  • Далее « стол » элемент выбран и установлен « крах 'значение в CSS' обрушение границ ' свойство.
  • После этого « граница ' и ' набивка ” используются для улучшения видимости для пользователей и создания привлекательного для пользователя эффекта.

После выполнения кода таблица выглядит так:



Приведенный выше вывод показывает, что таблица создана и оформлена.

Шаг 2: Использование атрибута «rowspan» с элементом «td»

ряды ” объединяет соседние ячейки в вертикальном направлении. Используется с « <тд> элемент/тег. Атрибут принимает число в качестве значения и сообщает, сколько ячеек будет объединено в вертикальном направлении. В следующей соседней ячейке должно быть на одну ячейку меньше, и это пространство заполняется атрибутом «rowspan», как показано ниже:

< тело >

< стол >

< тр >

< й >Emp.id< / й >

< й >Имя сотрудника< / й >

< й >Зарплата< / й >

< / тр >

< тр >

< тд > 1 < / тд >

< тд >Джон< / тд >

< тд > 160 ,000< / тд >

< / тр >

< тр >

< тд > 2 < / тд >

< тд >Джозеф< / тд >

< тд ряды '=' '2' > 120 ,000< / тд >

< / тр >

< тр >

< тд > 3 < / тд >

< тд >Анжела< / тд >

< / тр >

< тр >

< тд > 4 < / тд >

< тд >Скарлет< / тд >

< тд > 80 ,000< / тд >

< / тр >

< / стол >

< / тело >

В приведенном выше коде:

  • «Пролет» прикрепляется к сотруднику, имеющему « Зарплата элемент тд.
  • Значение ' 2 » предоставляется атрибуту «rowspan», который устанавливает одни и те же данные в обеих соседних ячейках, как показано ниже:

Вывод показывает, что две ячейки объединены, а читабельность для пользователя теперь улучшена.

Заключение

ряды Атрибут работает с атрибутом « тд », чтобы объединить несколько соседних ячеек в вертикальном направлении. Атрибут принимает число в качестве значения и сообщает, сколько ячеек будет объединено. Он используется, когда одни и те же данные предоставляются нескольким ячейкам. Этот блог продемонстрировал, что такое «rowspan» и как его использовать с элементом «td» в HTML.