Quel serait le meilleur moyen de faire cette mise en page (css ou tables)?

Je développe une application où il y a des abonnements disponibles. Je voulais savoir quelle serait la meilleure façon de structurer les données comme le schéma suivant (en utilisant des tables ou des css). (Désolé, je suis au travail et à froid pas poster l'image de ce que je veux sur un service d'hébergement d'images gratuit.)Quel serait le meilleur moyen de faire cette mise en page (css ou tables)?

 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯| 
| Location: xxxxxxxxx-xxxx-xxx     Maximum subscription date: 12-11-2009 | 
| Begin date: 12-15-2009            Cost: $ 150  | 
| Duration: 2 Days                 | 
| Status:  Confirmed with remaining places       [Subscription] | 
|                      | 
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ 
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯| 
| Location: xxxxxxxxx-xxxx-xxx     Maximum subscription date: 12-12-2009 | 
| Begin date: 12-15-2009            Cost: $ 150  | 
| Duration: 2 Days                 | 
| Status:  Confirmed with remaining places       [Subscription] | 
|                      | 
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Je pensais à des tables, mais je ne suis pas sûr que ce soit la façon la plus appropriée pour ce.

Source

2009-04-28 Martin

Vous pouvez le faire avec CSS, mais pensez au type de données que vous essayez de présenter: c'est vraiment un tableau de données, essentiellement. Donc, je recommanderais d'utiliser une table pour cela. Vraiment, les tables sont très critiquées, mais la seule fois où vous devez éviter les tables, c'est quand vous les utilisez spécifiquement pour la mise en page (pas pour présenter une table, par exemple). L'utilisation de tables pour ce type de situation serait une utilisation correcte des tables.

Source

2009-04-28 18:10:00 hbw

+1, je ne peux pas être plus d'accord Je déteste personnellement les tables, parce qu'ils sont misérables pour travailler dans CSS et javascript, mais si tout ce que vous faites est l'affichage de données tabulaires, allez-y – jvenema

Peu importe combien je déteste les tableaux pour la mise en page, je dois dire des tables.

Source

2009-04-28 18:08:01

Tables, pour sûr –

Tables pour le contenu car il est essentiellement des données tabulaires, mais assurez-vous de faire bon usage de TH pour les titres tels que le statut, la durée, etc.

Source

2009-04-28 18:10:15

dépend de ce que vous voulez

Le exemple dans votre question en ce moment ressemble à une boîte avec quelques lignes de texte, puis une autre boîte, etc

Si c'est ce que vous voulez, je vous suggère de divs style avec CSS. Si c'est plus clairement une disposition de "colonnes et rangées", rendez-vous avec des tables.

Source

2009-04-28 18:15:52

Donc, vous ne voyez pas de relation entre "Date de début" et "12-15-2009", ou "Durée" et "2 jours"? –

Ce n'est pas que je ne vois pas de relation, mais s'il veut que ça ressemble à la façon dont il l'a dessiné, ce n'est pas une disposition de table traditionnelle. La façon de présenter les données est un tableau. –

Cela dépend aussi de la fonction. Peut-être que chacune de ces choses aura de petits boutons d'action pour que l'utilisateur clique, par exemple. –

Je fais presque la même chose sous une forme que je développe en ce moment et j'utilise une liste de définition. par exemple:

<dl> 
    <dt>Location:</dt> 
    <dd>xxxxxxx-xxxxx</dd> 
    .... 
</dl>

Il est un peu plus difficile de faire de cette façon, mais le code semble plus propre IMHO. (Pour moi, il est autorisé à le faire avec des tables trop)

Source

2009-04-28 18:18:28 Drevak

Cela n'aide pas vraiment dans cette question spécifique. C'est le style, pas le balisage sémantique qui pose problème. – ceejayoz

@ceejayoz de quoi parlez-vous? il demande la façon la plus appropriée de le faire. Je lui donne une autre option, tout comme le gars avant moi lui dit avec divs ... – Drevak

données tabulaires d'affichage dans les tableaux

Source

2009-04-28 18:18:49

Je pense que les gens ont besoin pour obtenir plus de réactions négatives instinctives à l'aide de balises de table dans leur (x) html. C'est un ensemble de balises valide, et il rend très bien les données "carrées". Si vous allez vous y opposer avec véhémence, soyez intelligent et spécifiez-le et le reste est inapproprié pour utilisations sémantiquement inappropriées. N'utilisez pas de tableau pour disposer votre logo et votre en-tête. Ce ne sont pas des données tabulaires. Est-ce que vous affichez des données d'une manière carrée qui montre les relations entre les lignes et les colonnes d'information? Alors allez-y et utilisez des tables!

Pour votre usage particulier, je recommanderais, étant donné ma compréhension du balisage sémantique (merci Dan C.!) Soit une table ou une liste de définition. Ceci décrit précisément ce que vous essayez d'écrire.

Source

2009-04-28 18:26:11

Personnellement, j'évite les tables, sauf si les données sont très pilotées par des tables (résultats de type Excel). Dans ce cas, une collection de divs, ou même li basé serait probablement le meilleur.(Balisage ci-dessous psuedo)

UL 
    LI 
    DIV.left 
     DL 
     DT LABEL {label} /LABEL /DT 
     DD {detail} 
     /DL 
     ... 
    /DIV.left 

    DIV.right 
     ... 
    /DIV.right 

    DIV.subscribe ... /DIV.subscribe 
    /LI 
    ... 
/UL

REMARQUE: l'utilisation de l'étiquette, parce que j'utilise une technique similaire pour les formulaires d'entrée. Être cohérent aide à réduire les css inutiles. Le .left et .right sont simplement pour flotter, je voudrais que le positionnement de LI soit relatif, et élimine le style spécifique au CSS et aux balles (IE fait de cette partie un peu un PITA, c'est pourquoi un DIV. list> DIV.list-item peut-être mieux en termes d'utilisation dans le monde réel

Source

2009-04-28 18:53:56 Tracker1

Quel serait le meilleur moyen de faire cette mise en page (css ou tables)?

Répondre

Questions connexes