Nella nostra vita quotidiana, diciamo che l'altezza è la misurazione di qualcosa dal basso verso l'alto o dalla testa ai piedi. Abbiamo la proprietà "altezza" in CSS che ci offre questa opportunità per impostare l'altezza del tavolo secondo la nostra scelta. Possiamo impostarlo in pixel o percentuali. Quando impostiamo qualsiasi valore in questa proprietà "altezza", la nostra tabella viene regolata in quell'altezza data. In questa guida, utilizzeremo questa proprietà per impostare l'altezza della tabella e ti faremo sapere come imposterà l'altezza della tabella. Imposteremo l'altezza del tavolo qui in diversi esempi.
Esempio 1
Dobbiamo prima progettare la tabella nel file HTML per impostare l'altezza della tabella. Il codice Visual Studio viene utilizzato per produrre questo file HTML. È possibile utilizzare qualsiasi software per eseguire questi codici. Stiamo usando questo software per eseguire esempi in questa guida. Quando si crea un nuovo file nel codice Visual Studio, dobbiamo selezionare la lingua o lo riconoscerà per impostazione predefinita. Quando scegliamo HTML come lingua, l'estensione del file viene generata automaticamente quando salviamo il file con qualsiasi nome.
Dopo aver selezionato HTML come lingua, digitiamo semplicemente "!"In questo file e premi" Inserisci ". I tag fondamentali del codice "HTML" sono formati automaticamente. Basta posizionare la porzione del corpo nel corpo HTML. Il collegamento del file CSS viene posizionato prima del corpo all'interno del tag "testa". Creiamo la tabella generando prima l'intestazione e poi usando il "
"Tag. Ci sono cinque colonne e sei righe nella tabella che stiamo realizzando. La prima riga è la riga dell'intestazione della tabella e usiamo "th" per aggiungere dati alla riga di testa della tabella.
Utilizziamo anche il tag "TD" per inserire i dati nelle celle della tabella con "TR" che rappresentano le righe della tabella. Quindi, andremo al file CSS che verrà utilizzato per impostare l'altezza di questa tabella.
STHILTH THE TETTING menzionando "H1" e usa le proprietà di CSS qui. Abbiamo impostato il "colore" su "rosso". La "famiglie di carattere" di questa voce è "Times New Roman". Quindi, modella l'intero tavolo applicando un "bordo" di "2px" e imposta il suo tipo su "solido". Il colore del bordo è "grigio".
Quindi, abbiamo la "larghezza" del tavolo. Stiamo usando "250px" per la larghezza. Qui, imposteremo l '"altezza" del tavolo. Per impostare l'altezza della tabella utilizziamo la proprietà "altezza" di CSS. Quando impostiamo il valore qui in questa proprietà "altezza", imposterà l'altezza della tabella. Stiamo impostando l '"altezza" di questa tabella su "150px". Quindi, quando questa tabella rende sullo schermo, avrà un'altezza "150px".
Successivamente, stiamo preparando il bordo su un singolo bordo per tutte le celle e i bordi della tabella usando la proprietà "Collapse a confine" e impostando questa proprietà su "crollo". Applichiamo anche il bordo sulle celle e la riga di testa. Usiamo anche la proprietà "bordo" con "th" e "TD" e fissiamo lo stesso bordo che abbiamo impostato per il tavolo. Il bordo è in "grigio" di tipo "solido" e "2px" nella sua larghezza.
La tabella che è riportata di seguito è all'altezza "150px". Gestisce il suo contenuto a questa altezza che abbiamo menzionato nel codice CSS. Quando impostiamo l'altezza del tavolo, verrà creato alla stessa altezza.
Esempio n. 2
La tabella che stiamo usando qui è la stessa che abbiamo creato nell'esempio precedente. Ma qui, cambieremo l'altezza del tavolo usando la proprietà dell'altezza. Abbiamo impostato "blu" per la "intestazione" che appare prima del tavolo nella parte superiore della pagina. Quindi, imposta la sua "famiglia di carattere" su "calibri" e il suo peso è "più audace". Quindi, applichiamo alcune proprietà all'intero tavolo. Imposta il bordo usando "bordo" di "2px" e in forma "solida" e in colore "arancione". La larghezza di questa tabella è "300px". Questa volta e stiamo aumentando l'altezza del tavolo qui a "250px". Il "Collapse a confine" è di nuovo "crollo" in questo esempio. L'impostazione di "TH" e "TD", applicando lo stesso bordo del tavolo e del "colore" "rosso", imposta il colore del testo scritto nelle celle e le celle intestate su "rosso". La "famiglia del carattere" per questo testo è "Arial".
In questo output, l'altezza della tabella è aumentata dalla tabella precedente che abbiamo creato nell'esempio 1 perché cambiamo l'altezza qui nel codice CSS. Quindi, abbiamo aumentato l'altezza del tavolo.
Esempio n. 3
Stiamo usando di nuovo la stessa tabella di quella che abbiamo usato nel primo esempio. Ma cambieremo il valore della proprietà di altezza per regolare l'altezza della tabella. La "intestazione" che viene visualizzata prima del tavolo in alto è impostata su "viola". Quindi, cambia la "famiglia del carattere" del carattere in "algerino". Quindi, applichiamo alcuni attributi all'intero tavolo e stabiliamo il confine. Innanzitutto, con un "bordo" di "2px" e in forma "solida", così come nel colore "verde". Questa volta, la larghezza del tavolo è "automatica" mentre l'altezza del tavolo è "100px."
In questo caso, "Collapse a confine" è impostato con "collasso". Il "th" e "TD" sono impostati sullo stesso confine del tavolo. Il colore del testo scritto nelle celle e nelle celle intestate è impostato su "viola". "Font-Family" di questo testo è "Cambria".
Lo screenshot indicato è l'output di questo codice. Qui, puoi vedere che la tabella regola automaticamente la sua larghezza e l'altezza di questa tabella data è "100px".
Esempio # 4
Impostamo la stessa tabella usando valori diversi delle proprietà. Il "colore" dell'intestazione è "arancione" e la sua "famiglie di carattere" è "algerina". In questo caso, il colore del bordo dell'intero tavolo è "viola". La "larghezza" dell'intero tavolo è di nuovo "auto" ma la "altezza" della tabella è "400px". Il bordo di tutte le cellule è "viola" e il testo "colore" è "rosso". La "famiglia di carattere" del testo è "sans-serif".
Qui, nello screenshot, puoi notare l'altezza del tavolo. La tabella è simile all'illustrazione sopra. Ma nell'illustrazione seguente, l'altezza della tabella viene modificata.
Esempio # 5
In questo codice, abbiamo impostato l'intestazione sul colore "verde" di "Font-Family" "algerina". Quindi, le proprietà della tabella sono le stesse di cui abbiamo discusso nell'esempio precedente. Qui, stiamo impostando l'altezza della tabella usando la percentuale anziché il pixel. Regoleremo l'altezza del tavolo al "50%". Ora, controlleremo l'uscita come appare la tabella quando impostiamo la sua altezza in percentuale.
Qui, l'altezza del tavolo è "50%" e la sua larghezza è automatica. Possiamo impostare qualsiasi valore in questa proprietà "altezza" della tabella. Possiamo impostare l'altezza della tabella corrispondente alla nostra scelta.
Conclusione:
Questa guida aveva lo scopo di mostrarti qual è l'altezza del tavolo, come impostare l'altezza del tavolo in CSS e quale proprietà CSS viene utilizzata per impostare l'altezza della tabella. Come abbiamo discusso, l'altezza è la misurazione del tavolo dall'alto verso il basso. Abbiamo superato diversi codici qui e abbiamo anche incluso l'output. Dopo aver studiato a fondo questa guida, sarai in grado di impostare l'altezza del tavolo in CSS in futuro.
