CSS peut-il vraiment remplacer HTML pour les tableaux?

Version imprimable

29/01/2011, 17h37
grunt2000

CSS peut-il vraiment remplacer HTML pour les tableaux?

Bonjour,

Je suis entrain de refondre un site web qui date de 2004, tout en <table>.

De nombreux extraits que j'ai vu sur Internet m'ont montré des <div> utilisant des CSS pour une présentation équivalente, avec cependant toujours ces contraintes:
- Jamais plus de trois colonnes. Car plus rendrait la feuille de style complexe, si seulement c'est applicable.

- Incapacité d'aligner verticalement ou horizontalement les colonnes. Et là, je suis craintif. Si mes données ne sont plus alignées les unes en regard des autres, je peux jeter mon application parce que je vais passer pour un clown. J'ai forcément du mal comprendre ce que j'ai lu.
À moins que ce soit: incapacité d'aligner des éléments au sein de la cellule créée? Humm...
En fait, j'ai été averti d'un très grand nombre de ratages graphiques potentiels. En particulier, ceux là:
Avec un "tableau en div" de deux lignes à trois cellules ([col1, col2, col3] et en dessous [col4, col5, col6]):

1) Si col3 est plus haute que les autres: col1 et col2 laissent un blanc avec col4 et col5.

2) [col1 et col4], [col2 et col5], [col3 et col6] n'ont pas la même largeur.

Je l'ai lu sur des articles datant de 2006 à 2009. Je ne sais plus à quoi me vouer. En tout cas, j'ai surtout vu des exemples une à trois colonnes sauce "Hello World".

J'ai des tableaux à convertir, de trois à huit colonnes, sélectionnées dynamiquement à l'exécution, et qui doivent s'aligner comme le fait une table HTML.

3) CSS y parvient-il parfaitement? C'est à dire: il sait reproduire entièrement ce que les <table> si décriées peuvent faire?

Ma dernière inquiétude avec CSS, c'est de transformer une usine à gaz HTML en usine à gaz CSS dès que l'on passe par des mots-clés trop périlleux ou bien lorsqu'il faut remplacer trois instructions HTML par quatorze directives CSS.
Car j'ai vu les mots-clés: position, left, padding, margin, width à utiliser de concert dans chacun des différents styles à déclarer selon le type de la colonne (extrême gauche, extrême droite, cellule située hors extrémité).
Si remplacer un trio Table/tr/td se fait par le biais de 5 directives CSS par type de cellule, on écrit alors quinze directives en CSS pour en remplacer trois en HTML. A t-on vraiment gagné?

J'ai appris qu'il existait un mot-clé column.
Je me demande s'il peut être employé pour éviter la dérive que je viens de mentionner.

4) CSS parvient-il à simuler une table et ses lignes simplement?
Ou bien le taux de conversion est-il toujours de cinq (ou plus) directives CSS à écrire par instruction HTML remplacée?

5) Ça ma l'air.... Pas solide du tout!
Vraiment pas! Sujet à tous les aléas. Le moindre débutant qui approche, n'aura t-il pas un mal de tête plus grand qu'avec HTML?
Cela ne va t-il pas faire des gaufres graphiques dès que l'on touchera à un petit truc dans la feuille de style?

6) Avez vous un exemple de code HTML montrant un tableau de cinq colonnes ou plus, employant CSS et non <table> et qui fonctionne?
Je pose la question... tout simplement parce que je n'en ai jamais vu!
Cela existe t-il ou pas? Et si oui, où?

Non, je ne suis pas convaincu.
Oui, je suis inquiet.

J'ai peur de m'embarquer dans l'usine à gaz ultime.
Celle qui "fera bien", mais me mettra par terre après quelques mois d'emploi quand un utilisateur, dans une configuration particulière, me dira: "Dites, chez moi, ça provoque tel truc à l'écran."

Avez-vous des arguments convaincants, prompts à me rassurer?

En vous remerciant,

Grunt.

