Avis sur l'utilisation de tableaux

Question

Stoomm

9 Dec 2009 à 11:57

Bonjour à tous Smiley smile

Nouveau sur le forum, alsacréations m'a souvent aidé par le passé à trouver la solutions a mes problèmes. Aujourd'hui, j'en ai un qui me prend la tête et j'aimerais avoir votre avis.

J'ai lu partout que l'utilisation des tableaux était à proscrire pour la mise en page et à remplacer par du CSS, sauf cas rare.

Je voudrais vous soumettre 2 cas.

1) L'affichage de données : Je souhaite afficher des données simples. Cependant, il peut arriver que certaines colonnes soit plus grande (texte sur 2 lignes par exemple) et au vu de ce qui est dit ici :

http://www.alsacreations.com/tuto/lire/538-Construire-un-site-sans-tableaux.html (Les limites actuelles du positionnement CSS)

j'ai préféré passé par un tableau pour cela. Sauf erreur, le tableau est fait pour mettre en forme des données. Tous mes styles sont bien sur dans le CSS.

Cela vous choque-t-il ?

2) Ca se corse. Je travaille actuellement avec Zend Framework pour ceux qui connaissent. J'essaie de trouver un modèle pour l'affichage de mes formulaires et le tableau me semble être une solution très pratique. Je me suis inspiré de ce tuto ici : http://devzone.zend.com/article/3450 (attention, c'est du Zend et de l'anglais).

On arrive à un résultat comme celui-là :


<form enctype="application/x-www-form-urlencoded" action="" method="post">
<table>
    <tr>
        <td><label for="username" class="optional">Username:</label></td>
        <td class="element">
            <input type="text" name="username" id="username" value="">
        </td>
    </tr>
    <tr>
        <td><label for="firstname" class="optional">First Name:</label></td>
        <td class="element">
            <input type="text" name="firstname" id="firstname" value="">
        </td>
    </tr>
    <tr>
        <td><label for="lastname" class="optional">Last Name:</label></td>
        <td class="element">
            <input type="text" name="lastname" id="lastname" value="">
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="element">
            <input type="submit" name="save" id="save" value="Save">
        </td>
    </tr>
</table>
</form>

J'ai réussi à obtenir le même résultat en CSS pure mais je le trouve moins pratique à lire et plus chiant à mettre en place. (Je ne suis pas une bête en CSS, ceci expliquant cela).

Même question que précédemment, cela vous choque-t-il ?

Merci d'avance pour vos réponses.

;)

Mikachu

9 Dec 2009 à 12:14

Salut,

Stoomm a écrit :
Sauf erreur, le tableau est fait pour mettre en forme des données.

Des données tabulaires. Tout autre type de données est un détournement déconseillé, mais qui peut parfois être préférable. Dans ton cas je ne saurais pas dire, il faudrait un peu plus de détails.

Concernant ton formulaire, il serait aussi simple de le faire dans cette idée, pas franchement plus compliquée à mettre en forme, même sur plusieurs colonnes, ce qui pose généralement le plus de difficultés.


<form enctype="application/x-www-form-urlencoded" action="" method="post"> 
<p>
  <label for="username" class="optional">Username:</label>
  <input type="text" name="username" id="username" value="">
</p>
<p>
  <label for="firstname" class="optional">First Name:</label> 
  <input type="text" name="firstname" id="firstname" value=""> 
</p>
<p>
  <label for="lastname" class="optional">Last Name:</label>
  <input type="text" name="lastname" id="lastname" value=""> 
</p>
<p>
  <input type="submit" name="save" id="save" value="Save"> 
</p>
</form>

MoOx

9 Dec 2009 à 15:48

+1
Je vois pas trop l'intéret de redéfinir le décorateur par defaut de Zend_Form pour mettre ça en table... Après le dl dt dd pour un form ça se discute.

Stoomm

9 Dec 2009 à 17:08

Rebonjour,

Merci pour vos réponses. En effet, comme je vous le disais, je suis loin d'être encore une bête en CSS.

