Bonjour,
 
Je me pose cette question.
 
J'ai connu une époque où beaucoup de mises en page même très complexes étaient réalisées entièrement grâce à des tableaux. Et puis le positionnement CSS et ses div ont progressivement pris le dessus, rendant le code beaucoup plus lisible et facile à administrer.
 
Aujourd'hui, il est possible de ne plus du tout utiliser les tableaux mais parfois, je trouve que le code CSS est très complexe pour obtenir ce qu'un petit tableau tout simple ferait très bien. Par exemple, si on veut mettre du texte sur trois colonnes côte à côte, un petit tableau fait en 5 minutes et hop. Surtout qu'au final, le code CSS est parfois plus lourd que les quelques <table>, <td> et <tr>.
 
Donc pour ma part, je fais le gros de la mise en page en CSS mais après, je mets des petits tableaux çà et là. J'ai vu pas mal d'entreprises de création de sites web pros faire ainsi.
 
Et vous, comment faites-vous ? Est-ce que vous avez banni les tableaux de votre travail ? Est-ce que vous trouvez que leur utilisation est synonyme de manque de compétence en CSS ?
 
Merci beaucoup

Oui on peut encore utiliser des tableaux pour la mise en page.
 
Mais c'est déconseillé:
 
1. parce que ca alourdi inutilement le code, et donc son interprétation pour le navigateur.
 
suffit de voir la lourdeur d'une page avec une mise en page un peu complexe (ou pas), avec des tableaux par rapport à une page conforme aux spécifications du w3c et bien pensée (facilement du simple au triple)
 
 
2. parce que c'est une horreur à relire et à mettre à jour. Je ne suis jamais arrivé à visualiser mentalement une mise en page en tableaux avant son affichage par un navigateur, tandis que sur un site web bien pensé et structuré, aux normes, pas de soucis. Et je ne parle pas de la mise à jour d'un site en tableau dont le squelette est géneré par Image ready ou autre chose. C'est une horreur: des bouts d'image partout avec des nom qui ne veulent rien dire etc...
 
 
 
D'ailleurs, perso, je suis incapable de coder un site web en tableau moi même. Je suis obligé de passer par un éditeur wysiwyg.  
Pas de probleme par contre pour un site aux normes w3c : c'est logique, structuré => je m'y retrouve directement.  
 
en fait,à mon avis, les tableaux ont été beaucoup utilisé car les éditeurs wysiwyg eux mêmes sont incapables de sortir un code propre aux normes W3C. Et comme quand on a pas l'habitude des nouvelles normes, et en wysiwyg, un site est bcp plus facile à concevoir avec des tableaux.
 
Ceci dit vaut mieux un bon site avec des tableaux qu'un site mal foutu et pensé en CSS avec des DIV utilisées à tort et à travers sans tenir compte de la logique sémantique.
 
 
et un  petit lien:
 
http://www.openweb.eu.org/articles/problemes_tableaux

Merci beaucoup pour cette réponse détaillée et ce lien très intéressant.
 
Moi-non plus je n'arrive pas à faire des tableaux complexes sans éditeur et +1 pour les squelettes générés par ImageReady.
 
Je suis d'accord sur le fait qu'il ne faut plus faire de mises en page complètes en tableaux. Mais à l'intérieur d'une mise en page en CSS propre, utilisez-vous des petits tableaux pour arranger le contenu ? Je le fais, par facilité. Et parce que l'équivalent CSS avec des float left/right ou des <ul><li> etc serait trop complexe et obligerait à tester sous tous les navigateurs.
 
D'ailleurs, dans le lien il est dit :

Ca dépend. Il ne faut pas confondre le layout et le contenu.
layout => CSS
contenu => tableau
 
Perso je fais un maximum de CSS, car quand j'ai une partie du site que je veux modifier, je préfère retrouver un <div id="lolilol"> qu'un <td> perdu au beau milieu de plein d'autre <tr> et <td>.
 
Et puis si tu veux changer la mise en forme ou déplacer des bloc, le css c'est le pied.
Le déplacement avec un tableau c'est l'horreur  

 
Oui mais donc, pour ton contenu, tu as recours à de petits tableaux ?

Bah voui, quand je veux présenter mes données, je m'amuse pas à faire du css.
Un tableau, c'est pour faire des tableaux. Rien d'autre.