Bonjour,
réaliser un tableau à l'aide de DIV requière de la rigueur, tout ce que fait le moteur de rendu des navigateurs pour une table est à prendre en compte pour justement que celui ci, le rendu, soit le plus prés de ce que l'on souhaite.

Cette rigueur n'est d'ailleurs pas de mise dans bien des sites utilisant les tableaux et le passage à un DOCTYPE strict renvoie une catastrophe.

Bien définir son besoin, optimiser son CSS au mieux en regroupant les points communs et en créant une autre class pour ce qui change, son autant de nécessités pour que cela ce passe bien.

OUI le travail est plus important qu'avec des TABLES, mais je n'appellerais pas cela une usine à gaz, mais juste la maitrise de ce que l'on fait.

Une table bien définie pour un bon rendu requière également du CSS, trop souvent incomplet, donc je dirais que cela n'est pas plus éprouvant enfin à peine.

Moult sites présentes la chose, mais je pense que tu doit tous les connaître.

Si c'est pour des données à afficher restes au niveau des tables qui ont été conçue pour cela au départ.

Citation:

6) Avez vous un exemple de code HTML montrant un tableau de cinq colonnes ou plus, employant CSS et non <table> et qui fonctionne?
Je pose la question... tout simplement parce que je n'en ai jamais vu!