La hasard aidant, en cherchant la définition de "données tabulaires", je suis tombé sur un lien traitant de la mise en forme des liste de définition comme un tableau. J'ai donc laissé le fonctionnement par défaut de Zend et mis en forme mes formulaires à base de dl, dt et dd.
Mais je reste d'accord pour dire que cela se discute Smiley cligne

Ensuite, concernant le cas numéro 1, voici un exemple bête et méchant de ce que j'ai à afficher :


<html>
   <HEAD>
	<STYLE type="text/css">
	<!--

	table#contact {
	    background-color:#ccc;
	     width:1000px;
	}

	table#contact td { background-color: white; }
	table#contact th { background-color: white; }
			
	-->
	</STYLE>
   </HEAD>

   <body>
        <table id="contact" cellspacing="1">
           <tr>
              <th>
                 Nom
              </th>
              <th>
                 Prenom
              </th>
              <th>
                 Fonction
              </th>
              <th>
                 Téléphone 1
              </th>
              <th>
                 Téléphone 2
              </th>
              <th>
                 Fax
              </th>
              <th>
                 Email
              </th>
              <th>
                 commentaire
              </th>
           </tr>
           <tr>
              <td>
                  PLOUF 
              </td>
              <td>
                  Toto
              </td>
              <td>
                  Consultant
              </td>
              <td>
                  0606060606 
              </td>
              <td>
                  0101010101
              </td>
              <td>
                  0102030405
              </td>
              <td>
                 toto@ssii.com
              </td>
	      <td></td>
	   </tr>
           <tr>
              <td>
                  DUPONT-DURAND 
              </td>
              <td>
                  Jean-François
              </td>
              <td>
                  Directeur du service informatique
              </td>
              <td>
                  06 06 06 06 06 
              </td>
              <td>
                  01 01 01 01 01
              </td>
              <td>
                  01 02 03 04 05
              </td>
              <td>
                 jfdupontdurant@unesociete.com
              </td>
	      <td></td>
	   </tr>
        </table>
      </body>
   </html>

Bref, un tableau qui parfois est sur une ligne, parfois 2 quand pas assez de place. Si vous connaissez un moyen simple de faire aussi bien sans les tableaux, je prends (et ca me fera progresser en CSS Smiley cligne

).

Merci à tous pour vos avis Smiley smile

~~supprimé~~

9 Dec 2009 à 18:49

Stoomm a écrit :
Bref, un tableau qui parfois est sur une ligne, parfois 2 quand pas assez de place. Si vous connaissez un moyen simple de faire aussi bien sans les tableaux, je prends (et ca me fera progresser en CSS ).

Absolument aucun intérêt Smiley cligne

mistike

9 Dec 2009 à 19:19

Stoomm a écrit :

Bref, un tableau qui parfois est sur une ligne, parfois 2 quand pas assez de place. Si vous connaissez un moyen simple de faire aussi bien sans les tableaux, je prends (et ca me fera progresser en CSS ).

Les tableaux sont déconseillés pour *la mise en page*. Par contre quand il s'agit d'afficher... des tableaux Smiley langue

, ils sont tout indiqués et irremplaçables. Au même titre qu'un <form> et là pour afficher un formulaire, un <table> est là pour afficher un tableau !

En clair, si naturellement tu présenterais tes données dans un tableur, ou dans un traitement de texte en insérant un tableau, alors c'est un tableau. Et donc il faut utiliser la balise sémantiquement prévue pour : <table>.

Ensuite tu utilises le CSS pour mettre ta table en forme (première ligne en gras sur fond bleu, bordures roses, tout ça...).

Par contre si c'est juste pour pouvoir bien aligner une phrase et des icônes autour pour faire joli, alors là non.
Modifié par mistike (09 Dec 2009 - 19:20)

Stoomm

9 Dec 2009 à 19:28

Merci à tous pour les réponses.

Cela me va très bien Smiley cligne

Sujet clos

Sémantique web et HTML

Avis sur l'utilisation de tableaux