A altura é a medição de algo de baixo para cima, ou da cabeça ao pé. A altura da linha da tabela é definida como a distância entre a parte superior e a base da linha. No CSS, temos a propriedade de "altura da linha" que nos permite personalizar a altura da linha da tabela. O atributo "altura da linha" CSS pode ser usado para alterar a altura da linha da tabela. Quando mudamos o valor dessa propriedade de "altura da linha", nossa linha de tabela é redimensionada para essa altura. Usaremos esta propriedade "altura da linha" para definir a altura da linha da tabela neste tutorial e mostraremos como ela define a altura da linha da tabela e como ajustar a altura da linha da tabela usando vários exemplos.
Exemplo 1:
Para definir a altura da linha da tabela, devemos projetar a tabela no arquivo html. Este arquivo HTML é criado aqui no código do Visual Studio. Mas você pode usar qualquer software para criar esses códigos. Este software está sendo usado para executar os exemplos. Devemos selecionar o idioma ao criar um novo arquivo no código do Visual Studio. Caso contrário, ele o reconhecerá por padrão. Quando o HTML é selecionado como o idioma, a extensão do arquivo é criada automaticamente quando o arquivo é salvo sob qualquer nome. Nós apenas colocamos “!”Neste arquivo depois de selecionar HTML como um idioma e pressionar“ Enter ”. As tags principais do código "html" são produzidas automaticamente.
A "tabela" no "corpo" agora deve ser criada. A tabela é criada pela primeira vez criando o título e depois usando o “
" marcação. A tabela que estamos criando tem cinco colunas e seis linhas. A primeira linha da tabela é a linha da tabela da tabela, e usamos "th" para adicionar dados a ela. A tag "TD" também é usada para colocar dados nas células da tabela com "TR" para as linhas da tabela. Depois disso, iremos para o arquivo CSS, que será usado para definir a altura da linha da tabela.
Estilize o título nomeando “H1” e aplicando propriedades CSS. Escolhemos "verde" para o parâmetro "cor" que é usado para alterar a cor do texto. A “família de fontes” deste título é “argeliana” então, aplique uma “borda” de “2px” em toda a tabela, com o tipo de tipo para “sólido” e a cor da borda definida para “roxo”. A "largura" da tabela é então especificada com "auto" sendo a largura. Em seguida, estamos utilizando a propriedade "colapso da fronteira" e definimos isso como "colapso" para desmoronar a fronteira de toda a tabela.
Depois disso, devemos criar a "fronteira" para todas as células. Definimos a mesma borda para a célula que usamos para a tabela aqui. O texto nas células será renderizado em "verde" à medida que definimos essa "cor" na propriedade CSS. Agora, estamos definindo a altura da linha da tabela. Então, aqui colocamos "TR" que é usado para as linhas e definimos a altura da linha, utilizando a propriedade CSS "Line Height". Estamos definindo "30px" para a altura da linha da tabela. Esta altura se aplicará a todas as linhas da tabela.
A saída mostra a tabela. Nesta tabela, a altura das fileiras da tabela é 30px cada. Podemos definir a altura da linha de acordo com a nossa escolha. Definimos para 30px neste código e você pode verificar isso na saída fornecida.
Exemplo # 2:
A tabela que estamos usando aqui é a mesma que usamos no exemplo anterior. Mas vamos alterar o valor da propriedade de altura de linha para ajustar a altura da linha da tabela. Nós vamos mudar a "font-família" da fonte para "Times New Roman". Em seguida, estamos aplicando alguns atributos a toda a tabela e estabelecemos a fronteira. Primeiro com uma "fronteira" de "2px" e em forma "sólida", bem como na cor "verde". Usamos a palavra-chave "automática" para a propriedade "largura" e a palavra-chave "colapso" para a propriedade "colapso da fronteira".
Também precisamos estabelecer a fronteira para as células. Então, usamos a propriedade "Border" agora para "Th" e "TR". Os valores são definidos como "2px verde sólido" e o texto da célula é a cor "azul". Então, para todas as linhas, exceto a linha do cabeçalho, estamos definindo a altura "20px", utilizando a propriedade "altura da linha". Mas também queremos definir a altura da linha de título. Para isso, usamos o "th" e utilizamos "altura da linha" aqui e o definimos como "80px". Quando esta tabela renderizar na tela de saída, a altura da linha do cabeçalho será "80px" e a altura das linhas restantes será "20px".
Aqui, você pode ver que a altura da primeira linha é maior que as linhas restantes, pois definimos sua altura para "80px" e a altura da outra linha é "20px". É por isso que há uma diferença entre a altura da primeira fila, que é a linha do cabeçalho e a altura das outras linhas.
Exemplo # 3:
Nesta tabela, damos o nome a cada linha como "T1", "T2", "T3" e assim por diante. Em seguida, definimos alturas diferentes para cada linha no CSS. Aplicaremos a propriedade "altura da linha" separadamente em cada linha usando os nomes das linhas que demos aqui neste arquivo html.
Primeiro, estamos estilizando o título que aparece no topo para torná -lo atraente, utilizando algumas propriedades. Estamos usando a “cor”, que é a propriedade CSS e definir a cor “CORAL LUZ” para este título. A "família" do cabeçalho é "argeliana". A borda da tabela é definida como "marrom". Definimos como "sólido", para que apareça como uma borda de linha sólida e seja "2px" em largura. Em seguida, "colapse" a fronteira para que ela seja exibida como uma única borda.
Agora, estamos criando uma "fronteira" em torno de todas as células da mesa. Aplicamos a mesma borda que a borda da tabela. A mesma cor "marrom" e tipo sólido de "2px". O texto "cor" é "preto". Agora, vamos definir a altura de cada linha separadamente usando o nome das linhas. Usamos "T1" com "TR", que representa a primeira linha da tabela e definimos sua altura usando a propriedade "altura da linha" e colocando "20px" como seu valor. Em seguida, use "T2" com "TR", colocando ".”Entre eles, que é a segunda fila. A altura desta linha é definida como "30px".
Depois disso, temos "T3", que é a terceira fila. Escrevemos com "TD" enquanto escrevemos o "T1" ou "T2", mas aqui sua altura é "50px". Estamos definindo "70px" para a quarta linha usando "T4" e "90px" para a quinta fila. Além disso, defina “120px” para as sextas linhas e o nome da sexta fila é “T6”. Agora, definimos diferentes alturas de linha para todas as seis linhas.
A diferença de altura entre todas as linhas é vista nesta saída dada. Aqui, a altura da primeira linha é menor que a segunda linha e assim por diante. Todas as linhas são de diferentes alturas; portanto, dessa maneira, podemos definir a altura das linhas no CSS.
Conclusão:
Este tutorial demonstrou qual é a altura da linha da tabela, como definir a altura da linha da tabela no CSS e qual propriedade CSS é usada para determinar a altura da linha da tabela. Como afirmamos, a altura da linha de uma mesa é medida de cima para baixo da linha e explicou que a propriedade de "altura da linha" do CSS é usada para definir a altura das linhas. Usamos essa propriedade em todas as linhas combinadas e na linha de cada mesa separadamente. Examinamos vários códigos neste tutorial, bem como os resultados desses códigos. Depois de ler este tutorial completamente, você definirá a altura da linha da tabela em projetos.