ça dépend dans quel objectif ... globalement je suis de cet avis : tableau = données tabulaires, il *peut* servir à de la mise en page s'il se linéarise bien.
 
Mais dans le cas d'un mail en HTML, les clients messagerie ne sont pas assez évolués pour comprendre le CSS3, alors que l'HTML + tableaux, ça "passe" ...

Bonjour
 
Je fais remonter ce topic car c'est une question qui m'intéresse.
 
Je fais quelques sites (j'ai déjà posté ici) un peu de html et un peu de php, mysql, et très peu de css, mais voyant le css partout... Je me dis qu'il faut bien s'y mettre.
 
C'est un peu le (non) débat du Div vs Table (oui je sais table c'est le mal, div c'est le bien, table c'est désuet, div c'est le futur, table c'est plein de problème... oui je sais...) (lire ce forum et ne pas le savoir c'est être plus qu'aveugle vu la manière dont certains ici le rabâchent sans ménager les internautes, bien que je sache qu'il est rageant de répondre 50 fois la même chose, en même temps suffit de ne pas répondre...)
 
Je vois qu'il y a beaucoup de gens qui ont du mal à "visualiser" un tableau en code et doivent utiliser le wysiwyg, et préfèrent utiliser le css sur des pages séparées, pour ma part c'est vraiment le contraire, me mettre des table des tr et des td, je construis mentalement le tableau sans aucun problème (je sais ce n'est pas une excuse) alors que pour faire du css, déjà je n'ai pas l'habitude des "balises" css (même si elles sont proches du html) mais en plus aller chercher les variables sur une autre page, je ne trouve pas ça super pratique (j'utilise quand même les includes) cependant je suppose que si je m'y met, je devrais y parvenir.
 
J'ai aussi lu la page : http://openweb.eu.org/articles/problemes_tableaux
Forte intéressante... Mais (ben oui je dois dire un mais) j'utilise un serveur mutualisé et ben que je fasse des trucs tordus avec les tables (qui demande apparemment tellement d'énergie) mes pages continuent de s'afficher suffisamment rapidement.
 
Je viens de lire les pages "premiers pas en css" : http://css.mammouthland.net/
ainsi que les autres pages de openweb sur le css
 
A priori il est vrai que je trouve cela plus simple pour construire les pages... Tant qu'on reste dans un site simple (oui je sais vous allez me donner un tas d'exemple de gros site qui sont en css...) (je parlais pour mon niveau à moi) A chaque fois que je vois des exemples de mise en page avec le css, cela reste rudimentaire. Si par exemple  je veux programmer un "gros" site, qui par conséquent a beaucoup de pages, je vais préférer utiliser du php (au moins pour les includes, en plus des autres fonctions du php; agenda, chatbox, bdd, interface utilisateur, panneau d'administration, etc...) mais dans la construction de la page, je vais générer des tables (oui je sais c'est le mal) cependant j'essaie de les convertir en div (oui je sais c'est le bien) et pour faire ce que je veux faire, vraiment, je trouve ça tellement casse tête que je préfère retourner vers le côté obscur de la force (les tables)  
 
Exemple sur ce site : http://www.acthe.fr/presentation/index.php
Oui je sais, vous allez me dire que le site est mal fait, qu'il y a plein de table partout, que c'est le mal absolu !!  
Mais je l'ai commencé avec des tables, j'ai déjà fait beaucoup de boulot de dessus, c'est un site associatif, alors je le finirai tel quel.
Pour mes futurs autres sites, je m'attaquerai au div et au css
Le site est en cours de construction...
 
