CSS: la conception des tableaux. Exemples de conception

Faire des tables en utilisant CSS est une activité intéressante et importante. L'approche à ce sujet doit être compétente, avec la connaissance de toutes les possibilités de styles. En outre, vous devez posséder un sentiment de beauté, afin de ne pas effrayer les visiteurs avec votre créativité.

Dans les tableaux, vous pouvez transformer presque tout. La belle conception des tables CSS signifie utiliser la conception des bordures, l'arrière-plan de la table, le fond des cellules, l'écart entre elles et bien plus encore. Considérons le plus basique.

Limite du tableau

Le style CSS de la conception signifie toujours jouer avec une bordure. Toutes les tables ne sont pas limitées par défaut. Autrement dit, il est de 0 pixels. Mais cela peut être corrigé en utilisant la propriété de bordure.

Vous pouvez spécifier une bordure externe pour la table entière:

Tableau {bordure: 3px solide noir; }

Grâce à cette ligne, toutes les tables sur le site où ce style est utilisé auront une bordure noire. Notez que la bordure n'est que sur les bords, mais pas dans la table. Pour les cellules et les lignes, le cadre est spécifié différemment.

Th, td {border: 3px solid black;}

Vous pouvez spécifier toute épaisseur et couleur. Gardez à l'esprit que les bordures ne doublent pas lors de l'amarrage des cellules.

Le mot solide signifie un design solide. Vous pouvez spécifier d'autres valeurs.

Le plus souvent, le cadre solide est utilisé, car il semble plus attrayant et ne détourne pas l'attention du contenu principal du site.

La propriété de bordure peut également être spécifiée dans les directions. La limite ne peut être définie que pour les côtés supérieur, inférieur, gauche ou droit. Puisque dans certains cas, l'option avec un cadre pour la table entière n'est pas appropriée à la fois.

Tableau {border-top: 1px rouge plein; }

Vous pouvez donc définir le cadre uniquement pour le haut de la table. De même, pour toute autre partie, simplement au lieu de l'écriture supérieure: droite, gauche ou inférieure.

Titre de la table

Le titre de la table peut être spécifié à l'aide de la balise . Dans cette balise, vous pouvez écrire dans CSS beaucoup de propriétés pour plus de réglage fin. Dans CSS, la conception des tables est bonne car vous pouvez manoeuvrer les éléments que vous voulez.

Cet en-tête est affiché de la même façon qu'il est standard dans les livres (par exemple "Tableau 1").

Vous pouvez également spécifier l'emplacement de cet en-tête avec la propriété côté titre (en haut ou en bas). L'alignement de gauche ou de droite est spécifié par la propriété text-align.

Contexte de la table

L'arrière-plan de la table peut être n'importe quelle couleur ou motif. La couleur est définie par la propriété background-color. Les noms des propriétés correspondent pleinement à ceux utilisés dans la parole. Cela permet de mémoriser plusieurs fois plus facilement.

La couleur peut être spécifiée par nom et par différents encodages. En outre, vous pouvez spécifier ce qui suit:

• Transparent – la transparence de l'élément.
• Hériter – la couleur est identique à celle de l'élément parent.
• Initial est la valeur par défaut.

Une variante avec la transparence peut être utilisée dans les cas où toutes les tables dans le texte dans le fichier CSS sont réalisées dans une seule couleur, mais dans ce cas, il n'y a pas besoin.

En outre, l'arrière-plan peut être une image. Pour ce faire, le style prescrit la propriété background-image. Le chemin est indiqué comme ceci:

Url ('URL')

Le chemin d'accès au fichier peut être relatif ou absolu.

Un remplissage plus complexe peut être effectué avec un dégradé:

• Gradient linéaire ();
• Gradient radial ();
• Répétation-gradient linéaire () et répétitif-gradient radial () – répéter le dégradé.

Contexte de cellule

En plus de l'arrière-plan dans son ensemble, vous pouvez spécifier un fond alternatif en colonnes ou en lignes. Pour l'enregistrement, cette propriété est utilisée très souvent, car la séparation visuelle des lignes facilite la lecture de l'information.

En plus de l'entrelacement, vous pouvez spécifier le nombre d'une colonne ou d'une ligne spécifique. Par exemple, comme ceci:

• Tr: nth-child (pair) {…} – spécifie l'alternance des lignes;
• Tr: nth-child (1) {…} – spécifie la propriété d'une chaîne particulière;
• Td: nth-child (pair) {…} – indication de l'entrelacement des colonnes;
• Td: nth-child (1) {…} – spécifie la propriété d'une colonne particulière.

En plus de l'entrelacement et des chiffres, vous pouvez spécifier le premier (td: premier enfant) ou le dernier (td: dernier enfant).

Espacement entre les cellules

Dans CSS, la conception des tables vous permet de supprimer les espaces entre les cellules. Par défaut, ils sont. Par exemple, si vous définissez une image dans une table sans définir la distance entre les bordures, il y aura un tel résultat.

D'accord, il ne semble pas très agréable et pas pratique pour la lecture. Les utilisateurs seront dans le volant à cause de cela. Vous pouvez supprimer ces lacunes en écrivant ce qui suit dans le style de la table:

Border-collapse: effondrement

Mais il arrive aussi que la distance, au contraire, doit être augmentée. Et la taille des intervalles peut être spécifiée à la fois entre les colonnes et entre les lignes. Pour ce faire, spécifiez la valeur suivante (au lieu de l'effondrement):

Collage frontalier: séparé

Mais cette action indiquera que vous devez séparer les cellules. Comment les séparer, est indiqué par une propriété supplémentaire:

Espacement des bordures: 20px.

Si vous souhaitez spécifier une distance différente entre les lignes et les colonnes, deux valeurs sont spécifiées:

Espacement des bordures: 10px20px.

Différence dans les navigateurs

Gardez à l'esprit que dans CSS, l'apparence des tables peut être différente selon le navigateur. La situation est particulièrement mauvaise avec les anciennes versions, quelles innovations dans CSS ne prennent pas en charge.

Ci-dessus est un exemple de l'épaisseur du cadre pour les valeurs numériques.

Voici un exemple de l'épaisseur du cadre pour les constantes.

Les styles de trame sont également très différents.

Par conséquent, lors du développement, regardez toujours le résultat dans différents navigateurs.

Dans CSS, il est recommandé de faire la conception du tableau en vérifiant le type de navigateur. Le plus gros problème concerne les utilisateurs avec des versions anciennes d'Internet Explorer.

Les développeurs très avancés peuvent connecter des fichiers CSS complètement différents selon le navigateur. Et quelqu'un fait des chèques dans chacun ou un style particulier (classe).

La plupart des problèmes surgissent avec les ombres.

CSS: la conception de tableaux, des exemples

Le design peut être très diversifié. Tout dépend du site en général et de son design. Tout devrait être combiné et pas coloré. En outre, le goût du développeur joue également un rôle important. Le sentiment de beauté est différent pour tous.

Nous donnons des exemples de tableaux différents. La figure ci-dessus montre l'utilisation de l'inclinaison et du jeu avec l'arrière-plan et la couleur des bordures.

Beaucoup s'intéresseront à un exemple de belle conception soignée qui ne réduira pas les yeux aux utilisateurs. Cette option est appropriée dans presque toutes les situations.

Les bords peuvent être arrondis. Il a l'air très beau.

Conclusion

Comme vous pouvez le voir, pour créer l'apparence de tables dans CSS, il existe un grand nombre d'outils. Chaque paramètre possède également un grand nombre de variantes de valeurs. Si vous utilisez tout cela à la fois, vous pouvez créer des chefs-d'œuvre. Surtout si vous créez un design adaptatif pour tous les navigateurs.

La principale chose dans l'enregistrement n'est pas d'exagérer avec des effets. Tout doit être fait avec modération. Au début, les concepteurs de mise en page aiment expérimenter et utiliser toutes leurs connaissances à la fois. En conséquence, les tableaux sont des propriétés sursaturées. Essayez d'éviter ces erreurs.

En outre, certains paramètres peuvent interférer les uns avec les autres. Par exemple, il n'est pas nécessaire de spécifier la couleur de fond de la table, si, en même temps, il existe une image d'arrière-plan qui chevauche la couleur spécifiée.