Utiliser une table quand je ne devrais pas

Question

J'essayais de créer un badge CSS avec beaucoup de détails. Le contenu était comme ça.

**General Details:** 
ID no(6digit number) 
Date of Joining 
Group 
Sub Group 

**Personal Details** 
Name 
Date of Birth 
Gender 
**Referrer Details** 
Name of Referrer 
URI 
and so on 

J'ai essayé d'utiliser l'aide <ul> <li> et un style qui, j'ai essayé la même chose avec div et span, mais je ne pouvais pas obtenir un aspect cohérent. Finalement, j'ai dû aller à une table. Maintenant au moins les données apparaissent uniformément, mais je suis ennuyé parce que j'utilise des tables pour des données non tabulaires. Existe-t-il un moyen facile de concevoir des mises en page structurées avec CSS?

Answer 1

est-il un moyen facile de concevoir mises en page structurées avec css?

Seulement après avoir investi le temps, vraiment. CSS semble simple, mais en utilisant ses primitives pour composer des mises en page complexes prend un peu de pratique et une certaine familiarité avec les différentes bizarreries du moteur de rendu. C'est plus facile qu'avant, et grid systems peut aider, mais même ils nécessitent un certain investissement. Il n'y a pas royal road.

Si vous ne disposez pas de soutenir IE 6 & 7, vous pourriez vous en sortir avec l'aide de la CSS display rules (avec des valeurs table-cell, table-row et table). Cela vous donnera beaucoup de comportement de mise en page semblable à une table sans le balisage. Mais il est à noter que l'utilisation du balisage de table pour le balisage non-tabulaire n'est pas crossing the streams ou quoi que ce soit d'autre. Une grande partie de la perte de la sémantique est trop exagérée. Lynx a été en mesure d'utiliser heuristics to make distinctions between layout and semantic tables depuis au moins 1999. Certains lecteurs d'écran le font aussi. Ce qui est logique, vraiment - si nous avions attendu que les mises en page de table disparaissent avant que nous ayons des agents d'utilisateur qui pourraient travailler avec eux, nous commencerions juste. Vous n'avez pas besoin de vous sentir coupable si vous l'utilisez, vous ne retenez pas le web sémantique ni ne donnez des coups de pied aux personnes aveugles. Le positionnement CSS est un outil, et c'est souvent un bon outil, mais s'il ne correspond pas à vos objectifs et aux compétences/ressources dont vous disposez, n'hésitez pas à utiliser le balisage de table.

Si vous utilisez le balisage de table, je recommande de mettre class="layout" dessus. Il donne un moyen de mettre un peu de style de table dans votre feuille de style, signale à d'autres développeurs ce que vous faites, et pourrait même rendre plus facile pour les agents utilisateurs la distinction sémantique/mise en page un jour. En outre, ne pas imbriquer les tables. Vous pouvez presque toujours l'éviter si vous essayez vraiment, et bien qu'il soit possible d'avoir un balisage propre, facile à lire et éditer avec des tables, la probabilité que vous finissiez avec quelque chose de mal augmente rapidement si vous nichez.

Answer 2

Je pense que ces données sont assez tabulaires pour être mises dans une table, seuls les développeurs prétentieux vont se plaindre, les utilisateurs finaux ne connaîtront jamais la différence. De toute façon, il ne devrait pas prendre plus de 47 minutes pour faire une mise en page CSS. http://giveupandusetables.com/

Answer 3

Vous pouvez absolument placer chaque élément à l'emplacement désiré:

li.general { 
position:absolute; 
top: 10px; 
left: 20px; 
} 
...