Styler un tableau en CSS

Bonjour tout le monde,

Petite question pour laquelle il ne semble pas exister de réponse satisfaisante , du moins dans les recherches que j'ai faites pour le moment :

Comment basculer la définition d'un tableau en CSS, notamment les attributs CELLSPACING et CELLPADDING mais aussi les ALIGN et VALIGN, de manière standard à défaut d'être universelle ?

Je cherche à basculer d'un design HTML avec des tableaux imbriqués (scandaleux ) vers du table-less + CSS mais je souhaiterais dans un premier temps extraire simplement les styles actuels en CSS sans toucher à la conception que je referai proprement dans un second temps.

C'est possible ou je casse tout et je recommence directement ?

Merci de vos réponses

Ca serait plus efficace de tout casser pour recommencer puisque c'est ce que tu prévois par la suite...
Là tu vas faire 2 fois plus de taf pour le même résultat

Merci le moustique , je m'attendais à cette réponse, mais c'est pas forcément la quantité de travail qui me préoccupe, disons que je veux le faire plutôt par curiosité, et vu les réponses que j'ai pu voir à le sujet sur d'autres forums, je comprends encore plus pourquoi - sémantique mise à part - faire tout un design CSS avec des tableaux est peu pratiqué... , faudrait être un peu maso

Pourquoi pas en effet dans une période de transition conserver un structure minimaliste en tableau où celui-ci délimiterait les zones d'une page... à la manière d'une div, et coder avec toutes les balises html adéquates. Il y a sûrement un avantage, c'est se rendre compte rapidement de l'inutilité de conserver ce tableau de mise en page, la pratique des css, l'intérêt parfois que lui porte le codeur se trouveraient en but à la rigidité d'une conception par tables et le convaincrait de la faire évoluer vers une conception sans tables.

C'est à mon sens un exercice pédagogique intérressant qui pourrait peut-être faire un tutoriel assez complet et didactique dans une démarche de conception avec tableaux imbriqués à l'origine vers un positionnement par css: prendre un exemple "tables" et "tag soup", passer à une version intermédiaire "table minimaliste" (qui peut très bien être accessible), puis à une version "tableless".

Mes 2cts

Wé Igor, c'est clair que pour un tuto, ça serait vraiment pas mal, tu fais une recherche au hasard sur google, tu prend le 1er site venu, à tout les coup c'est tag soup & tables imbriquées, tu copie la page, tu fais une version plus propre à base de tableau, et enfin la version tabless, et tu fais comparatif poid de pages, accessibilité, etc...

Allez t'es parti Igor !!! (sans rire, ça serait super).

Par contre pour ici, vu que la finalité est un site tabless, et que Nilpohc est déjà convaincu des bien-faits de la mise en page par tableau, c'est un peu une perte de temps je pense.

ElMoustiko a écrit :
Allez t'es parti Igor !!! (sans rire, ça serait super).

Pourquoi pas, mais c'est que j'y connais plus rien aux multiples tableaux imbriqués avec des spacer.gif etc . Bon quelques jours de congés approchent, je vais peut-être m'y mettre (je fais aussi en ce moment un tuto, plutôt un pas à pas d'une page utilisant des "floatants" orienté grands débutants et abordants quelques principes).

a écrit :
Par contre pour ici, vu que la finalité est un site tabless, et que Nilpohc est déjà convaincu des bien-faits de la mise en page par tableau, c'est un peu une perte de temps je pense.

Oui je crois aussi Nilpohc très capable de faire un site tableless, il précise lui même que sa démarche est purememt masochiste

Wé nilpohc t'es un vieux maso

Igor, buhhh tuto avec les flottant pour la mise en page... c'était l'extension prévue à mon tuto de mise en page lol

L'idée d'Igor est assez intéressante , et pédagogiquement si on peut dire, je pense aussi que ça vaut le coup...En précisant qu'il est plus efficace de repartir de la page blanche.

Mais bon, je sens qu'on extrapole un peu mon sujet initial, est-ce que l'un de vous deux connaît la solution (ou une solution) ou sais où je suis susceptible de la trouver ?

Je précise que j'ai déjà essayé de mettre un "margin" dans les "td" et que les "border-collapse" ça marche pas super, ou alors j'ai pas bien compris...

Bonjour,

Ce serait mieux si tu mettais un lien vers le site et que tu expliques ce que tu veux faire.

Le design CSS + tableaux pour la structure de la page est au contraire très pratiqué. Ça s'appele même du design intermédiaire ou transitionnel.

Pour ma part, je pense qu'il peut effectivement être utile d'y aller en deux étapes, surtout s'il s'agit d'une refonte d'un site qui doit demeurer en ligne. Le passage d'emblée au tout-css peut causer bien des problèmes et des blocages. Tout dépend du niveau de compétence de la personne en matière de css et de css positioning.

Pour mettre une marge dans une cellule (un espace entre le bord de celle-ci et le contenu), il faut utiliser la propriété "padding" et non "margin"; si tu veux faire ce que tu veux des bordures de tableaux et de cellules, je te conseille d'introduire un border="0" dans le code de tes balises table, et de définir des attributs de bordure via css pour les tables et les cellules.

Pour un alignement horizontal dans une cellule, dans la css: "text-align: center". En alignement vertical, "vertical-align: top" ou "vertical-align: bottom", etc., mais, bon on ne peut pas non plus répondre à toutes les questions ponctuelles de ce genre.

un article sur zdnetfr/builder

CSS: traiter des tableaux en utilisant des feuilles de style

Salut et merci pour ton avis et le lien Thierry,

Ma question allait plus dans le sens de ma culture personnelle, de l'expérimentation et je me suis aperçu au fil de mes recherches et de mes essais que finalement certains points sont réellement bloquants, ce qui est paradoxal si j'en crois ce que tu me dis sur le côté très répandu du design transitionnel. Où peut-être que je veux aller trop loin ?
L'idée de base était de ne laisser que des <table class="xxx"> ou du genre dans le HTML et de mettre tout le reste dans le CSS, une séparation complète entre le contenu et la mise en forme donc.

Voici ce que j'en retiens :

- La norme CSS prévoit tous les attributs spécifiques nécessaires (à savoir: "border-spacing" pour "cellspacing", "row-span" et "column-span" pour leurs équivalents HTML. Le "cellpadding" est à traiter en tant que "padding" dans la définition des "td")
- Comme on s'en doute, tout n'est pas reconnu. D'ailleurs, le seul qui fonctionne c'est "border-spacing"...et encore pas sous IE (c'est marrant ça m'étonne même pas). OK pour Firefox et Opera. Pour le spanning, faudra repasser.
- Les questions d'alignement sont à traiter avec les méthodes habituelles

Mon cas concrêt était une partie du site de ma petite femme qui est basé sur des modèles de tableaux imbriqués, et majoritairement pour des utilisateurs sous IE. Comme elle utilise pas mal Frontpage, elle souhaite conserver ce type de modèle parce que les divs positionnés en CSS c'est déjà moins évident à manipuler...Pour preuve, je lui avais refait une page à partir de ce que j'avais appris ici entre autres (j'avais même tapé haut : browser-compatible et valide XHTML 1.0 strict + CSS) qui est partie aux oubliettes....

Je vais donc revenir à des ambitions plus modestes, en laissant quelques attributs HTML.