Maison > Article > interface Web > Que puis-je faire pour vous sauver, ma table (Haiyu Blog)_HTML/Xhtml_Webpage Production
Que puis-je faire pour vous sauver, ma table (Haiyu Blog)_HTML/Xhtml_Webpage Production
- WBOYoriginal
- 2016-05-16 16:37:161074parcourir
La table occupait autrefois une position importante dans le développement Web - la mise en page Même dans le Web2.0, nous pouvons encore voir sa mise en page. Cependant, la technologie s'améliore constamment et la méthode de combinaison Div CSS a finalement frappé à la porte de la mise en page à l'ancienne et a déclenché une nouvelle vague de mise en page. Ce qui a suivi, ce sont de nouvelles et d'anciennes rancunes. De nombreuses personnes, qu'elles aient ou non des opinions sur la table, ont également commencé à critiquer la table - code gonflé, balises non sémantiques, méthodes d'écriture compliquées, etc. N'oubliez pas que les tableaux n'ont pas été créés à l'origine pour la mise en page, mais pour l'affichage des données. Abandonner la disposition de la table ne signifie pas abandonner la table elle-même. Que puis-je faire pour te sauver, ma table ?
Qu'est-ce qu'une table :
Table est aussi une table Html, support de données.
Ce qui suit est une manière relativement standard d'écrire du code de table :
| Date | 18< /td> 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 mentionner l'attribut table-layout:fixed table-layout : auto (par défaut) | Paramètres : auto : L'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. Étapes de travail du modèle de mise en page fixe : 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. Sauts de ligne pour les problèmes de table difficiles Utiliser des tableaux pour afficher des données présente parfois un casse-tête, c'est-à-dire afficher un certain texte sans sauts de ligne, notamment dans l'en-tête, qui est le plus utilisé. 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. Ici, vous pouvez consulter l'article Guide pour forcer les sauts de ligne et ne forcer aucun saut de ligne pour vous inspirer. L'article explique en détail comment résoudre les sauts de ligne dans différentes situations. 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. Quelques balises de table courantes mais peu familières tête, pied et corps Ces trois balises sont un produit de ce qu'on appelle xhtml, et vous donnent principalement la possibilité de regrouper des lignes dans un tableau. 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 balisethead représente l'en-tête du tableau HTML thead représente le pied de page HTML La balise tbody représente le corps du tableau HTML 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 : Copier le code Le code est la suivante :
|
|---|