La hauteur est la mesure de quelque chose du bas en haut, ou de la tête au pied. La hauteur de la rangée de table est définie comme la distance entre le haut et la base de la ligne. Dans CSS, nous avons la propriété «line-hauteur» qui nous permet de personnaliser la hauteur de la rangée de table. L'attribut «line-hauteur» CSS peut être utilisé pour modifier la hauteur de la ligne de la table. Lorsque nous modifions la valeur de cette propriété «line-hauteur», notre rangée de table est redimensionnée à cette hauteur. Nous utiliserons cette propriété «line-hauteur» pour définir la hauteur de la ligne de table dans ce tutoriel, et nous vous montrerons comment il définit la hauteur de la ligne de table et comment ajuster la hauteur de la ligne de table en utilisant plusieurs exemples.
Exemple 1:
Pour définir la hauteur de la ligne de la table, nous devons concevoir la table dans le fichier html. Ce fichier HTML est créé ici dans Visual Studio Code. Mais vous pouvez utiliser n'importe quel logiciel pour créer ces codes. Ce logiciel est utilisé pour exécuter les exemples. Nous devons sélectionner la langue lors de la création d'un nouveau fichier dans le code Visual Studio. Sinon, il le reconnaîtra par défaut. Lorsque HTML est sélectionné comme langue, l'extension de fichier est créée automatiquement lorsque le fichier est enregistré sous n'importe quel nom. Nous avons simplement mis «!«Dans ce fichier après avoir sélectionné HTML comme langue et appuyé sur« Entrer ». Les balises de base du code «HTML» sont produites automatiquement.
La «table» du «corps» doit maintenant être créée. Le tableau est créé en créant d'abord le titre puis en utilisant le «
" étiqueter. La table que nous créons a cinq colonnes et six rangées. La première ligne de la table est la ligne de tête de la table, et nous utilisons «th» pour y ajouter des données. La balise «TD» est également utilisée pour mettre des données dans les cellules de la table avec «TR» pour les lignes de la table. Après cela, nous passerons au fichier CSS, qui sera utilisé pour définir la hauteur de la ligne de la table.
Style l'essentiel en nommant «H1» et en appliquant les propriétés CSS. Nous avons choisi «vert» pour le paramètre «couleur» qui est utilisé pour modifier la couleur du texte. La «font-famille» de cette rubrique est «algérienne» alors appliquez une «bordure» de «2px» sur toute la table, avec le type défini sur «solide» et la couleur de la frontière définie sur «violet». La «largeur» de la table est ensuite spécifiée avec «Auto» étant la largeur. Ensuite, nous utilisons la propriété «border-colapset» et définissons ceci sur «l'effondrement» pour effondrer la frontière de toute la table.
Après cela, nous devons créer la «bordure» pour toutes les cellules. Nous définissons la même bordure pour la cellule que nous utilisons pour le tableau ici. Le texte dans les cellules sera rendu en «vert» alors que nous définissons cette «couleur» dans la propriété CSS. Maintenant, nous définissons la hauteur de la ligne de la table. Donc, ici, nous mettons «TR» qui est utilisé pour les lignes et définissons la hauteur de la ligne en utilisant la propriété CSS «Line-Height». Nous définissons «30px» pour la hauteur de la ligne de la table. Cette hauteur s'appliquera à toutes les lignes de la table.
La sortie montre le tableau. Dans ce tableau, la hauteur des rangées de la table est de 30px chacun. Nous pouvons régler la hauteur de la ligne en fonction de notre choix. Nous le définissons sur 30px dans ce code et vous pouvez vérifier cela dans la sortie donnée.
Exemple n ° 2:
Le tableau que nous utilisons ici est le même que celui que nous avons utilisé dans l'exemple précédent. Mais nous allons modifier la valeur de la propriété de hauteur de ligne pour ajuster la hauteur de la ligne de la table. Nous allons changer la «Font-Family» de la police en «Times New Roman». Ensuite, nous appliquons certains attributs à l'ensemble du tableau et établissons la frontière. Tout d'abord avec une «bordure» de «2px» et sous forme «solide», ainsi que dans la couleur «vert». Nous utilisons le mot clé «Auto» pour la propriété «largeur» et le mot-clé «effondrement» pour la propriété «Border-Collapse».
Nous devons également établir la frontière des cellules. Donc, nous utilisons maintenant la propriété «Border» pour «Th» et «TR». Les valeurs sont définies sur «Green massif 2px» et le texte de la cellule est coloré «bleu». Ensuite, pour toutes les lignes à l'exception de la ligne d'en-tête, nous définissons la hauteur «20px» en utilisant la propriété «Line-Height». Mais nous voulons également régler la hauteur de la ligne de cap. Pour cela, nous utilisons le «TH» et utilisons ici et le fixons sur «80px». Lorsque ce tableau sera rendu sur l'écran de sortie, la hauteur de la ligne de cap sera «80px» et la hauteur des lignes restantes sera «20px».
Ici, vous pouvez voir que la hauteur de la première ligne est supérieure aux lignes restantes car nous avons réglé sa taille sur "80px" et la hauteur de l'autre ligne est "20px". C'est pourquoi il y a une différence entre la hauteur de la première ligne qui est la ligne d'en-tête et la hauteur des autres lignes.
Exemple # 3:
Dans ce tableau, nous donnons le nom à chaque ligne comme «T1», «T2», «T3», etc. Ensuite, nous définissons différentes hauteurs pour chaque ligne dans CSS. Nous appliquerons séparément la propriété «line-hauteur» sur chaque ligne en utilisant les noms des lignes que nous avons données ici dans ce fichier HTML.
Tout d'abord, nous stylisons l'en-tête qui apparaît sur le dessus pour le rendre attrayant en utilisant certaines propriétés. Nous utilisons la «couleur» qui est la propriété CSS et définissons la couleur «Corail clair» pour cette rubrique. La «Font-Family» de la tête est «algérienne». La bordure de la table est définie comme «marron». Nous l'avons réglé sur «solide», il apparaît donc comme une bordure de ligne continue et il est «2px» en largeur. Puis «effondrer» la bordure pour qu'elle s'affiche en une seule bordure.
Maintenant, nous créons une «frontière» autour de toutes les cellules de la table. Nous appliquons la même bordure que la bordure de la table. La même couleur «marron» et type solide de «2px». Le texte «couleur» est «noir». Maintenant, nous allons régler la hauteur de chaque ligne séparément en utilisant le nom des lignes. Nous utilisons «T1» avec «TR» qui représente la première ligne du tableau et définissait sa hauteur en utilisant la propriété «line-hauteur» et en mettant «20px» comme valeur. Ensuite, utilisez «T2» avec «TR» en plaçant «.«Entre eux qui est la deuxième rangée. La hauteur de cette ligne est définie sur «30px».
Après cela, nous avons «T3» qui est la troisième rangée. Nous l'écrivons avec «TD» pendant que nous écrivons le «T1» ou «T2», mais ici, sa hauteur est «50px». Nous définissons «70px» pour la quatrième ligne en utilisant «T4» et «90px» pour la cinquième ligne. En outre, définissez «120px» pour les sixième rangées et le nom de la sixième rangée est «T6». Maintenant, nous définissons différentes hauteurs de lignes pour les six rangées.
La différence de hauteur entre toutes les lignes est observée dans cette sortie donnée. Ici, la hauteur de la première ligne est plus petite que la deuxième ligne et ainsi de suite. Toutes les lignes sont de hauteurs différentes, donc de cette manière, nous pouvons régler la hauteur des lignes en CSS.
Conclusion:
Ce tutoriel a démontré quelle est la hauteur de la ligne de la table, comment régler la hauteur de la ligne de la table dans CSS et sur quelle propriété CSS est utilisée pour déterminer la hauteur de la ligne de la table. Comme nous l'avons dit, la hauteur de la ligne d'une table est mesurée de haut en bas de la ligne et a expliqué que la propriété «linéaire» de CSS est utilisée pour régler la hauteur des lignes. Nous avons utilisé cette propriété sur toutes les lignes combinées et sur la ligne de chaque table séparément. Nous avons parcouru divers codes de ce tutoriel, ainsi que les résultats de ces codes. Après avoir lu ce tutoriel à fond, vous réglerez la hauteur de la ligne de la table dans des projets.