Je vois assez facilement comment mettre le "header" (le haut) et le "footer" (le bas) (je met header et footer entre guillemet car on m'a déjà dit que c'était des termes mal utilisés pour le haut et le bas de page... sans vraiment me donner plus d'explication, autrement j'ai vu qu'on pouvait envoyer des mails avec le html et ça s'appelait des headers... moi j'envoie les mails avec le serveur smtp et des scripts en php) en div et en css, en revanche le corps de la page (qui change à chaque rubrique)... Je me dis que ça risque d'être assez dur (pour mon modeste niveau bien sur...) et je ne parle même pas de l'agenda, de la page d'administration...
 
Et c'est la que mon post rejoint ce topic, est-ce que pour ce type de site vous utilisez encore les tables pour de la mise en page (car je ne l'utilise pas pour des données tabulaires) (je sais que les super pro vont me dire oui, ils mettent des div partout, mais pour quelqu'un qui n'a pas fait d'étude en informatique, qui est plutôt branchée littéraire, et pour qui l'informatique est plus un loisir, quoique j'aimerais en faire un "job étudiant" )
 
En faite je comprends bien les avantages du div et du css par rapport au table, cependant diaboliser les tables comme on commence à le voir partout, est-ce vraiment justifié ? (oui je sais les handicapés, les pda, etc...) Je vois bien que si on veut vraiment progresser en prog il va falloir se mettre "à la page". (j'essaie de repasser du côté pas obscur de la force)
 

Les DIV oui, mais les tableaux, tu les utilises à partir du moment où tu as des données tabulaires, et ou le tableau est le meilleur outil qu'on puisse avoir pour représenter un certain type de donnée.

ex : ce forum, est fait avec un tableau, et je n'irai pas utiliser de DIV pour la structure principale du forum, mais un tableau.
Le tableau est un outil merveilleux quand on a des données tabulaires (données d'une feuille excel par exemple) car derrière on a tout pleins de petits outils fournis par le DOM pour accéder aux données, et les CSS sur un tableau peuvent être assez puissantes (CSS3 avec les derniers navigateurs ça poutre )

PS pour répondre à une de tes questions :
http://www.acthe.fr/presentation/index.php  <== ça c'est hyper largement faisable sans tableaux

Je trouve que, encore plus pour un  littéraire, utiliser un CSS est plus simple :
Un littéraire devrait maîtriser sans problème les notions de paragraphe, liste, etc. (web sémantique   ).
Alors que le concept d'utiliser un tableau pour présenter du contenu me semble plus délicat.
 
Ceci-dit, si c'est pour remplacer les tableaux par des DIV, je ne suis pas pour. L'intérêt du CSS est justement qu'il existe plein d'autres marqueurs (paragraphes ou listes, par exemple). Le DIV est à prendre pour ce qu'il est : un bloc "DIVers", et donc il ne faut l'utiliser que quand on n'a pas de marqueur adéquat. Les "super pros", comme tu dis, vont justement limiter les DIVs et privilégier les autres marqueurs...
 

Tu réponds à ta question    
Si tu cumules les déficients visuels et les utilisateurs de navigateurs "alternatifs" (tél. portable, PDA, Lynx, etc.), tu te rendras compte de l'importance de l'accessibilité. Et si en plus tu rajoutes que les moteurs de recherche valoriseraient moins les tableaux...

Bonjour,
Exact macgawel ! Je ne suis pas un pro mais je te suis.
 
Bon c'est vrai que l'utilisation des tr et td fait penser à une autre époque !
J'utilise les tableaux uniquement pour les formulaires et les div pour tout les autres conteneurs.
 
Par contre, en programmation php ou js (ou autres) d'utiliser autre chose que les tableaux pour boucler les résultats de requêtes.
Les cellules sont plus pratiques (tableaux à 2 dimensions ou +) et parfaitement représentatives des données extraites par rapport à des class div dont le comportement est aléatoire...
 
Donc on n'échappe pas aux tableaux et ceux qui les diabolisent ne doivent pas avoir souvent de base de données à traiter    
...mais c'est mon avis !

euh pardon, si je me relis, en français : "...Par contre, en programmation php ou js (ou autres), on ne peut pas utiliser autre chose que les tableaux pour boucler les résultats de requêtes. "

attention, personne (de sensé en tout cas) n'a jamais dit qu'il ne fallait plus utiliser de tableaux... il ne faut plus en utiliser pour faire de la présentation qui doit être faite avec du css. mais pour présenter des données tabulaires (comme dans ton exemple, des résultats de requete), il faut utiliser des tableaux.

MEA CULPA ! Tu as raison, j'étais hors sujet !    
 
a+

Cool il y a plein de réponses
 
Merci de vos réponses déjà
 
Je me permet donc de continuer sur la conversation que je trouve intéressante.
Evidemment, je vais axer les choses sur des problèmes de programmations personnels, je reprends toujours mon site :
 
http://www.acthe.fr/presentation/
Comme j'ai dit, j'ai beaucoup travaillé sur ce site, je ne le reprogrammerai pas, mais je m'en sers comme exemple pour pouvoir réfléchir à la conception des futurs nouveaux sites que je ferai.
 
Donc Gatsu35 me dit qu'on peut aisément faire ce site en Div (je parle de la partie centrale, non du header ni du footer), mais mes parties centrales proviennent de base de donnée. En gros c'est une sorte de compromis entre le nombre de requête SQL et la mise en page, mais comme on m'avait dit qu'il fallait essayer de faire le moins de requête possible pour éviter de surcharger le serveur, je lance une seule requete sql pour aller chercher dans la bdd les infos, et ensuite je fais tourner des boucles pour mettre en page mes infos. Et pour avoir la mise en page que je souhaite, j'y arrive avec les tables, mais imaginer ça avec les div... je coince.
 
Je vais expliquer ça avec un schéma :
Par exemple je vois comment faire ça avec des div, mais ça me fait 8 requête sql
 
________________________________________________
|                       |                          |                      |
|                       |                          |                      |
|                       |           sql           |           sql        |
|                       |                          |                      |
|                       |                          |                      |
|    sql               |________________________________
|                       |                          |                      |
|                       |                          |                      |
|                       |                          |                      |
|                       |           sql           |          sql         |
|                       |                          |                      |
|                       |                          |                      |
|                       |                          |                      |
________________________________________________
|                       |                          |                      |
|                       |                          |                      |
|                       |                          |                      |
|          sql         |           sql            |         sql         |
|                       |                          |                      |
|                       |                          |                      |
________________________________________________
 
Alors que là, avec les table, je ne fais qu'une seule requête sql au début, et je créer ma table

Euh tu fais une seule requête au début, et tu crées tes divs

Ouais je m'attendais un peu à cette réponse...
 
Mais je n'ai pas encore bien pigé la logique des div... Surement avec un peu plus de pratique alors

j'ai l'impression que tu ne différencies pas vraiment l'html du php.
 
tu devrais te pencher sur les motifs de conception mvc et les frameworks php. ça devrait t'être utile je pense.

Ouais là y'a un mixage de notions

 
Tout dépend de la taille de ta bdd, une requête globale peut être très lourde et puis il faut te trimbaler les infos d'une page à l'autre, donc relancer ta grosse requête à chaque fois (si tu ne passes pas tes variables en session).
 
Si tu dois ré-exploiter les données dans d'autres pages de ton site, il est plus facile de réaliser de petites requêtes dans des fichiers php à part et de "piocher" lorsque tu en as besoin.
Ex : les 5 derniers inscrits = 1 requête dans fichier php en include quand tu en as besoin, le dernier message de forum = idem...., le nombre d'abonnés=idem...etc
Tu te fais une sorte de trousse à outils qui est disponible quand tu en as besoin et facilement accessible sans tout réécrire en ajoutant un include dans le code.
 
Dans ce choix de fonctionnement, tu dois :
- optimiser ton SELECT pour ne prendre que ce dont tu as besoin
- optimiser ta bdd pour éviter les redondances et les tables avec trop de colonnes (si tu utilises un CMS, normalement, les tables sont bien faites)
 
Maintenant, sur des bases de données modestes et les sites dont la fréquentation n'explose pas (sur des serveurs mutualisés), tu n'as pas vraiment d'inquiétude à avoir.
En cas de super fréquentation du site, tu seras tellement heureux que reprendre tes requêtes pour les améliorer sera un plaisir   !
 
Bon, c'est mon avis, il n'engage que moi....  
 

 
Brièvement, sans que ce soit forcement la meilleure solution et/ou adoptée par tout les développeurs :  
- les DIV ID pour la mise en page globale : entete / menu / contenu / pied de page
- les DIV class pour les plus petits éléments qui peuvent être répétés (ex : petits blocs dans une colonne, pubs..etc)
- les tables : formulaires et affichage des résultats de requêtes (tu peux aussi utiliser les puces ul mais perso j'aime moins)
 
bon courage !

Et on oublie pas le paquet sémantique :

• h1...h6 pour les titres
• p pour les paragraphes
• (ul|ol) li pour les listes (soit non-ordonnées, soit ordonnées)
• tout ce qui est strong, em, code, ins, del, etc. pour les bouts de phrases ayant un certain sens

Très intéressant, merci à tous