Explication détaillée de l'utilisation réelle de la disposition de la table HTML

Quand la table sera-t-elle utilisée

Désormais, les tables <ballons> ne sont généralement plus utilisées pour la disposition globale des pages Web. Cependant, face à certaines conceptions spécifiques, telles que l'entrée de formulaire et la présentation des données, les formulaires peuvent être le choix le plus approprié.

L'impression intuitive d'une table est que les éléments sont soigneusement disposés par plusieurs cellules, qui peuvent clairement voir les lignes et les colonnes. Cela peut être associé à Excel. À partir de la position d'Excel dans le traitement des données et les statistiques, nous pouvons comprendre l'importance des tables dans les pages Web.

Autrement dit, lorsque vous pouvez sentir intuitivement que plusieurs éléments sont organisés dans le concept de lignes et de colonnes, l'utilisation de tables vous facilitera beaucoup. Par exemple, le formulaire de demande dans caniuse.com:

L'utilisation d'une table est simple, mais parfois la table se retrouve avec chaque grille, ce qui peut ne pas être ce que vous voulez. Par exemple, si certaines grilles ont des ruptures de ligne, la table entière semble très disgracieuse car la ligne se casse. Surtout 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 qui peuvent être présentées dans chaque colonne de grilles.

En effet Ensuite, cet article utilise des exemples de test de table réels pour explorer comment les tables calculent leur propre disposition.

Cet article se concentre uniquement sur les méthodes les plus courantes d'application des tables et ne répertorie pas tous les cas. Différents navigateurs ont des analyses différentes de certains concepts de tableaux, mais les calculs de mise en page sont fondamentalement cohérents (s'il y a des différences, ils seront mentionnés séparément).

Les prochains formulaires de test seront présentés de cette manière (le contenu est tiré de la trajectoire de zéro):

En même temps, le tableau définira le frontière-effondrement: effondrement; et l'espacement des bordures: 0;. Il s'agit également de la pratique la plus courante pour appliquer des tables, et Normalize.css utilise cette partie comme définition d'initialisation.

Le tableau d'attribut CSS-Layout défini sur l'élément <baling> déterminera l'algorithme appliqué au tableau pendant le calcul de la disposition. Il a deux valeurs, automatique et fixe. Dans les cas normaux, la valeur par défaut est utilisée.

La différence entre ces deux algorithmes est de savoir si la disposition de la largeur du tableau est liée au contenu des données du tableau. Cet article discutera du principe du calcul de la disposition des tableaux lors de la prise de ces deux valeurs.

Disposition automatique de la table -Auto

La caractéristique de la disposition automatique du tableau est que la disposition de la largeur du tableau est liée à tout le contenu des données du tableau. Il doit obtenir tout le contenu du tableau avant que la disposition de la largeur finale puisse être déterminée puis affichée ensemble.

De cette façon, le point clé est que le contenu est pertinent. Et si le tableau définit une largeur fixe (500px ici) et que toutes les cellules ne définissent pas la largeur (en discutant uniquement des CSS définissent les largeurs), que se passe-t-il? Voir les résultats:

Dans le tableau ci-dessus, la pièce vierge est écrite avec & nbsp; espaces. Après la comparaison, nous pouvons trouver les points suivants:

Les 2e et 3e colonnes ont la même largeur.

La largeur de la colonne 1 et le rapport de largeur de toute colonne suivante semble être 2: 1.

Ajoutez la bordure et les marges intérieures, et les largeurs de toutes les colonnes sont résumées, égales à la largeur définie par le tableau.

Il n'y a pas de largeur définie dans chaque cellule, donc la disposition de la largeur est entièrement déterminée par les données de contenu spécifiques (informations textuelles). Comment expliquer un tel résultat? Vous pouvez d'abord déduire intuitivement une telle logique:

Étape 1: Sélectionnez le texte avec le contenu le plus texte de chaque colonne (comprenez que si le texte n'enveloppe pas la ligne, le texte occupe la largeur la plus large) en tant que représentant.

Étape 2: Comparez les largeurs des représentants de chaque colonne et attribuez-leur la largeur totale du tableau, y compris les frontières et les marges intérieures en fonction de leur relation proportionnelle de largeur.

Se référant à la logique ci-dessus, puis en regardant le tableau précédent, y a-t-il une raison? Notez que le rapport de largeur mentionné précédemment semble être 2: 1, sera-t-il? Jetons un coup d'œil à la version qui supprime les marges intérieures:

Utilisez l'outil de débogage frontal pour regarder la largeur des cellules ci-dessus, et vous constaterez que ce tableau est différent avant, et le rapport est très proche de 2: 1 (oui, il y a aussi un petit point à cause de la bordure, mais sans la frontière, vous ne pouvez pas distinguer les colonnes).

On peut voir que lors de l'analyse de la largeur de la relation proportionnelle, la largeur du contenu, la marge intérieure et la frontière seront prises en compte. Cela montre également que ce n'est pas une mesure du nombre de mots, mais une mesure de la largeur que les mots peuvent occuper dans l'état de rupture de ligne (le 2: 1 ici vient du fait que les caractères chinois sont égaux en largeur). Utilisez les marges intérieures naturellement juste pour faire une plus belle table :).

Que se passe-t-il lorsqu'il y a une définition de largeur? Voici une table avec une largeur définie dans une partie des cellules:

Son code HTML correspondant est: