Explication détaillée de l'utilisation pratique de la mise en page des tableaux HTML_HTML/Xhtml_Production de pages Web

Quand les formulaires seront-ils utilisés

De nos jours, les tableaux

L'impression intuitive du tableau est qu'il est composé de plusieurs cellules soigneusement disposées et que les lignes et les colonnes sont clairement visibles. Cela peut être associé à Excel. En fonction du statut d'Excel en matière de traitement des données et de statistiques, nous pouvons comprendre la signification des tableaux de la page Web.

Pour faire simple, lorsque vous pouvez sentir intuitivement que plusieurs éléments sont disposés en lignes et en colonnes, l'utilisation d'un tableau vous facilitera grandement la tâche. Comme l'exemple de formulaire de candidature sur caniuse.com :

Calcul de la disposition des tables

L'utilisation des tableaux est très simple, mais parfois l'état final présenté par le tableau pour chaque grille peut ne pas être celui que vous souhaitez. Par exemple, si certaines grilles comportent des sauts de ligne, le tableau entier sera très inesthétique à cause des sauts de ligne. En particulier pour les tableaux utilisés pour la présentation des données, l'allocation de largeur est un sujet très important. Vous devrez peut-être calculer soigneusement la largeur totale du tableau pour les données que chaque colonne de la grille peut présenter.

En effet, le tableau a ses propres caractéristiques de disposition. Il suivra certains principes et déterminera sa disposition réelle par le calcul. Ensuite, cet article utilise un exemple de test de table réel pour explorer comment la table calcule sa propre disposition.
Déclaration initiale

Cet article se concentre uniquement sur les méthodes les plus courantes d'application des tableaux et ne répertorie pas toutes les situations. Différents navigateurs ont des interprétations différentes de certains concepts de tableaux, mais les calculs de mise en page sont fondamentalement les mêmes (s'il y a des différences, elles seront mentionnées séparément).

Les formulaires de test utilisés ensuite apparaîtront comme ceci (le contenu est tiré de Zero Track) :

En même temps, le tableau définira border-collapse:collapse et border-spacing:0;. C'est également la manière la plus courante d'appliquer des tables. Normalize.css utilise cette partie comme définition d'initialisation.
Deux algorithmes

L'attribut css table-layout défini sur l'élément

La différence entre ces deux algorithmes est de savoir si la disposition en largeur du tableau est liée au contenu des données dans le tableau. Cet article abordera le principe de calcul de mise en page du tableau dans ces deux valeurs.
Mise en page automatique des tables-auto

La caractéristique de la disposition automatique du tableau est que la disposition en largeur du tableau est liée à tout le contenu des données du tableau. Il doit obtenir tout le contenu du tableau pour déterminer la disposition en largeur finale, puis l'afficher ensemble.

De ce point de vue, le point clé est « lié au contenu ». Que se passe-t-il si le tableau définit une largeur fixe (500 px ici), mais que toutes les cellules n'ont pas de largeur définie (seules les largeurs définies par CSS sont discutées) ? Voyons les résultats :

Dans le tableau ci-dessus, les parties vierges sont écrites avec des espaces. Après comparaison, on retrouve les points suivants :

La colonne 2 et la colonne 3 ont la même largeur.
Le rapport entre la largeur de la première colonne et la largeur de toute colonne suivante semble être de 2:1.
Y compris les bordures et le remplissage, la largeur totale de toutes les colonnes est égale à la largeur définie par le tableau.

Chaque cellule n'a pas de largeur définie, donc la disposition en largeur est entièrement déterminée par les données de contenu spécifiques (informations textuelles). Comment expliquer de tels résultats ? Vous pouvez d'abord spéculer intuitivement sur cette logique :

Étape 1, sélectionnez celle avec le plus de contenu textuel (entendu comme la largeur la plus large du texte sans retour à la ligne) de chaque colonne en tant que "représentant".
Étape 2, comparez les largeurs des "représentants" de chaque colonne, puis attribuez-leur la largeur totale du tableau, bordures et remplissage compris, en fonction de leur relation proportionnelle à la largeur.

En nous référant à la logique ci-dessus, passons en revue le tableau précédent. Cela n’a-t-il pas de sens ? Notez qu'il a été dit plus tôt que le rapport de largeur "semble" être de 2:1. Jetons un coup d'œil à la version sans remplissage :

Utilisez l'outil de débogage frontal pour examiner de plus près la largeur des cellules ci-dessus. Vous constaterez que ce tableau est différent d'avant et que le rapport est très proche de 2:1 (oui, ce petit point. c'est à cause de la bordure, mais il n'y en a pas. La bordure ne permet pas de distinguer les colonnes).

On peut voir que lors de l'analyse de la relation du rapport de largeur, la largeur du contenu, le remplissage et la bordure seront pris en compte. Cela montre aussi qu'il ne s'agit pas d'une mesure du nombre de caractères, mais d'une mesure de la largeur que les caractères peuvent occuper sans saut de ligne (le 2:1 vient ici du fait que les caractères chinois sont d'égale largeur). Naturellement, utiliser du rembourrage sert simplement à créer une plus belle table :).

