Em nossa vida diária, dizemos que a altura é a medição de algo de baixo para cima, ou de cabeça ao pé. Temos a propriedade de "altura" no CSS, que nos oferece a oportunidade de definir a altura da tabela de acordo com a nossa escolha. Podemos defini -lo em pixels ou porcentagens. Quando definimos qualquer valor nesta propriedade de "altura", nossa tabela é ajustada nessa altura dada. Neste guia, usaremos esta propriedade para definir a altura da tabela e informaremos como ela definirá a altura da tabela. Vamos definir a altura da tabela aqui em diferentes exemplos.
Exemplo 1
Devemos primeiro projetar a tabela no arquivo html para definir a altura da tabela. O código do Visual Studio é usado para produzir este arquivo HTML. Você pode usar qualquer software para fazer esses códigos. Estamos usando este software para executar exemplos neste guia. Ao criar um novo arquivo no código do Visual Studio, devemos selecionar o idioma ou ele o reconhecerá por padrão. Quando escolhemos o HTML como o idioma, a extensão do arquivo é gerada automaticamente quando salvamos o arquivo em qualquer nome.
Depois de selecionar HTML como um idioma, simplesmente digitamos “!”Neste arquivo e pressione“ Enter ”,. As tags fundamentais do código "html" são formadas automaticamente. Basta colocar a parte do corpo no corpo HTML. O link do arquivo CSS é colocado antes do corpo dentro da etiqueta "Head". Criamos a tabela gerando primeiro o título e depois usando o “
" marcação. Existem cinco colunas e seis linhas na tabela que estamos fazendo. A primeira linha é a linha da tabela da tabela e usamos "Th" para adicionar dados à linha da tabela da tabela.
Também usamos a tag "TD" para inserir dados nas células da tabela com "tr" representando as linhas da tabela. Em seguida, iremos para o arquivo CSS que será usado para definir a altura desta tabela.
Estilo o título mencionando "H1" e use as propriedades do CSS aqui. Definimos a “cor” como “vermelho”. A “família da fonte” deste título é “Times New Roman”. Em seguida, estilize a tabela inteira aplicando uma "borda" de "2px" e defina seu tipo como "sólido". A cor da borda é "cinza".
Então, temos a "largura" da tabela. Estamos usando "250px" para largura. Aqui, vamos definir a "altura" da tabela. Para definir a altura da tabela, usamos a propriedade "altura" do CSS. Quando definimos o valor aqui nesta propriedade "altura", ela definirá a altura da tabela. Estamos definindo a "altura" desta tabela para "150px". Então, quando esta tabela se render na tela, terá uma altura "150px".
Depois disso, estamos definindo a borda para uma única borda para todas as células e bordas de mesa usando a propriedade "colapso da fronteira" e definindo essa propriedade para "colapso". Também aplicamos a fronteira nas células e na linha de título. Usamos a propriedade "Border" com "Th" e "TD" também e estabelecemos a mesma borda que definimos para a tabela. A fronteira está em "cinza" do tipo "sólido" e "2px" em sua largura.
A tabela que é dada abaixo está na altura “150px”. Ele gerencia seu conteúdo nesta altura que mencionamos no código CSS. Quando definirmos a altura da tabela, ela será criada na mesma altura.
Exemplo # 2
A tabela que estamos usando aqui é a mesma que criamos no exemplo anterior. Mas aqui, vamos mudar a altura da tabela usando a propriedade de altura. Definimos "azul" para o "cabeçalho" que aparece diante da tabela no topo da página. Em seguida, defina sua “família de fontes” como “calibri” e seu peso é “mais ousado”. Em seguida, aplicamos algumas propriedades a toda a tabela. Defina a borda usando "borda" de "2px" e na forma "sólida" e na cor "laranja". A largura desta tabela é "300px". Desta vez e estamos aumentando a altura da tabela aqui para “250px”. O "colapso da fronteira" é novamente "colapso" neste exemplo. A configuração do "TH" e "TD", aplicando a mesma borda que a tabela e a "cor" "vermelha", define a cor do texto escrito nas células e nas células para "vermelho". A “família-família” para este texto é “Arial”.
Nesta saída, a altura da tabela é aumentada da tabela anterior que criamos no Exemplo 1 porque mudamos a altura aqui no código CSS. Então, aumentamos a altura da mesa.
Exemplo # 3
Estamos usando a mesma tabela novamente que a que usamos no primeiro exemplo. Mas vamos mudar o valor da propriedade de altura para ajustar a altura da tabela. O "cabeçalho" que é exibido antes da tabela na parte superior é definido como "roxo". Em seguida, mude a “família de fontes” da fonte para “argelino”. Em seguida, aplicamos alguns atributos a toda a tabela e estabelecemos a fronteira. Primeiro, com uma "fronteira" de "2px" e na forma "sólida", bem como na cor "verde". Desta vez, a largura da tabela é "automática", enquanto a altura da tabela é "100px.”
Nesse caso, "colapso da fronteira" é definido com "colapso". O "th" e o "td" estão definidos para a mesma borda que a tabela. A cor do texto escrita nas células e nas células é definida como “roxa”. A “família da fonte” deste texto é “Cambria”.
A captura de tela fornecida é a saída deste código. Aqui, você pode ver que a tabela ajusta sua largura automaticamente e a altura desta tabela dada é "100px".
Exemplo # 4
Definimos a mesma tabela usando valores diferentes das propriedades. A “cor” do cabeçalho é “laranja” e sua “família de fontes” é “argelino”. Nesse caso, a cor da borda de toda a tabela é "roxa". A "largura" de toda a tabela é novamente "automática", mas a "altura" da tabela é "400px". A borda de todas as células é "roxa" e o texto "cor" é "vermelho". A “fonte-família” do texto é “sem serrif”.
Aqui, na captura de tela, você pode notar a altura da tabela. A tabela é semelhante à ilustração acima. Mas na ilustração abaixo, a altura da tabela é alterada.
Exemplo # 5
Neste código, definimos o caminho para a cor "verde" de "argelino" "font-família". Então, as propriedades da tabela são as mesmas que discutimos no exemplo anterior. Aqui, estamos definindo a altura da tabela usando porcentagem em vez de pixel. Vamos ajustar a altura da tabela para "50%". Agora, vamos verificar a saída como a tabela fica quando definirmos sua altura em porcentagem.
Aqui, a altura da tabela é "50%" e sua largura é automática. Podemos definir qualquer valor nesta propriedade de "altura" da tabela. Podemos definir a altura da tabela correspondente à nossa escolha.
Conclusão:
Este guia pretendia mostrar qual é a altura da tabela, como definir a altura da tabela no CSS e qual propriedade CSS é usada para definir a altura da tabela. Como discutimos, a altura é a medição da tabela de cima para baixo. Passamos vários códigos aqui e também incluímos a saída. Depois de estudar completamente este guia, você poderá definir a altura da tabela no CSS no futuro.
