L'altezza è la misurazione di qualcosa dalla parte inferiore alla parte superiore o dalla testa al piede. L'altezza della riga della tabella è definita come la distanza tra la parte superiore e la base della riga. In CSS, abbiamo la proprietà "altezza della linea" che ci consente di personalizzare l'altezza della riga del tavolo. L'attributo "coda di linea" CSS può essere utilizzato per alterare l'altezza della riga della tabella. Quando cambiamo il valore di questa proprietà "altezza della linea", la nostra riga della tabella è ridimensionata a quell'altezza. Utilizzeremo questa proprietà "altezza della linea" per impostare l'altezza della riga della tabella in questo tutorial e ti mostreremo come impostare l'altezza della riga della tabella e come regolare l'altezza della riga della tabella usando diversi esempi.
Esempio 1:
Per impostare l'altezza della riga della tabella, dobbiamo progettare la tabella nel file HTML. Questo file HTML è creato qui nel codice Visual Studio. Ma puoi usare qualsiasi software per creare questi codici. Questo software viene utilizzato per eseguire gli esempi. Dobbiamo selezionare la lingua quando creiamo un nuovo file nel codice Visual Studio. Altrimenti, lo riconoscerà per impostazione predefinita. Quando HTML è selezionato come lingua, l'estensione del file viene creata automaticamente quando il file viene salvato con qualsiasi nome. Abbiamo semplicemente messo "!"In questo file dopo aver selezionato HTML come lingua e premendo" Invio ". I tag principali del codice "HTML" vengono prodotti automaticamente.
La "tabella" nel "corpo" deve ora essere creata. La tabella viene creata prima creando l'intestazione e quindi usando il "
"Tag. La tabella che stiamo creando ha cinque colonne e sei righe. La prima riga della tabella è la riga dell'intestazione della tabella e usiamo "th" per aggiungere dati ad essa. Il tag "TD" viene anche utilizzato per inserire i dati nelle celle della tabella con "TR" per le righe della tabella. Successivamente, andremo al file CSS, che verrà utilizzato per impostare l'altezza della riga della tabella.
STORIO L'INTANZA NAMENTI NAMENTI "H1" e applicando le proprietà CSS. Abbiamo scelto "verde" per il parametro "colore" che viene utilizzato per cambiare il colore del testo. La "famiglia del carattere" di questa intestazione è quindi "algerina", applica un "bordo" di "2px" all'intero tavolo, con il tipo impostato su "solido" e il colore del bordo impostato su "viola". La "larghezza" della tabella viene quindi specificata con "auto" è la larghezza. Quindi, stiamo utilizzando la proprietà "Collapse a confine" e imposterà questo "crollare" per il crollo del bordo dell'intero tavolo.
Dopo questo, dobbiamo creare il "bordo" per tutte le cellule. Impostamo lo stesso bordo per la cella che utilizziamo per la tabella qui. Il testo nelle celle renderà in "verde" mentre impostiamo questo "colore" nella proprietà CSS. Ora stiamo impostando l'altezza della riga della tabella. Quindi, qui abbiamo messo "TR" che viene utilizzato per le righe e impostiamo l'altezza della riga utilizzando la proprietà CSS "Height Line-Height". Stiamo impostando "30px" per l'altezza della riga del tavolo. Questa altezza si applicherà a tutte le righe del tavolo.
L'output mostra la tabella. In questa tabella, l'altezza delle righe della tabella è 30px ciascuna. Possiamo impostare l'altezza della riga secondo la nostra scelta. Lo impostiamo su 30px in questo codice e puoi verificarlo nell'output fornito.
Esempio n. 2:
La tabella che stiamo usando qui è la stessa di quella che abbiamo usato nell'esempio precedente. Ma cambieremo il valore della proprietà altezza della linea per regolare l'altezza della riga della tabella. Cambieremo la "famiglia del carattere" del carattere in "Times New Roman". Quindi, stiamo applicando alcuni attributi all'intero tavolo e stabiliamo il confine. Prima con un "bordo" di "2px" e in forma "solida", così come nel colore "verde". Utilizziamo la parola chiave "auto" per la proprietà "larghezza" e la parola chiave "crollo" per la proprietà "Collapse a confine".
Dobbiamo anche stabilire il bordo per le cellule. Quindi, usiamo la proprietà "Border" ora per "Th" e "TR". I valori sono impostati su "2px solido verde" e il testo della cella è il colore "blu". Quindi, per tutte le righe tranne la riga dell'intestazione, stiamo impostando l'altezza "20px" utilizzando la proprietà "altezza della linea". Ma vogliamo anche impostare l'altezza della riga dell'intestazione. Per questo, utilizziamo il "th" e utilizziamo qui "altezza della linea" e lo imposti su "80px". Quando questa tabella si renderà sullo schermo di uscita, l'altezza della riga di intestazione sarà "80px" e l'altezza delle righe rimanenti sarà "20px".
Qui, puoi vedere che l'altezza della prima riga è maggiore delle righe rimanenti in quanto abbiamo impostato la sua altezza su "80px" e l'altezza dell'altra riga è "20px". Ecco perché c'è una differenza tra l'altezza della prima riga che è la riga di testa e l'altezza delle altre file.
Esempio # 3:
In questa tabella, diamo il nome a ogni riga come "T1", "T2", "T3" e così via. Quindi, impostiamo altezze diverse per ogni riga in CSS. Applicheremo la proprietà "-height" separatamente in ogni riga utilizzando i nomi delle righe che abbiamo fornito qui in questo file HTML.
Innanzitutto, stiamo accontentando l'intestazione che appare in cima per renderlo attraente utilizzando alcune proprietà. Stiamo usando il "colore" che è la proprietà CSS e impostare il colore "Corallo leggero" per questa intestazione. La "famiglia di font" dell'intestazione è "algerina". Il bordo del tavolo è impostato come "marrone". Lo impostiamo su "solido" in modo che appare come un bordo della linea solida ed è "2px" in larghezza. Quindi "crollare" il bordo in modo da visualizzare come un singolo bordo.
Ora stiamo creando un "bordo" attorno a tutte le celle del tavolo. Applichiamo lo stesso bordo del bordo del tavolo. Lo stesso colore "marrone" e tipo solido di "2px". Il testo "colore" è "nero". Ora, imposteremo l'altezza di ogni riga separatamente usando il nome delle righe. Usiamo "T1" con "TR" che rappresenta la prima riga della tabella e impostare la sua altezza usando la proprietà "altezza della linea" e mettendo "20px" come valore. Quindi, usa "T2" con "TR" posizionando "."Tra loro che è la seconda fila. L'altezza di questa riga è impostata su "30px".
Dopo questo, abbiamo "T3" che è la terza fila. Lo scriviamo con "TD" mentre scriviamo il "T1" o "T2" ma qui la sua altezza è "50px". Stiamo impostando "70px" per la quarta riga usando "T4" e "90px" per la quinta riga. Inoltre, imposta "120px" per la sesta riga e il nome della sesta riga è "T6". Ora, impostiamo diverse altezze di riga per tutte e sei le righe.
La differenza di altezza tra tutte le righe è vista in questo dato output. Qui, l'altezza della prima riga è più piccola della seconda riga e così via. Tutte le righe sono di altezze diverse, quindi in questo modo possiamo impostare l'altezza delle righe in CSS.
Conclusione:
Questo tutorial ha dimostrato quale sia l'altezza della riga del tavolo, come impostare l'altezza della riga del tavolo in CSS e quale proprietà CSS viene utilizzata per determinare l'altezza della riga del tavolo. Come abbiamo affermato, l'altezza della riga di una tabella viene misurata dall'alto verso il basso della riga e ha spiegato che la proprietà "altezza della linea" di CSS viene utilizzata per impostare l'altezza delle righe. Abbiamo usato questa proprietà su tutte le righe combinate e sulla riga di ogni tabella separatamente. Abbiamo superato vari codici in questo tutorial, nonché i risultati di questi codici. Dopo aver letto a fondo questo tutorial, imposterà l'altezza della riga del tavolo nei progetti.
