Dans le passé, de nombreux concepteurs de sites Web aimaient implémenter leurs rendus Web dans des pages Web avec la mise en page de la table, mais cela rencontrerait un problème plus gênant, c'est qu'il serait assez difficile de déboguer et de maintenir au stade ultérieur. Désormais, de plus en plus de développeurs frontaux commencent à utiliser XHTML + CSS pour remplacer la disposition de la table d'origine pour compléter la disposition globale de la page Web, ce qui réduit non seulement le coût de développement et de maintenance du site Web, mais rend également le code plus sémantique. Cependant, cela ne signifie pas que le tableau a disparu à partir de maintenant. Il est toujours utilisé par de nombreuses personnes comme une nécessité pour la représentation des données sur les pages Web, telles que les listes de données d'informations personnelles, etc. En fait, l'utilisation des balises DL, DT et DD de HTML vous économisera plus de code et rendra le code plus cohérent avec la sémantique du contenu. Bien sûr, les tables ont également leur utilisation, c'est-à-dire des tables de données avec de grandes quantités de données, mais de petites listes de données et formulaires peuvent être complètement évitées!
Si vous utilisez toujours des tables traditionnelles pour créer des listes de données, veuillez continuer à examiner comment utiliser les balises DL, DT et DD de HTML pour vous faciliter le travail ...
Le code de liste de données d'un tableau traditionnel est illustré ci-dessous. Nous devons ajouter une balise TR à chaque ligne, puis ajouter une balise TD au titre et aux données. Étant donné que les balises sont TD, si vous souhaitez ajouter un style, vous devez ajouter un attribut de classe à chaque TD.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ballage> <tbody> <tr> <td class = title> nom: </td> <td class = text> squall li </td> </tr> <tr> <td class = title> Âge: </td> <td class = text> 23 </td> </tr> <tr> <td class = title> Gender: </td> <td class = text> mâle </td> </tr> <tr> <td class = title> jour de naissance: </td> <td class = text> 26 mai 1986 </td> </tr> </tbody> </ table>
|