Formatage de table

Tableau HTML: compréhension approfondie de la complexité et des styles

Cet article traite de la complexité des tables HTML et de son application des styles CSS en profondeur. Les tables HTML contiennent des éléments tels que le titre, le groupe de lignes et le groupe de colonnes, et l'ordre de rendu est: Tableau, groupe de colonnes, colonne, groupe de lignes, groupe de lignes et cellules. Le modèle de table HTML est centré sur le comportement et est contenu dans les lignes de la structure cellulaire.

Objet de formatage de table

CSS fournit dix valeurs d'attribut liées à la table display pour contrôler les styles de table. Ces valeurs peuvent également être appliquées à d'autres éléments, mais des éléments anonymes liés à la table peuvent être générés pour rendre correctement.

La largeur de la table et de ses colonnes est déterminée par deux algorithmes: l'algorithme de disposition de la table fixe et l'algorithme de mise en page de la table automatique. Le premier n'est pas affecté par le contenu de la cellule de table, tandis que le second nécessite de vérifier chaque cellule du tableau, ce qui peut prendre beaucoup de temps pour les grandes tables.

CSS2 définit deux modèles qui rendent les bordures des objets de table interne: modèles de bordure séparés et modèles de bordure pliés. Le modèle de bordure séparée permet uniquement aux cellules et aux tableaux d'avoir des frontières, tandis que le modèle de bordure d'effondrement permet aux bordures des lignes, des groupes de lignes, des colonnes, des groupes de colonnes et des tables se chevauchent de manière complexe.

Rendu de bordure séparée

rendu de bordure pliée

Propriétés des colonnes et des éléments de groupe de colonnes

Seules quelques propriétés peuvent être appliquées aux éléments avec display Valeur d'attribut table-column ou table-column-group: attribut de bord et la valeur d'attribut de visibilité collapse (d'autres valeurs de visibilité seront ignorées).

Algorithme de largeur de table

Contrairement aux autres boîtes au niveau des blocs, les tables avec largeur réglées sur auto et les marges horizontales de zéro ne rempliront pas leurs blocs contenant. La taille du tableau sera déterminée par son contenu. Vous pouvez utiliser margin-left et margin-right pour définir auto pour centrer la table horizontalement.

Il existe deux algorithmes pour déterminer la largeur de la colonne de la table: l'algorithme de mise en page à table fixe et l'algorithme de mise en page de table automatique, spécifié par l'attribut table-layout (les valeurs sont respectivement fixed et auto, respectivement, respectivement et la valeur initiale est auto). Si la largeur du tableau est spécifiée comme auto, un algorithme de mise en page de table automatique est généralement utilisé. Pour les tables au niveau des blocs (display réglées sur table), l'agent utilisateur peut, mais n'a pas à utiliser un algorithme de mise en page à table fixe.

Dans l'algorithme de disposition de la table fixe, la largeur des colonnes et des tables n'est pas affectée par le contenu des cellules de la table. La largeur de chaque colonne est déterminée comme suit:

La largeur de l'objet colonne avec
• n'est pas définie sur la largeur de la colonne. auto La largeur de la première cellule de ligne avec une largeur non
définit la largeur de la colonne à laquelle il appartient. Si les cellules s'étendent sur plusieurs colonnes, la largeur est répartie uniformément à ces colonnes.
• auto Les colonnes restantes allouent uniformément l'espace horizontal restant (moins n'importe quelle bordure ou espacement cellulaire).
La largeur du tableau est la plus grande valeur dans la valeur d'attribut de largeur de table et la somme des largeurs de colonne (plus l'espacement de la bordure ou de la cellule). Si la table est plus large que la colonne, l'espace supplémentaire est alloué à la colonne.

Ne pas omettre les cellules!

Étant donné que la première cellule de ligne est utilisée pour déterminer la largeur de la colonne, si un algorithme de disposition de table fixe est utilisé, aucune cellule ne doit être omise de la première ligne. Le comportement dans ce cas n'est pas défini dans la spécification CSS2.1.

Les algorithmes de mise en page de table automatique nécessitent généralement plusieurs traversées. La spécification CSS2.1 suggère un algorithme pour déterminer les largeurs de colonnes, mais les agents des utilisateurs n'ont pas besoin de l'utiliser. L'algorithme vérifie chaque cellule de toute la table et calcule les largeurs minimales et maximales nécessaires pour rendre chaque cellule. Ces valeurs sont ensuite utilisées pour déterminer la largeur de chaque colonne, qui à son tour peut déterminer la largeur du tableau lui-même.

Parce que chaque cellule doit être vérifiée, l'algorithme de mise en page de la table automatique peut prendre beaucoup de temps pour les tables avec un grand nombre de lignes et / ou de colonnes.

Algorithme de hauteur de table

Si la valeur de l'attribut de hauteur de table n'est pas

et que la hauteur spécifiée est différente de la somme de hauteur de ligne (plus l'espacement de bordure ou de cellule), le comportement n'est pas défini. La valeur en pourcentage de l'attribut de hauteur des lignes, des groupes de lignes et des cellules n'est pas définie. La propriété

de chaque cellule détermine comment elle est alignée dans la ligne. Seules les valeurs auto, vertical-align, baseline et top sont autorisées. Pour toute autre valeur, bottom sera utilisé. middle baseline

bordure de l'objet de table

Il existe deux modèles qui rendent les frontières des objets de table interne dans CSS2: le modèle de bordure de séparation et le modèle de bordure d'effondrement. Vous pouvez utiliser l'attribut

pour définir sa valeur sur

(valeur initiale) ou border-collapse pour sélectionner le modèle préféré. separate collapse Dans le modèle de bordure découplée, seules les cellules (et le tableau lui-même) peuvent avoir des frontières; Les bordures sont dessinées autour des cellules, séparées par les distances verticales et horizontales spécifiées par l'attribut

. Dans l'espace entre les bordures cellulaires, les arrière-plans des lignes, des groupes de lignes, des colonnes et des groupes de colonnes ne sont pas visibles. Seul le fond du tableau est visible dans l'espacement des cellules.

Lorsque la propriété border-spacing

est définie sur

, les cellules ne sont pas séparées et leurs frontières (et les frontières des lignes, des groupes de lignes, des colonnes, des groupes de colonnes et le tableau lui-même) seront effondrés dans un assez compliqué voie (ou chevauchement). border-collapse Les propriétés collapse

et

sont ignorées lors de l'utilisation du modèle de bordure effondrée. border-spacing empty-cells

(Ce qui suit est la partie FAQ. En raison des limitations de l'espace, seul le titre est conservé ici. Veuillez vous référer au texte d'origine pour le contenu complet)

• étapes de formatage de base pour les tables
• Comment rendre une table réactive
• comment fusionner les cellules de table
• comment ajouter des bordures à la table
• Comment changer la couleur d'arrière-plan d'une table
• comment aligner le texte dans le tableau
• Comment ajouter un titre à une table
• comment styliser la première ligne ou la colonne d'une table de différentes manières
• comment ajouter un effet de survol à un tableau
• Comment rendre une forme plus accessible

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!