O que é o atributo “rowspan” e como usar com o elemento “td” em HTML?

O Que E O Atributo Rowspan E Como Usar Com O Elemento Td Em Html



Em HTML, o “ Expansão de linha ” é um atributo que pode ser utilizado ao criar tabelas. É comumente usado para mesclar várias células adjacentes em uma direção vertical. Ele pode ser usado para criar designs de mesa complexos enquanto adiciona interesse visual para o usuário. Ao usá-lo, o desenvolvedor pode reduzir o código HTML e melhorar a legibilidade da tabela. Além disso, o atributo “rowspan” pode ajudar a organizar uma tabela agrupando várias células.

Este guia demonstra o que é o atributo “rowspan” e como usá-lo com o elemento “td”.

O que é um atributo “rowspan”?

O atributo “rowspan” é utilizado para mesclar várias células em uma direção vertical. Pode ser acessado como “ intervalo de linhas = valor ', onde o ' valor ” é o número de linhas que precisam ser mescladas na direção vertical. É benéfico para melhorar a legibilidade do usuário e exibir dados complexos de uma maneira mais atraente para o usuário.







O que é um elemento “td”?

O ' td ” ou o elemento de dados da tabela é usado para definir uma célula dentro de uma tabela HTML. É usado principalmente em conjunto com outros elementos HTML de tabela como “”, “”, “

para criar o conteúdo da tabela. Ele também pode ser utilizado com atributos como “colspan” e “rowspan” para adicionar recursos extras de design, reduzir a complexidade e melhorar o fator de legibilidade, etc. Ele é utilizado no arquivo HTML usando o “ ” tags que inserem as linhas na tabela e utilizam o “
' marcação.



Como usar o atributo “rowspan” com o elemento “td”?

Para uma melhor demonstração da relação entre o atributo “rowspan” e o elemento “td”. Vamos percorrer um exemplo prático seguindo o guia passo a passo abaixo:



Passo 1: Criação da Tabela em HTML

Primeiro, crie uma tabela com a ajuda do “ ' marcação. Dentro dele, adicione vários “

” para criar células:





< estilo >

mesa{

border-collapse:collapse;

margem: 40px;

}

th,td{

borda: 2px vermelho sólido;

preenchimento: 20px;

}

< / estilo >

< / cabeça >

< corpo >

< mesa >

< tr >

< º > emp.id < / º >

< º > nome do empregado < / º >

< º > Salário < / º >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160.000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Joseph < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Ângela < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > Escarlate < / td >

< td > 80.000 < / td >

< / tr >

< / mesa >

< / corpo >

No trecho de código acima:

  • Primeiro, as cinco linhas foram criadas e alguns dados fictícios são fornecidos para cada célula.
  • A seguir, o “ mesa ” elemento é selecionado e defina o “ colapso ” valor para o CSS “ colapso da fronteira ' propriedade.
  • Depois disso, o “ fronteira ' e ' preenchimento ” propriedades são utilizadas para aumentar a visibilidade do usuário e criar um efeito atraente para o usuário.

Após a execução do código, a tabela aparece assim:



A saída acima mostra que a tabela foi criada e estilizada.

Passo 2: Usando o Atributo “rowspan” com o Elemento “td”

O ' Expansão de linha ” O atributo mescla células adjacentes na direção vertical. É utilizado com o “

” elemento/marca. O atributo usa um número como valor e informa quantas células são mescladas na direção vertical. A próxima célula adjacente deve ter uma célula a menos em quantidade, e esse espaço é preenchido pelo atributo “rowspan” conforme mostrado abaixo:

< corpo >

< mesa >

< tr >

< º >Emp.id< / º >

< º >Nome do Funcionário< / º >

< º >Salário< / º >

< / tr >

< tr >

< td > 1 < / td >

< td >João< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >José< / td >

< td Expansão de linha = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >Escarlate< / td >

< td > 80 ,000< / td >

< / tr >

< / mesa >

< / corpo >

No código acima:

  • O “rowspan” é anexado com o funcionário tendo um “ Salário ” elemento td.
  • O valor de ' 2 ” é fornecido ao atributo “rowspan” que define os mesmos dados em ambas as células adjacentes, conforme mostrado abaixo:

A saída ilustra que as duas células foram mescladas e a legibilidade para o usuário foi aprimorada.

Conclusão

O ' Expansão de linha ” funciona com o atributo “ td ” elemento para mesclar várias células adjacentes na direção vertical. O atributo usa um número como valor e informa quantas células são mescladas. É utilizado quando os mesmos dados são fornecidos para várias células. Este blog demonstrou o que é “rowspan” e como usá-lo com o elemento “td” em HTML.