Que se passe-t-il lorsqu'il y a une définition de largeur ? Ce qui suit est un tableau avec les définitions de largeur pour certaines cellules :

Son code html correspondant est :

Les points suivants se retrouvent dans le tableau ci-dessus :

La largeur réelle d'une cellule d'une largeur de 5 px est de 13 px, ce qui correspond exactement à la largeur d'un seul caractère chinois. Les cellules avec des caractères chinois dans la même colonne organisent le texte sous la forme de la largeur de cellule minimale (donc, les lignes sont modifiées).
Une cellule dont la largeur est définie sur 200px a une largeur réelle de 200px, bien qu'il existe une définition d'une largeur de 70px dans la même colonne.
La troisième colonne, qui n'a pas de définition exacte de largeur, obtient finalement toute la largeur restante du tableau après avoir alloué les colonnes 1 et 2.

La conclusion est que lorsqu'il y a des colonnes avec des définitions de largeur et des colonnes sans définitions de largeur :

Si la largeur définie de la cellule est inférieure à la largeur minimale de disposition de son contenu (contrairement à la disposition sans enveloppe, la largeur requise par la cellule lorsque autant de lignes que possible sont disposées dans la cellule), alors le colonne dans laquelle se trouve la cellule, le contenu sera présenté dans le plus petit agencement possible.
Si la largeur du contenu de la cellule dans la même colonne (sans retour à la ligne, ce mot signifie cela plus tard) est inférieure à la définition de la plus grande largeur de la colonne, alors la largeur réelle de la colonne est égale à la définition de la largeur.
Pour les colonnes sans définition de largeur, le tableau attribuera d'abord la largeur aux colonnes avec définition de largeur, puis leur attribuera (encore une fois, le rapport entre elles dépend de la largeur du contenu).

Celle du devant sans définition de largeur peut être considérée comme le cas 1. Certaines colonnes ici ont des définitions de largeur, et d'autres non, ce qui peut être considéré comme le cas 2. Ce qui suit est le cas 3, c'est-à-dire lorsque toutes les colonnes ont des définitions de largeur :

Code html correspondant :

Dans le tableau ci-dessus, le remplissage est supprimé, la valeur peut donc être clairement définie par la largeur, et le rapport de largeur de ces trois colonnes est de 2:1:1. Il existe une autre condition ici, à savoir que la largeur du contenu de la cellule ne dépasse pas la valeur de définition de la largeur. Après les tests, IE7 et versions antérieures se comportent différemment des autres navigateurs lorsque le contenu dépasse la valeur de définition de largeur.

A partir de cet exemple de tableau, nous pouvons savoir que si toutes les colonnes ont des définitions de largeur et que la somme des valeurs de ces définitions de largeur est inférieure à la largeur du tableau, le tableau continuera à allouer la largeur correspondant à leur valeurs de définition de largeur. La largeur restante, proportionnelle à leur largeur, leur est également attribuée.

Ce qui précède est l'analyse de trois situations dans lesquelles la disposition automatique du tableau est définie et le tableau lui-même a une largeur fixe. Si le tableau lui-même ne définit pas la largeur, il y aura plus de situations, et cela sera lié au bloc contenant (détails) du tableau. S'il y a une opportunité appropriée dans le futur, nous en discuterons (le soi-). l'espace dit de l'article est limité...).
Disposition de table fixe-fixe

La caractéristique de la disposition du tableau fixe est que la disposition en largeur du tableau n'a rien à voir avec le contenu des données dans le tableau. Il suffit de recevoir les informations de la première ligne du tableau pour déterminer la disposition en largeur finale et. commencer à afficher.

La disposition du tableau fixe est « indépendante du contenu » et met l'accent sur la « première ligne ». Veuillez consulter l'exemple de tableau suivant :

Code html correspondant :

La logique de disposition de table fixe est beaucoup plus simple et s'exprime comme suit :

Ne prenez que les informations de la première ligne, en ignorant le contenu de toutes les cellules après la première ligne, et les définitions de largeur
Dans la première ligne, si les cellules ont des définitions de largeur, attribuez d'abord la largeur requise, puis la la largeur restante est uniformément répartie entre les cellules sans définition de largeur
La répartition de la largeur des cellules de la première ligne déterminera la disposition en largeur du tableau, et le contenu après la première ligne ne modifiera pas la disposition.

Il est également important de noter que lorsque vous utilisez une disposition de tableau fixe, vous devez définir la largeur de l'élément du tableau. Si sa largeur n'est pas définie (c'est-à-dire la valeur automatique par défaut), le navigateur utilisera à la place la disposition de tableau automatique. .
Déclaration de fin

En ce qui concerne les tableaux, il existe en fait des éléments tels que