Bonjour ,une vrais question a mettre dans débutants .
Avec les progrès devons nous éviter les tables et choisir les DIV ?
Je ne sais pas ?? par contre il parait évident que dans bien des cas la souplesse apportée à la gestion des pages avec ce choix ,est importante.

Il reste cependant un flou sur ce choix si nous n'appliquons pas ce choix, c'est l'utilisation des modes Flexbox sur des tables, ça doit étre galére...
J'avoues que j'aimerais avoir un avis même assez tranché sur ce point !

Merci d'avance.
Modérateur
Et l'eau,

Si les données sont tabulaires (représentation d'un tableau libre office calc - excel / agenda - calendrier / etc.), alors <table> est pertinent. Par contre, si tu utilises le tableau pour faire de la mise en forme (ex: mise en page d'un formulaire), c'est du gros n'importe quoi !

Bien que l'article soit très vieux, je t'invite à jeter un coup d'oeil sur son contenu (Il y a encore beaucoup de choses très intéressantes) : au tableau !
Modifié par niuxe (11 Jan 2020 - 18:57)
niuxe a écrit :
Par contre, si tu utilises le tableau pour faire de la mise en forme (ex: mise en page d'un formulaire), c'est du gros n'importe quoi !

Désolé, ce n'est pas du "n'importe quoi", c'était pendant des années le seul moyen de faire une présentation un tant soit peu correcte.
Disons simplement que c'est démodé.

Par ailleurs s'il s'agit d'une table au sens propre, il n'est pas sûr que <table> soit toujours l'approche appropriée. Pour des tas de raison, en particulier la "responsivité" il est souvent préférable de remplacer <table> par <ul>, les <tr> par <li><ul>...<ul></li> et les <td> par des <li> en mettant le css approprié; ça peut sembler lourdingue, mais c'est pus flexible.
Modérateur
PapyJP a écrit :

Désolé, ce n'est pas du "n'importe quoi", c'était pendant des années le seul moyen de faire une présentation un tant soit peu correcte.
Disons simplement que c'est démodé.


c'était à une époque où afficher quelque chose était une prouesse 1992-1997. D'ailleurs, ce que tu me dis tiens plutôt du hacking. C'est utiliser un tournevis plat pour dé/visser une visse cruciforme....

PapyJP a écrit :

Par ailleurs s'il s'agit d'une table au sens propre, il n'est pas sûr que &lt;table&gt; soit toujours l'approche appropriée. Pour des tas de raison, en particulier la "responsivité" il est souvent préférable de remplacer &lt;table&gt; par &lt;ul&gt;, les &lt;tr&gt; par &lt;li&gt;&lt;ul&gt;...&lt;ul&gt;&lt;/li&gt; et les &lt;td&gt; par des &lt;li&gt; en mettant le css approprié; ça peut sembler lourdingue, mais c'est pus flexible.


Finalement, qu'est ce qu'on s'embête à éditer du html avec des éléments comme <ul> <li> <table> <p> <h1> <main> <header> <article> <section> <footer> etc. etc. ?
Autant utiliser le dernier doctype (ça fait bien et aussi ça évite le quirk mode) et utiliser <div> (display block de base) et <span> (pour les extra). Avec le css, je peux changer le rendu de n'importe quel element . Donc, <div> ou autre, je peux en faire un <table> ....

C'est sûr ça s'affichera ! Mais ce sera faux (sémantiquement) !

Par analogie, je t'invite à regarder ceci

Oh que oui le tableau est toujours approprié. Avec ta manière de faire apparemment <ul> et son accolyte <li>, tu ne bénéficies pas de la richesse sémantique du langage. Avec ta méthode, l'utilisateur n'aura pas accès à ce type d'informations :


<table>
    <caption>légende des données</caption>
    <thead>
        <tr>
            <th scope="row">un en-tête de colonne</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>une donnée</td></tr>
    </tbody>
</table> 


À l'époque où afficher quelque chose était une prouesse, les résolutions d'écran étaient moindres.

Pourquoi avoir une grande attention sur la sémantique ?
- le référencement naturel ne sera que meilleur
- ça permet d'obtenir une meilleur accessibilité
- etc.

lien annexe :
- HTML : une bonne base pour l'accessibilité
Modifié par niuxe (12 Jan 2020 - 00:03)
Je ne vois pas en quoi considérer qu’une collection de données à deux dimensions est une liste de listes serait incorrect sémantiquement, mais ce n’était qu’une remarque incidente.
Par ailleurs les <table> ont des faiblesses, par exemple qu’on ne puisse pas mettre une <captions> par <tbody>
Un calendrier peut être présenté comme une table: une ligne par événement et une colonne par information (date, durée, sujet, endroit, etc.). On peut aussi le présenter par mois avec un élément par événement ne montrant que la date, le détail s’affichant par un clic sur l’événement.
Il s’agit de deux présentations de la même information. Et bien sûr il peut y avoir d’autres présentations. Et pourtant sémantiquement est la même chose.
Quant à l’utilisation de balises html5, leur utilité principale est de faciliter la maintenance, et c’est pourquoi j’en fait un usage systématique. Je n’ai jamais constaté que cela ait une influence notable sur le référencement.
Bonne nuit
Modifié par PapyJP (12 Jan 2020 - 09:18)
Meilleure solution
Merci à vous deux, vos remarques sont très Smiley cligne éclairantes pour moi ,merci encore.
A propos j'ais adorés lire vos liens, et surtout bien amusant ces pages Wikipédia pleines de <TABLE> Smiley cligne
Entièrement d'accord avec Niuxe pour ma part.

Et j'ai pas compris ta remarque @PapyJP concernant la responsivité des tableaux alors qu'il le sont tout à fait. Le seul problème des tableaux c'est les gros tableaux sur les petits écrans mais le problème sera exactement le même pour un simili tableau formaté avec d'autres balises.
Il y a plein de choses qu’on peut faire avec des listes, par exemple mettre les éléments d’une sous-liste sur plusieurs lignes, ce que tu ne peux pas faire avec les cellules d’une ligne d’un tableau
En fait il y a très peu de choses qui aient besoin d’être mis dans une table. Pendant longtemps il n’y avait pas d’autre moyen de gérer un contenu en deux dimensions que d’utiliser <table>, d’où la multitude de tables enchâssées qu’on trouve dans certains sites. Dès l’instant où on fait des colspan, rowspan, ou tables dans des cellules c’est sans doute qu’il y a des moyens plus appropriés de présenter les infos.
Mais comme je l’ai dit, ce n’est qu’une remarque incidente.

J’ai beaucoup utilisé les <table> dans le passé et quand j’ai eu passé deux ans à migrer les 1000 pages d’un site "à l’ancienne" je me suis rendu compte que j’avais dû en garder moins d’une dizaine sur la totalité du site.
Et quand j’ai dû rendre responsive un site qui contenait des listes je me suis rendu compte que même si les <table> étaient sémantiquement correctes, des <ul> à deux niveaux étaient sémantiquement tout aussi correctes et plus aisées à mettre en page avec le css approprié. Ça ne m’empêche pas bien entendu d’utiliser des <table> quand je le juge utile.

En résumé, les balises sont des outils, c’est à nous de choisir ce lui qui NOUS convient le mieux, sachant que se familiariser avec un nouvel outil prend du temps et des efforts, et que ce qui convient à l’un ne convient pas à l’autre.
Et il ne me semble pas approprié de dire que quelqu’un qui utilise un autre outil que le sien qu’il fait "n’importe quoi".
Modifié par PapyJP (12 Jan 2020 - 14:51)
PapyJP a écrit :
...............

Oui mon ami mais bien sur je n'ai pas abordé la révolution du couple
"Grid et Flexbox"
du reste pour la grande majorité des sites que j'ai fait pour des Amis ... il n'y avait pas de Grid !! et très franchement, je n'en ai plus le courage !
C'est toi qui m'a fait appliquer mon premier ....

<section class="masection" >
  <article>
    <figure><img src="illustration.jpg" alt=""/></figure>
    <div>  
       Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard 
       de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices 
       de texte. Il n'a pas fait que survivre cinq siècles,
    </div>
  </article>
  <article>
        <figure><img src="illustration2.jpg" alt=""/></figure>
        <div>  
       Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard 
       de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices 
       de texte. Il n'a pas fait que survivre cinq siècles,
        </div>
  </article>
</section>

Tu sais que depuis j'en uses et abuse Smiley cligne
"Grid et Flexbox"…
C’est sûr qu’on doit pouvoir faire des choses géniales avec ça, mais c’est encore une nouvelle paire d’outils à apprendre.
J’ai essayé une fois, sans grand succès. Il faudrait que je me replonge dans la doc. Le problème de ces docs c’est que ça explique la signification des paramètres mais pas vraiment comment s’en servir.
Administrateur
Hello,

Voilà un sujet qui m'a surpris et rappelé des souvenirs de discussions endiablées (ce genre de question était à la mode sur les forum... il y a 10 ans. Et je le dis très sérieusement).

Alors tu as bien fait de préciser "avec les progrès" puisque cela change la donne effectivement.

Il y a eu plusieurs générations de mise en page :
1- la période "frameset" + position absolute partout
2- la période <table>
3- la période float (et/ou inline-block)
4- la période flexbox
5- la période grid layout

Chacune de ces étapes a apporté des nouveautés en terme de possibilités (flexbox a par exemple permis d'entrer véritablement dans le Responsive) et chaque période était justifiée par des raisons d'incompatibilités/bugs navigateurs.

Les 3 premières périodes sont - objectivement - des aveux de faiblesse : frameset, table et float n'ont *jamais* été conçus au départ pour construire l'architecture d'un gabarit, il ne s'agit que de "bidouilles" parce qu'on n'avait pas de meilleur outil.

Je reviens sur certaines idées reçues :
- aucune de ces techniques n'est vraiment mauvaise : si on l'utilise c'est qu'il y a une raison (compatibilité en général)
- un tableau de mise en page n'est pas forcément la pire des solutions (mais oui, avec les progrès on peut faire bien mieux aujourd'hui avec grid layout)
- un tableau de données doit être véhiculé par <table> si l'on souhaite faire les choses proprement (de même que h1 est un titre principal etc.). Et rien n'empêche de le rendre Responsive
- Flexbox et Grid Layout, comme float à son époque, nécessitent beaucoup de pratique pour vraiment comprendre leur pouvoir et potentiel (on m'a conseillé des bons livres à ce sujet Smiley cligne )

Pour finir avec le point "c'est du n'importe quoi", je me permets de donner mon avis aussi.
Le contexte de cette affirmation est :
1- on parle d'un tableau de mise en forme (non de données)
2- on parle de 2020 (de "progrès" dans le titre du topic)

Si ces deux conditions sont réunies, alors effectivement c'est bien un usage complètement inadapté d'utiliser des <table> aujourd'hui. Si tel n'est pas le cas, ou si l'on parle d'un site déjà vieux de 10 ans, alors les <table> étaient parfaitement justifiables.

Bonne journée Smiley smile

PS:

Jean-Pierre-Bruneau a écrit :
Avec les progrès devons nous éviter les tables et choisir les DIV ?

Non, il n'y quasiment aucun intérêt de remplacer tous les tableaux HTML par des div.
Modifié par Raphael (13 Jan 2020 - 09:56)
Raphael a écrit :
Hello,...........

Oui tu résumes bien les choses, mais tu n’échappera pas à nos questions avec ton livre "CSS 3 Grid Layout: Vous allez enfin aimer CSS" .... que je reçois demain Smiley cligne
Déjà j'ai bien peiné avec celui sur Flex !! en plus tu annonce que ces deux concepts sont fait pil-poil pour marcher ensemble ! j'ai hâte de tester tout ça Smiley rolleyes
Modifié par Jean-Pierre-Bruneau (13 Jan 2020 - 10:46)