Aller au contenu

Linéariser un tableau HTML via css ?


Sujets conseillés

Posté

Petite question :

Je créer un tableau de données et j'aimerais en proposer une version linéaire.

Est ce possible via CSS ?

en gros les td seraient les uns en dessous des autres plutot que les uns à coté de des autres.

Merci de votre aide.

Posté

Bonsoir,

Il me semble qu'un "display: block" devrait convenir :

tr {display: block; }

Fruge.

Posté

Bonjour yobiwan,

Effectivement, j'ai fait quelques essais aussi... sans succès.

En fait, je dois avouer que je ne comprends pas bien ce que tu veux faire :wacko:

J'ai cherché des informations à propos de l'accessibilité des tableaux.

Je n'ai rien trouvé qui semblerait correspondre à ton souhait.

La notion "linéaire" apparaît dans les spécifications mais il s'agit de l'organisation de la structure des tableaux en identifiant les groupes de lignes et/ou de colonnes (thead, tfood, tbody, colgroup...).

Et, en prévision de l'évolution des navigateurs :

Nommez les éléments du tableau avec les attributs "scope", "headers", et "axis" ainsi les navigateurs futurs et les technologies de support seront capables de sélectionner les données à partir d'un tableau en filtrant sur les catégories. Ce balisage aidera également les navigateurs à linéariser les tableaux (également appelé "serialisation" de tableau). Une version linéaire basée sur les lignes peut être créé en lisant l'entête de ligne, précédant alors chaque cellule avec l'entête de colonne de la cellule. Ou, la linéarisation peut être basée sur les colonnes. Notez que la direction d'écriture de la langue naturelle peut affecter la présentation des colonnes (et donc l'ordre). En HTML, l'attribut " dir" spécifie la présentation de l'ordre des colonnes (ex., dir="rtl" spécifie présentation de la droite vers la gauche).

Cette page, avec comme exemple l'utilisation d'un calendrier est très intéressante aussi.

Posté

Merci mais ca repond pas vraiment a ma question :P

En fait, j'aimerais proposer une vraie version linéaire d'un tableau.

Plus de stucture en tableau donc, mais en ligne.

Exemple :

table

tr

td

1ere colonne

/td

td

2eme colonne

/td

/table

deviendrait à l'affichage :

1ere colonne

2eme colonne

sans mise en forme de tableau

Posté
Merci mais ca repond pas vraiment a ma question  :P

Figure-toi que je m'en doutais... :P

Maintenant que je comprends ce que tu veux obtenir...

je ne comprends pas pourquoi tu veux utiliser un tableau :(

Selon le type et le volume des données, il me semble que l'utilisation de blocs (qui s'affichent par défaut, en flux normal, en une succession verticale), de listes (ul, dl) conviendrait pour cela.

Posté
Semblerait que ca ne marche pas.

Ha bon ? :huh::wacko:

parce que j'avais fait un essai rapide avant de poster, et ca marchait... et tout cas, toutes les cellules etaient les unes en dessous des autres...

Fruge.

Posté

Ralala, bon, j'avoue, c'est un peu de ma faute : j'ai tapé trop vite : le bon code est

td {display: block; }

( "td" et non "tr" :D )

(Exemple ici : -http://www.hist-geo.com/A.php )

Fruge

Posté

Pour ce qui est du choix de faire un tableau, c comme je le disais c'est un tableau de données qui nécessite des balises pour etre accessible donc pas le choix.

Posté
Ralala, bon, j'avoue, c'est un peu de ma faute : j'ai tapé trop vite : le bon code est

CODE 

td {display: block; }

( "td" et non "tr"  )

(Exemple ici : -http://www.hist-geo.com/A.php )

Fruge

Quand je vais sur le site, je ne vois pas la linearisation de l'info, j'ai toujours deux colonnes et deux lignes. Normal ?

Posté

Bonjour,

J'ai compris pourquoi mes essais n'étaient pas concluants : je travaille avec WebExpert et le mode prévualisation (et j'en été restée là) est basé sur le moteur de IE...

Ce code (extrait de ta page, Fruge) fonctionne avec Opera 7 et Firefox 0.8 mais pas avec IE 6

<table border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td style="display:block">Colonne 1</td>
   <td style="display:block">Colonne 2</td>

   </tr>
   <tr>
   <td style="display:block">Cellule 1</td>
   <td style="display:block">Cellule 2</td>
   </tr>
 </table>

C'est le terme "linéarisation" qui me bloque un peu, yobiwan : tu sembles lui donner un sens contraire.

Il me semble que linéarisation signifie "mettre en ligne" (ce qui correspond à ce que je trouve dans les spécifications, les informations doivent être dans un ordre logique pour être lues comme une ligne).

Pour toi, il s'agit de les placer verticalement :unsure:

Posté

Le souci reste que 90% des utilisteurs sont sous IE. Et que mettre 90 % des utilisateurs out pour une solution c pas trop faisable quand meme :P:nono:

Posté
Quand je vais sur le site, je ne vois pas la linearisation de l'info, j'ai toujours deux colonnes et deux lignes. Normal ?
Ce code (extrait de ta page, Fruge) fonctionne avec Opera 7 et Firefox 0.8 mais pas avec IE 6

Salut,

Effectivement, je travaille avec Mozilla, et ca marche bien ; IE, je n'ai pas essayé, désolé !

Fruge.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...