Je te mets un exemple de tableau en CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS : Tableau</title> <meta name="Author" content="NoSmoking"> <style type="text/css"> .main_table { border : 1px solid #a0a0a0; width : 922px; margin : auto; font-family : Verdana, Arial; } .ligne { height : 42px; padding-top : 2px; padding-left : 2px; } .cellule { width : 170px; /* height : 28px; /* on lui prefere line-height */ line-height : 28px; margin-right : 2px; padding : 5px; /*-- --*/ border : 1px solid #e0e0e0; background-color : #f0f0f0; float : left; /* les commons */ font-size : 1em; } .cellule_2 { width : 354px; /* tient compte des padding */ } .titre { padding-left : 5px; /* padding-top : 5px;*/ /* height : 34px;*/ line-height : 39px; width : 911px; background-color : #f0f0fe; border : 1px solid #a0a0ff; } .col_0 { color : #4488bb; font-size : 1.2em; font-weight : bold; } .col_1 { font-weight : bold; } .col_2 { font-size : 0.8em; font-style : italic; } .col_3 { text-align : center; } .col_4 { text-align : right; } .col_5 { color : #f00; text-align : center; } </style> </head> <body> <div class="main_table"> <div class="ligne"> <div class="col_0 titre">Titre du tableau</div> </div> <div class="ligne"> <div class="col_1 cellule">col_1 cellule</div> <div class="col_2 cellule">col_2 cellule</div> <div class="col_3 cellule cellule_2">col_3 cellule cellule_2</div> <div class="col_5 cellule">col_5 cellule</div> </div> <div class="ligne"> <div class="col_1 cellule">col_1 cellule</div> <div class="col_2 cellule">col_2 cellule</div> <div class="col_3 cellule">col_3 cellule</div> <div class="col_4 cellule">col_4 cellule</div> <div class="col_5 cellule">col_5 cellule</div> </div> <div class="ligne"> <div class="col_1 cellule">col_1 cellule</div> <div class="col_2 cellule">col_2 cellule</div> <div class="col_3 cellule">col_3 cellule</div> <div class="col_4 cellule">col_4 cellule</div> <div class="col_5 cellule">col_5 cellule</div> </div> </div> </body> </html>
c'est perfectible, mais cela ce veux juste un exemple de ce que l'on peut faire.

Toujours bien penser à valider ces pages et également un gage de réussite.

30/01/2011, 14h45
thelvin

À la base, CSS à la place de <table>, ça a deux avantages :

- ne pas dire faussement que l'on présente des données tabulaires quand on ne le fait pas. Bref, rigueur sémantique.
=> Cet avantage-là, tout le monde s'en cogne en général.
=> Si ce sont bel et bien des données tabulaires, évidemment qu'il faut utiliser un tableau !

- remplacer une usine à gaz par un code clair, bien espacé, compréhensible, dont on connaît l'emplacement et le rôle de toute chose, et qui peut être restylé sans toucher au code des données.
=> Forcément, si tu estimes que c'est l'approche CSS qui transforme ce que tu as en usine à gaz, tu vas avoir du mal à la mettre en œuvre.

Mon avis :
- Pour des données tabulaires, pourquoi diable utiliser autre chose qu'un <table> ?
- La plupart du temps, l'approche CSS permet de retrouver un code clair et assez facile à maintenir... Mais ce n'est important que quand on a vraiment besoin de lire le code HTML. Si c'est du code généré, ça se discute.
- On ne peut pas faire en CSS tout ce qu'on peut faire avec des <table>... Ni l'inverse d'ailleurs. C'est donc un effort louable d'essayer autant que possible d'utiliser la sémantique adaptée, mais ce n'est pas toujours possible, du moins pas sans un CSS3 tiles entièrement géré par les navigateurs. Parfois, accepter un peu de lourdeur d'écriture pour juste avoir le rendu qu'on veut, il n'y a pas de honte à ça.
31/01/2011, 19h38
polymorphisme

Bonjour grunt2000,

voiçi un exemple de tableau créé à partir d'éléments div : http://www.les-croiseurs-daquitaine....her/about.html.

La raison de l'utilisation des CSS : le design du corps de la page est fluide, elle s'adapte à différentes dimensions d'écran. Dans quelques temps, je n'aurais pas difficulté à l'adapter aux petits format, style écran de téléphone portable et autres smartphones.

Après, il est nécessaire de bien maitriser les CSS.
31/01/2011, 19h50
NoSmoking

Citation:

Envoyé par polymorphisme

voiçi un exemple de tableau créé à partir d'éléments div : http://www.les-croiseurs-daquitaine....her/about.html.

en voila un exemple qu'il est bon!

CSS peut-il vraiment remplacer HTML pour les tableaux ?

Bonjour,

Comme grunt2000, je veux refondre un "vieux" site et le passer tout en css et même prendre de l'avance et faire du css3.

J'ai des pages avec des frames et j'ai vu sur d'autres forums que ce ne sera pas si facile à faire.

Mais pour en revenir au sujet de grunt2000, je me trouve confronté à un petit soucis :

Prenons, pour faire simple, le cas d'un tableau à 2 colonnes et plusieurs lignes.
Les colonnes impaires sont à gauche et les paires à droite.
J'alterne, les tailles :
ligne 1, col1 = 300, col2 = le reste
ligne 2, col3 = 600, col4 = le reste

Si je piste avec web developer sous FF, les div sont bien affichées dans le bon ordre.

La où ca ne marche pas, c'est quand col2 ou col4 est moins haut que col1.
Le contenu de col3 est affiché en plein milieu de col1 (càd à la fin du height de col2).
J'ai essayé un tas de truc, par exemple, englober col1 et 2 dans une pseudo ligne, mais là on attaque le bricolage et on perd la souplesse du remplacement de <table> par css.

Voici l'extrait correspondant de mon code css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 div.td { /* simule la balise td */ clear: both; /* nouveau pavé */ } div.tdG300 { /* simule la balise td gauche, taille de 300px */ position: absolute; width: 300px; border-right-width: thin; border-right-style: solid; border-right-color: grey; } div.tdD600 { /* simule la balise td droite, taille le reste */ margin-left: 300px; width: auto; } div.tdG600 { /* simule la balise td gauche, taille 650px */ position: absolute; width: 600px; border-right-width: thin; border-right-style: solid; border-right-color: grey; } div.tdD300 { /* simule la balise td droite, taille de 300px */ margin-left: 600px; width: auto; }
Par contre j'ai trouvé un très bon tuto sur le positionnement des div à l'adresse
http://www.barelyfitz.com/screencast...s/positioning/

Quelqu'un saurait-il comment faire cela proprement et facilement (ne surtout pas rajouter du js pour calculer la hauteur de la div, sinon se serait se marcher sur la tête.

merci;