Qu'est-ce qu'une table :
table est une table HTML, support de données.
Ce qui suit est une manière relativement standard d'écrire du code de table :
Un tableau HTML simple se compose de l'élément table et d'un ou plusieurs éléments tr, th ou td. L'élément tr définit la ligne du tableau, le ème élément définit la cellule d'en-tête et l'élément td définit la cellule du tableau. L'attribut border spécifie la largeur de la bordure du tableau, cellpadding spécifie l'espace entre le bord de la cellule et son contenu et Cellpacing spécifie l'espace entre les cellules. Nous définissons généralement ces trois attributs sur 0 manuellement pour éviter les différences entre les navigateurs. L'attribut width spécifie la largeur du tableau, car la largeur du tableau change avec la largeur des éléments internes. Dans les situations courantes, nous souhaitons que le tableau ait la même largeur que le conteneur externe, donc la largeur par défaut est souvent définie. à 100% pour remplir le récipient.
Je dois dire l'attribut table-layout: fixed
table-layout: auto (par défaut) |
Paramètres :
auto : Algorithme automatique par défaut. La disposition sera basée sur le contenu de chaque cellule. Le tableau ne sera affiché que lorsque chaque cellule sera lue et calculée, ce qui est très lent.
fixe : algorithme de mise en page fixe. Dans cet algorithme, la disposition horizontale est basée uniquement sur la largeur du tableau, la largeur de la bordure du tableau, l'espacement des cellules et la largeur des colonnes, et n'a rien à voir avec le contenu du tableau. La vitesse d'analyse est rapide.
Étapes de travail du modèle de mise en page fixe :
1. Tous les éléments de colonne dont la valeur d'attribut de largeur n'est pas automatique définiront la largeur de la colonne en fonction de la valeur de largeur.
2. La largeur de cellule de cette colonne dans la première ligne du tableau, définissez la largeur de cette colonne en fonction de la largeur de la cellule. Si la cellule s'étend sur plusieurs colonnes, la largeur est répartie uniformément entre les colonnes.
3. Après les deux étapes ci-dessus, si la largeur de la colonne est toujours automatique, sa taille sera automatiquement déterminée pour rendre sa largeur aussi égale que possible. À ce stade, la largeur du tableau est définie sur la valeur de largeur du tableau ou sur la somme des largeurs de colonnes (la valeur la plus grande étant retenue). Si la largeur du tableau est supérieure à la somme de ses largeurs de colonnes, divisez la différence par le nombre de colonnes et ajoutez la largeur résultante à chaque colonne.
Cette méthode est rapide car toutes les largeurs de colonnes sont définies par la première ligne du tableau. Les cellules de toutes les lignes après la première ligne sont dimensionnées en fonction de la largeur de colonne définie par la première ligne. Les cellules de ces dernières lignes ne modifient pas la largeur de la colonne. Cela signifie que toutes les valeurs de largeur spécifiées pour ces cellules seront ignorées.
Généralement, lors de la création d'un tableau HTML complexe, vous constaterez parfois que peu importe la façon dont vous ajustez la largeur de chaque colonne dans la première ligne, la largeur de la colonne changera toujours de manière inattendue (comme une longue chaîne de texte anglais, et s'il y a il n'y a pas d'espace au milieu, vous souhaitez limiter la largeur de cette colonne, de sorte que le long texte soit obligé de s'enrouler sans casser le tableau, et souvent le résultat est que la largeur appropriée ne peut pas être ajustée, peu importe la façon dont vous l'essayez) . En ce moment, en désespoir de cause, vous pouvez utiliser table-layout:fixed.
Balises de tableau courantes mais peu familières
thead, tfoot et tbody
Ces trois balises sont les produits de ce qu'on appelle xhtml, qui vous permettent principalement d'éditer les lignes du tableau. Faites des groupes. Lorsque vous créez un tableau, vous souhaiterez probablement avoir une ligne d'en-tête, des lignes contenant des données et une ligne de total en bas. Cette division donne au navigateur la possibilité de prendre en charge le défilement du corps du tableau indépendamment des en-têtes et des pieds de page. Lorsque de longs tableaux sont imprimés, l'en-tête et le pied de page du tableau peuvent être imprimés sur chaque page contenant les données du tableau. Personnellement, je pense que son objectif principal est adapté à l’optimisation de l’affichage de très longs tableaux. La balise
thead représente l'en-tête du tableau HTML
l'en-tête du tableau. Vous pouvez utiliser un style distinct pour définir l'en-tête du tableau, et vous pouvez imprimer l'en-tête du tableau en haut de. la page lors de l'impression. La balise
thead représente le pied de page HTML
Le pied de page du tableau. Le pied de page (note de bas de page ou note de tableau) peut être défini à l'aide d'un style distinct, et la page peut être imprimée en même temps. partie inférieure de la page lors de l'impression du pied.
La balise tbody représente le corps du tableau HTML
Lorsque le navigateur affiche le tableau, il télécharge généralement le tableau dans son intégralité puis l'affiche dans son intégralité. Par conséquent, lorsque le tableau est très long, vous pouvez. utilisez tbody pour l’afficher en segments.
Remarque : si vous utilisez les éléments thead, tfoot et tbody, vous devez tous les utiliser. L'ordre dans lequel ils apparaissent est : thead, tfoot, tbody, afin que le navigateur puisse restituer l'en-tête et le pied de page avant de recevoir toutes les données. Vous devez utiliser ces balises à l'intérieur de l'élément table, et thead doit contenir la balise tr. Par conséquent, la manière la plus standard d’écrire un tableau est le code suivant :
Personnellement, je trouve ce truc inutile, inutile et dommage de le jeter. Les petits projets peuvent ajouter une certaine sémantique, mais comme ils ont été confrontés au dilemme d'avoir plusieurs en-têtes différents affichés dans le même tableau, ce qui limite le développement futur, les projets formels utilisent ces balises avec prudence du point de vue de l'évolutivité.
col et colgroup
sont également des produits de xhtml Ils sont puissants et compatibles. La balise
col définit les valeurs d'attribut pour une ou plusieurs colonnes du tableau. La balise
colgroup est utilisée pour regrouper les colonnes du tableau pour le formatage.
Leur fonction principale est de contrôler la largeur des cellules, ce qui évite d'avoir à définir chaque cellule séparément. Dans le passé, nous définissions souvent la largeur sur th ou td dans la première ligne pour spécifier la largeur de chaque colonne. et col peuvent non seulement définir la largeur mais également définir d'autres attributs en même temps. Par exemple, vous pouvez utiliser col pour contrôler la somme des largeurs de plusieurs colonnes, et vous pouvez également contrôler la couleur d'arrière-plan de cette colonne. Mais l'idéal est complet, et la réalité est la colonne vertébrale. Comme mentionné précédemment, plus la fonction est grande, plus la compatibilité est grande. D'après les tests existants, seules deux applications peuvent jouer un rôle et assurer la compatibilité entre col et colgroup : largeur et arrière-plan. Pour la largeur, je préfère personnellement utiliser la méthode conventionnelle, définir la largeur dans la première ligne et garantir la largeur de la colonne. Quant au fond, dans la pratique, il est rare que des tableaux utilisent des fonds différents sur de grandes surfaces. Par conséquent, je pense personnellement : ne l’utilisez pas autant que possible.
Où utiliser table
Personnellement, je pense que dans un conteneur où les données sont très denses et très sérialisées, il est correct d'utiliser table. L'exemple le plus courant est notre page commune de règlement des commandes, qui répertorie les détails de votre commande : nom du produit, prix unitaire, quantité achetée, sous-total du montant, frais d'expédition, etc. Enfin, il y a un résultat du montant final de la commande au en bas, tableau On peut dire que c'est comme un poisson dans l'eau ici, et il a obtenu l'effet magique d'un support de données.
Retour à la ligne des subtilités d'un tableau
Parfois, il y a un mal de tête lors de l'affichage de données dans un tableau, c'est-à-dire l'affichage d'un certain texte sans retour à la ligne, en particulier lorsqu'il est utilisé dans les en-têtes de tableau. la plupart des endroits. En fait, le problème que vous rencontrez n'est pas le retour à la ligne, mais la compatibilité du navigateur qui le sous-tend rend le retour à la ligne beaucoup plus difficile.
De manière générale, la méthode recommandée pour envelopper les lignes dans un tableau est la suivante : définissez d'abord table-layout:fixed pour le tableau. Fondamentalement, après avoir défini cet attribut, le problème de renvoi à la ligne de base peut être résolu sans td dans le tableau. En raison de la quantité de chaque contenu à l'intérieur, une situation de concurrence pour la largeur des autres td et th se produit. Si vous rencontrez toujours le problème des sauts de ligne forcés à ce stade, ajoutez une couche de div à l'intérieur du td, puis utilisez les deux méthodes CSS word-wrap:break-word; word-break:break-all; problème de saut de ligne.
Directives sur les sauts de ligne forcés et les sauts de non-ligne forcés
Le problème des sauts de ligne forcés et des sauts de non-ligne forcés me dérangeait autrefois. Chaque fois que je rencontrais le problème des sauts de ligne, c'était le cas. début de souvenirs douloureux. Maintenant, j’apprends enfin de la douleur. Travaillons ensemble pour résoudre ce problème de longue date et tenace.
Attributs utilisés pour forcer les sauts de ligne et ne forcer aucun saut de ligne
Nous utilisons généralement trois attributs CSS pour contrôler les sauts de ligne : word-wrap ; word-break ; On peut dire que ces trois attributs ont été créés spécifiquement pour le saut de ligne de texte. Il faut d’abord savoir à quoi servent ces trois attributs :
syntaxe de retour à la ligne
retour à la ligne : normal (par défaut) | break-word
Chaque navigateur peut le reconnaître
Paramètres :
normal : autorise contenu pour s'étendre au-delà des limites spécifiées du conteneur.
break-word : le contenu dépassera les limites. Le saut de mot sera déclenché si nécessaire (remarque : veuillez distinguer clairement que le saut de mot et le saut de mot sont des choses différentes, l'un est un attribut et l'autre un paramètre).
Description :
word-wrap contrôle s'il faut « couper les lignes pour les mots », et définit ou récupère s'il faut couper les lignes lorsque la ligne actuelle dépasse la limite du conteneur spécifié. Il n’y a aucun problème avec le chinois, ni avec les phrases en anglais. Mais pour de longues chaînes d’anglais, cela ne fonctionne pas.
Exemple :
Le mot félicitation appartient à une longue chaîne de mots anglais. word-wrap:break-word traite le mot entier dans son ensemble si la fin de la ligne n'est pas assez large pour afficher le mot entier. , il placera automatiquement le mot entier sur la ligne suivante, sans tronquer les mots, c'est pourquoi cela ne fonctionne pas pour les longues chaînes de texte. word-wrap:normal est la valeur par défaut et les mots anglais ne sont pas divisés.
Conclusion :
Le champ d'action concerne uniquement les éléments standard au niveau du bloc tels que div. Les éléments de table tels que th et td sont reconnus mais n'ont aucun effet (si td, le retour à la ligne plus large peut fonctionner sous IE). Efficace, mais du point de vue d'une compatibilité totale et d'une mémoire pratique, la conclusion précédente prévaudra).
syntaxe de saut de mot
syntaxe de mot : normal (par défaut) | break-all
Paramètres :
normal : selon les langues asiatiques et des règles non textuelles pour les langues asiatiques qui autorisent les sauts de ligne dans les mots.
break-all : ce comportement est le même que celui normal dans les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique.
garder tout : comme d'habitude pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Idéal pour les textes non asiatiques contenant une petite quantité de texte asiatique.
Explication :
word-break:break-all, est un mot de rupture. Lorsqu'un mot atteint une limite, la lettre suivante passe automatiquement à la ligne suivante. Il résout principalement le problème des longues chaînes d'anglais (cela compense simplement le défaut ci-dessus selon lequel word-wrap:break-word ne fonctionne pas pour les longues chaînes de texte).
Exemple :
En continuant avec ce qui précède, le mot félicitation appartient à une longue chaîne de mots anglais. Word-break:break-all tronquera le mot et la fin de la ligne deviendra quelque chose comme conra (le partie avant de la félicitation). Suivant La partie backend de la tulation comportementale (conguatulation).
word-break:keep-all fait référence aux mots continus chinois, japonais et coréens. C'est-à-dire que si vous utilisez uniquement ce temps sans retour à la ligne, les chinois ne s'enrouleront pas. (Les phrases anglaises sont normales.)
Conclusion :
ne fonctionne que sur les éléments standard de niveau bloc tels que div. Les éléments de table tels que th et td sont reconnus mais n'ont aucun effet (testé sous Chrome word-break:break-. tout est efficace, mais du point de vue d'une compatibilité complète et d'une mémoire pratique, la conclusion précédente prévaudra). Firefox et Opera ne peuvent pas reconnaître le saut de mot, sans parler de l'effet de l'utilisation du saut de mot dans th et td sous Firefox.
syntaxe des espaces blancs
espace blanc : normal (par défaut) | pre nowrap
Paramètres :
normal : par défaut. Les espaces blancs sont ignorés par le navigateur.
pre : Les espaces vides seront conservés par le navigateur. Elle se comporte comme la balise pre en HTML.
nowrap : Le texte ne sera pas renvoyé à la ligne. Le texte continuera sur la même ligne jusqu'à ce que la balise br soit rencontrée.
Remarque :
Pour l'attribut pre, plusieurs caractères d'espacement consécutifs en HTML seront fusionnés, puis afin d'éviter qu'ils ne soient fusionnés (l'occasion la plus courante est d'indiquer l'indentation du texte du code), l'espacement Les caractères seront continués. Il est conservé sans que nous ayons besoin d'ajouter des styles et des balises supplémentaires pour contrôler son indentation et son retour à la ligne. Le principe de la balise pre est le même. Il y a un espace blanc : pre par défaut.
Pour l'attribut nowrap, c'est l'essentiel pour forcer l'absence de saut de ligne. Généralement, cet attribut est utilisé pour forcer l'absence de saut de ligne. Il n'y a aucun problème dans les div et td de Firefox, ainsi que dans les div d'IE. Le seul défaut est qu'il y a un problème dans le td d'IE. Si le td ne spécifie pas de largeur, nowrap est toujours valide si le td a une largeur et qu'il n'y a pas de ponctuation ou d'espaces dans le texte (comme une longue chaîne de). texte chinois), nowrap ne fonctionnera plus efficacement. La solution consiste à ajouter word-break:keep-all; pour résoudre ce problème.
Résumé des sauts de ligne forcés :
Si vous devez forcer les sauts de ligne dans des éléments standard au niveau du bloc tels que div, la solution la plus courante est word-wrap:break-word-; break:break- all; L'inconvénient de cette méthode est que si la fin de la ligne se trouve être une longue chaîne de mots anglais, le mot sera déchiré d'une manière maladroite (et FF ne reconnaît pas la coupure de mot, mais ne déchirera pas le mot). Personnellement, je pense que si vous mettez une longue chaîne d'adresses similaires aux URL dans ce div, alors utiliser cette solution est un très bon choix (Remarque : étant donné que FF ne reconnaît pas les sauts de mots, il n'y a aucune garantie que les mots de l'URL seront soigneusement brisé à la fin de chaque ligne, mais c'est aussi un choix impuissant). Si vous ne placez pas une longue chaîne en anglais qui peut être brisée, comme une URL, mais une phrase en anglais, utilisez word-wrap:break-word;. Quant au word-wrap:break-word; overflow:hidden; que j'ai vu sur Internet, il serait compatible avec IE et FF, mais après des tests personnels, il ne semble pas avoir d'effet particulier.
Résumé du retour à la ligne forcé sans ligne :
Le problème du retour à la ligne forcé sans ligne est relativement facile à analyser comme indiqué ci-dessus, utilisez white-space:nowrap, les div et td de Firefox. De même que dans le div d’IE, il n’y a aucun problème. Le seul défaut est qu'il y a un problème dans le td d'IE. Si le td ne spécifie pas de largeur, nowrap est toujours valide si le td a une largeur et qu'il n'y a pas de ponctuation ou d'espaces dans le texte (comme une longue chaîne de). texte chinois), nowrap ne fonctionnera plus efficacement. La solution consiste à ajouter word-break:keep-all; pour résoudre ce problème. Pour résumer, le moyen le plus sûr consiste à placer une autre couche de div entre le texte et le td, puis à utiliser nowrap, ce qui ne forcera aucun saut de ligne. Notez qu'à ce stade, il est très probable que trop de texte déborde du conteneur, vous devez donc ajouter un overflow: caché pour empêcher le conteneur de déborder, afin qu'il puisse être compatible avec différents navigateurs.
Après avoir tant résumé, j'ai découvert qu'il semble que ce ne soient que quelques attributs qui équilibrent les différentes compatibilités du navigateur. Il ne semble pas y avoir de solution parfaite qui puisse être entièrement compatible avec tous les navigateurs. Essayez simplement de garder l'affichage du navigateur cohérent autant que possible. Si vous pensez toujours que vous devez être compatible avec tous les navigateurs, alors la solution finale consiste à utiliser JS. Dans les prochains articles, j'envisagerai de répondre à cette exigence avec le plus petit coût JS, mais cela n'entre pas dans le cadre de cet article.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
