Dans notre vie quotidienne, nous disons que la hauteur est la mesure de quelque chose du bas en haut, ou de la tête aux pieds. Nous avons la propriété «hauteur» dans CSS qui nous offre cette occasion de régler la hauteur de la table en fonction de notre choix. Nous pouvons le régler en pixels ou pourcentages. Lorsque nous définissons n'importe quelle valeur dans cette propriété «hauteur», notre tableau est ajusté dans cette hauteur donnée. Dans ce guide, nous utiliserons cette propriété pour régler la hauteur de la table et vous ferons savoir comment il définira la hauteur de la table. Nous allons définir la hauteur du tableau ici dans différents exemples.
Exemple 1
Nous devons d'abord concevoir le tableau dans le fichier HTML pour définir la hauteur de la table. Visual Studio Code est utilisé pour produire ce fichier HTML. Vous pouvez utiliser n'importe quel logiciel pour faire ces codes. Nous utilisons ce logiciel pour exécuter des exemples dans ce guide. Lors de la création d'un nouveau fichier dans Visual Studio Code, nous devons sélectionner la langue ou le reconnaître par défaut. Lorsque nous choisissons HTML comme langue, l'extension de fichier est générée automatiquement lorsque nous enregistrons le fichier sous n'importe quel nom.
Après avoir sélectionné HTML comme langue, nous tapons simplement "!"Dans ce fichier et appuyez sur" Entrer ",". Les balises fondamentales du code «HTML» sont formées automatiquement. Placez simplement la partie du corps dans le corps HTML. Le lien de fichier CSS est placé devant le corps dans la balise «tête». Nous créons la table en générant d'abord le titre puis en utilisant le «
" étiqueter. Il y a cinq colonnes et six rangées dans le tableau que nous faisons. La première ligne est la ligne de tête de la table et nous utilisons «TH» pour ajouter des données à la ligne de tête de la table.
Nous utilisons également la balise «TD» pour insérer des données dans les cellules de la table avec «TR» représentant les lignes de la table. Ensuite, nous passerons au fichier CSS qui sera utilisé pour définir la hauteur de ce tableau.
Style le titre en mentionnant «H1» et utilisez les propriétés de CSS ici. Nous définissons la «couleur» sur «rouge». La «Font-Family» de cette rubrique est «Times New Roman». Ensuite, stylisez toute la table en appliquant une «bordure» de «2px» et définissez son type sur «solide». La couleur de la bordure est «gris».
Ensuite, nous avons la «largeur» de la table. Nous utilisons «250px» pour la largeur. Ici, nous allons régler la «hauteur» de la table. Pour régler la hauteur de la table, nous utilisons la propriété «hauteur» de CSS. Lorsque nous définissons la valeur ici dans cette propriété «hauteur», elle définira la hauteur de la table. Nous définissons la «hauteur» de ce tableau sur «150px». Ainsi, lorsque cette table sera à l'écran, elle aura une hauteur «150px».
Après cela, nous mettons la bordure à une seule bordure pour toutes les cellules et les bordures de la table en utilisant la propriété "Border-Collapse" et en définissant cette propriété sur "Effondrer". Nous appliquons également la frontière sur les cellules et la rangée de la tête. Nous utilisons également la propriété «Border» avec «TH» et «TD» et définissons la même bordure que nous définissons pour la table. La frontière est en «gris» de type «solide» et «2px» dans sa largeur.
La table qui est donnée ci-dessous est à une hauteur «150px». Il gère son contenu à cette hauteur que nous avons mentionné dans le code CSS. Lorsque nous définissons la hauteur de la table, il sera créé à la même hauteur.
Exemple n ° 2
Le tableau que nous utilisons ici est le même que nous avons créé dans l'exemple précédent. Mais ici, nous allons changer la hauteur de la table en utilisant la propriété HEAUT. Nous définissons «bleu» pour le «cap» qui apparaît devant la table en haut de la page. Ensuite, définissez sa «famille de police» à «Calibri» et son poids est «plus audacieux». Ensuite, nous appliquons certaines propriétés à toute la table. Réglez la bordure en utilisant la «bordure» de «2px» et sous forme «solide» et dans la couleur «orange». La largeur de ce tableau est «300px». Cette fois et nous augmentons la hauteur du tableau ici à «250px». Le «border-colapset» est à nouveau «s'effondrer» dans cet exemple. Le réglage du «TH» et du «TD», en appliquant la même bordure que la table et la «couleur» «rouge», définit la couleur du texte écrit dans les cellules et les cellules de tête vers «rouge». La «Font-Family» de ce texte est «Arial».
Dans cette sortie, la hauteur du tableau augmente par rapport au tableau précédent que nous avons créé dans l'exemple 1 car nous modifions la hauteur ici dans le code CSS. Ensuite, nous avons augmenté la hauteur de la table.
Exemple n ° 3
Nous utilisons à nouveau le même tableau que celui que nous avons utilisé dans le premier exemple. Mais nous allons modifier la valeur de la propriété de hauteur pour ajuster la hauteur du tableau. Le «titre» qui s'affiche avant la table en haut est réglé sur «violet». Ensuite, changez la «famille de police» de la police en «algérien». 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». Cette fois, la largeur de la table est «automatique» tandis que la hauteur de la table est «100px."
Dans ce cas, la «border-colapse» est réglée avec «l'effondrement». Le «TH» et le «TD» sont définis à la même frontière que la table. La couleur du texte écrite dans les cellules et les cellules de cap est réglée sur «violet». Ce texte «Font-Family» est «Cambria».
La capture d'écran donnée est la sortie de ce code. Ici, vous pouvez voir que le tableau ajuste automatiquement sa largeur et que la hauteur de ce tableau donné est «100px».
Exemple n ° 4
Nous définissons le même tableau en utilisant différentes valeurs des propriétés. La «couleur» de la rubrique est «orange» et sa «famille de police» est «algérienne». Dans ce cas, la couleur de la bordure de toute la table est «violet». La «largeur» de toute la table est à nouveau «automatique» mais la «hauteur» de la table est «400px». La bordure de toutes les cellules est «violet» et le texte «couleur» est «rouge». La «Font-Family» du texte est «Sans-Serif».
Ici, dans la capture d'écran, vous pouvez remarquer la hauteur de la table. Le tableau est similaire à l'illustration ci-dessus. Mais dans l'illustration ci-dessous, la hauteur de la table est modifiée.
Exemple n ° 5
Dans ce code, nous avons réglé la tête vers la couleur «verte» de «algérien» «Font-Family». Ensuite, les propriétés de la table sont les mêmes dont nous avons discuté dans l'exemple précédent. Ici, nous définissons la hauteur du tableau en utilisant le pourcentage au lieu de Pixel. Nous allons ajuster la hauteur de la table à «50%». Maintenant, nous allons vérifier la sortie à quoi ressemble la table lorsque nous définissons sa hauteur en pourcentage.
Ici, la hauteur de la table est «50%» et sa largeur est automatique. Nous pouvons définir n'importe quelle valeur dans cette propriété «hauteur» de la table. Nous pouvons définir la hauteur du tableau correspondant à notre choix.
Conclusion:
Ce guide était destiné à vous montrer quelle est la hauteur de la table, comment régler la hauteur de la table dans CSS et quelle propriété CSS est utilisée pour régler la hauteur de la table. Comme nous l'avons discuté, la hauteur est la mesure du tableau de haut en bas. Nous avons parcouru plusieurs codes ici, et nous avons également inclus la sortie. Après avoir étudié à fond ce guide, vous pourrez régler la hauteur de la table dans CSS à l'avenir.
