Couche de table avec HTML et CSS
Lorsqu'un utilisateur conçoit une base de données pour gérer les données des employés dans une entreprise, la plupart des données et des enregistrements ne peuvent pas s'adapter à une seule feuille ou table. Pour gérer les données, l'utilisateur rend le défilement de la feuille. Il existe deux types de «défilable". Le premier est à défiler verticalement, et le second est un défilement horizontal. Un défilement horizontal permet à l'utilisateur de faire défiler le contenu de la fenêtre gauche ou à droite. Tandis que la barre de défilement verticale permet à l'utilisateur de faire défiler ou descendre le contenu.
Ce message indiquera:
- Méthode 1: Comment faire défiler horizontalement avec HTML / CSS?
- Méthode 2: Comment faire défiler les défilements verticalement avec HTML / CSS?
Méthode 1: Comment faire défiler horizontalement avec HTML / CSS?
Pour faire une table à faire défiler horizontalement avec le HTML / CSS, concevez d'abord une table en utilisant le « Pour des implications pratiques, essayez la méthode ci-dessous. Étape 1: Ajouter un conteneur div Dans le but de créer un conteneur div, ajoutez le «”Element dans le document HTML. Étape 2: Concevoir une table Ensuite, utilisez le « Étape 3: ajouter des données dans le tableau Ensuite, ajoutez les éléments suivants pour ajouter les données: On peut voir que le tableau a été ajouté avec succès: Étape 5: Conteneur Div Style Accéder au conteneur div en utilisant la valeur d'attribut définie avec le sélecteur d'attribut. Pour ce faire, le «#contenu principal"Est utilisé dans ce scénario: Ensuite, appliquez ces propriétés CSS: Sortir Étape 6: Faites un défilement horizontalement Maintenant, utilisez le nom de classe pour accéder à la table et appliquez les propriétés indiquées ci-dessous pour rendre la table horizontalement à défiler: Selon le code donné: Sortir Étape 7: table de style Dans le but de styliser la table, accédez au «tableau"Et les données de table avec"TD»: Ici: Étape 6: En-tête de table de style Accédez à la table de table avec l'aide de «e»: Appliquer le "Couleur de l'arrière plan»Propriété pour définir la couleur à l'arrière de l'élément. Méthode 2: Comment faire défiler les défilements verticalement avec HTML / CSS? Pour faire défiler la table verticalement avec le HTML / CSS, définissez la largeur du tableau Accédez à la table à l'aide du nom de la classe ".données de table»Et appliquez les propriétés mentionnées ci-dessous dans l'extrait de code: Ici: Sortir C'est tout sur le tableau de table avec HTML et CSS. Conclusion Pour faire un tour de table avec HTML et CSS, créez d'abord une table en utilisant le «" élément. Ensuite, définissez le "hauteur" et "largeur«De la table dans CSS et appliquez le«débordement«Propriété avec la valeur»faire défiler".
”Tag pour concevoir une table pour ajouter des données à la page HTML. Ensuite, ajoutez l'attribut suivant à l'intérieur de la balise de table:
»L'élément est utilisé pour définir les lignes dans le tableau. L'élément détermine une cellule comme l'en-tête d'un groupe de cellules de table. ”Est utilisé pour ajouter les données dans le tableau: Membres de l'équipe Sharqa Membres de l'équipe Adnan Membres de l'équipe USAMA Sharqa Adnan Usama Hafsa Areej Zara Farah Minhal Zainab Maria Anees Faiza Umar Taimoor Awais Farhan Hammad Aliyan Rafia Harouler Dérision Laiba Hadien Rafia Shahrukh Talha danois Nadia Mukh Nimra
Border: 3px groove bleu;
marge: 30px 60px;
rembourrage: 30px;
Largeur: 250px;
Hauteur: 360px;
débordement: défilement;
Couleur: RVB (66, 40, 233);
Color en arrière-plan: RVB (243, 164, 164);
Color en arrière-plan: RVB (193, 225, 228);
Largeur: 400px;
hauteur: 150px;
débordement: défilement;
" élément. Ensuite, accédez à la table dans CSS et postulez "la hauteur», Largeur et«débordement»Propriétés sur la table. À cette fin, la valeur du «débordement"Est spécifié comme"faire défiler», Ce qui rend l'élément défilable si les données de l'élément sont longueurs. Ce tutoriel a expliqué la méthode de conception de la table de défilement à l'aide de HTML et CSS.