Div ou tableau ?

Bonjour à toute la communauté

Question qui a déjà peut-être été demandé. Je ne sais pas si je dois faire un tableau ou une imbrication de div pour ce type de chose; ce sont des données qui s'afficheront sous cette forme :

Titre du film (flb/flh) | Date (flb/flh) | Durée (flb/flh) | ...
---------------------------------------------------------------- ...
********* Film 1 ****** | **** 2005 **** | *** 1:30:00 *** | ...
********* Film 2 ****** | **** 2010 **** | *** 1:45:00 *** | ...


etc...

flb= flèche bas
flh= flèche haut

Je travaille sous html5 et j'aimerais également pouvoir classer le tableau par ordre de film, de date ou de durée, etc... en cliquant sur les flèches bas ou haut.

Étant débutant, je vous serais reconnaissant d'être indulgent et d'essayer de m'apporter des réponses précises si possible.

Merci pour votre aide
Modifié par misterclass (15 Apr 2016 - 02:23)

Un tableau me semble indiqué.

Bonjour,

même réponse : s'il arrive que des données "qui vont bien ensemble sous forme de lignes" soient mieux balisées par des listes, là il y a des entêtes de colonnes donc aucune hésitation c'est un tableau (edit: vertical, simple)

Pour rappel ou info, les tableaux ça existe en HTML5 et c'est la meilleure solution (la seule) pour des données tabulaires.
La mise en forme avec des tableaux a disparu non pas avec HTML5/CSS3 mais il y a 10 ans ou plus (ça aurait jamais dû exister au mieux et au pire avec le support de display: table par IE8 ). Mise en forme = CSS. Tableau = HTML, rien à voir (même si en CSS on peut avoir une mise en page d'éléments à la manière des tableaux, ça reste des CSS et non du code HTML. Aucun changement de la sémantique des éléments HTML stylés en CSS avec display: table; )
Modifié par Felipe (15 Apr 2016 - 10:39)

Pour le code HTML, les cellules d'entête de la 1ère ligne doivent être balisées par des TH, de préférence dans un élément thead (enfin le tr qui contient les th dans un thead...)
Ensuite, pour une meilleure accessibilité, il faut ajouter sur chaque th un attribut scope avec la valeur col, parce que toutes les cellules de données d'une colonne donnée dépendent du th qui est au-dessus. Tu peux regarder le test 5.7.2 du RGAA 3.0. Bon ça fait beaucoup d'infos pour un simple tableau qui se résume à :

<table>
  <thead>
    <tr>
      <th scope="col">entête 1</th>
      (…)
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>donnée 1</td>
      (…)
    </tr>
  </tbody>
</table>

Sinon +1 pour la mise en forme sur mobile : il n'y a qu'IE9 et moins qui ne permettaient pas de "casser" la mise en page par défaut d'un tableau

a écrit :
Et la question de la mise en forme n'est pas pertinente, il existe de nombreux moyens pour adapter un tableau sur mobile :

Je ne dis pas le contraire mais je ne suis jamais parvenu totalement au résultat que je voulais en partant d'un tableau HTML, par exemple réorganiser les lignes sous formes de fiches sur smartphone en réorganisant totalement la mise en page.

Sodium a écrit :
... par exemple réorganiser les lignes sous formes de fiches sur smartphone en réorganisant totalement la mise en page.

Même réponse que dans mon post précédent : l'utilisation des métas données est une bonne voie...

Désolé pour mon retard. Je voulais vous remercier pour votre aide.

J'ai bien pris note pour faire un tableau comme vous me l'avez recommandé.

Par contre, je ne comprends pas la méthode d'Olivier C. Je ne trouve pas les métas données qu'il faut implanter dans mon code.

La méthode partagée par Ten (celle de David Bushell pour être exact), je pense avoir compris les différents codes à insérer sauf pour le javascript Je ne sais pas à quel endroit le mettre. N'importe où, ça n'a pas d'importance ?

ThierryDC a écrit :
[en CSS pur, par David Bushell]
Bizarrement, je ne vois pas où est le côté responsive du tableau ??

Moi non plus. Ce script semble ne fonctionner qu'avec une détection de l'user agent via js, sinon il se contente de rogner le tableau (pas bien !). Du coup je ne comprends pas trop la notion de "css pur".

ThierryDC a écrit :
Par contre, je ne comprends pas la méthode d'Olivier C. Je ne trouve pas les métas données qu'il faut implanter dans mon code.

Un petit coup d'oeil dans le code source peut-être ? :

<table class="table">
                <thead>
                  <tr>
                    <th>n°</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <td></td>
                    <td>Foot 2</td>
                    <td>Foot 3</td>
                    <td>Foot 4</td>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td data-thead="n°">1</td>
                    <td data-thead="First Name">Leonard</td>
                    <td data-thead="Last Name"></td>
                    <td data-thead="Email">leonardo@gmail.com</td>
                  </tr>
                  <tr>
                    <td data-thead="n°">2</td>
                    <td data-thead="First Name">Jules</td>
                    <td data-thead="Last Name">Verne</td>
                    <td data-thead="Email"> jules.verne@gmail.com</td>
                  </tr>
                  <tr>
                    <td data-thead="n°">3</td>
                    <td data-thead="First Name">Ludwig</td>
                    <td data-thead="Last Name">van Beethoven</td>
                    <td data-thead="Email">beethoven@gmail.com</td>
                  </tr>
                  <tr>
                    <td data-thead="n°">4</td>
                    <td data-thead="First Name" colspan="2">Captain Red</td>
                    <td data-thead="Email">captain.red@gmail.com</td>
                  </tr>
                </tbody>
              </table>

Il s'agit donc des data-thead.