Discussion :

[lodan]

Bonjour,

J'ai fais une présentation de page avec 2 tableaux imbriqués et je me pose la question de savoir s'il n'existe pas d'autres solutions que l'utilisation de tableau.

Dans la partie droite, j'affiche les données à saisir, et dans la partie gauche, j'affiche les messages d'erreur qui peuvent me revenir du serveur.

L'objectif étant de ne pas mettre les messages au début de la page sinon il descend le contenu de la présentation et ce n'est pas très beau.

Si je le met en bas c'est pas terrible non plus puisque cela peut générer une pagination ce qui fait que le user peut se poser la question de ce qui se passe.

Ces contrôles sont des contrôles d'intégrité de données qui ne peuvent se faire que côté serveur, donc l'usage du javascript n'est pas possible.

Voici mon code de tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<table border="0">
<colgroup>
<col width="65%">
<col width="35%">
</colgroup>
<tr>
<td>
<table border="0">
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tr>
      <td><b>Type de requête</b> :</td>
	  <td colspan="3">
		<select name="sql_type_id">
			<option value=""></option>
			{foreach from=$sql_types item=sql_type key=type_sql_id}
 
	  			<option value="{$sql_type.sql_type_id}"
	  				{if ($sql_type.sql_type_id == $sql_type_id)}
	  					 selected
	  				 {/if}
	  					>{$sql_type.libelle}</option>			
			{/foreach}
		</select>
	  </td>
   </tr>
   <tr>
      <td><b>Libellé</b> :</td>
	  <td colspan="3"><input type="text" name="libelle" size="50" value="{$libelle}" alt=" nom : Libellé ; test :  ; obligatoire:true"></td>
   </tr>
   <tr >
      <td valign="top"><b>Requête</b> :</td>
	  <td colspan="3"><textarea cols="80" rows="10" name="sql_requete">{$sql_requete}</textarea></td>
   </tr>
</table>
</td>
<td valign="top">
<table border="0" align="center">
<tr>
<td align="left">
<font color="red">
{$messages}
</font>
</td>
</tr>
</table>
</td>
</tr>
 
</table>

Merci pour vos avis

[francis m]

je n'ai pas lu ton code, mais par principe, l'utilisation de tableaux n'est pas recommandée pour la mise en page. tu devrais utiliser des divs, au moins pour tes deux colonnes. va voir dans les tutoriels pour en savoir plus.

par contre, cela ne veut pas dire qu'il faut totalement proscrire les tableaux : si tu as une série de données de même type, les tableaux sont adéquats

[lodan]

Bon j'ai essayé, mais alors c'est d'un compliqué à mettre en place, en plus cela ne fait pas naturellement les colonnes.

En résumé pourquoi ne pas faire de table ???

[Hibou57]

Bon j'ai essayé, mais alors c'est d'un compliqué à mettre en place, en plus cela ne fait pas naturellement les colonnes.

En résumé pourquoi ne pas faire de table ???

Salut

Voici un petit peu de lecture : En quoi la mise en page par par tableaux doit-elle être évité... De toute les manière de présenter ce sujet, c'est celle-ci que je préfère. Tu découvrira pourquoi c'est a éviter, et tu poursuivra par des introduction à certaines solution. Par la même occasion, tu découvrira d'autres aspects et fondements conceptuel du css.

Pour te convaincre, quand lors de la lecture du premier didactitiel, tu sera sur la page (un tableau d'allure plaisante), alors dans le menu de ton navigateur, tu pourra faire « affichage -> source », pour voir le code source et le carnage qui y reigne (tu verra que tu as au moins 20 ou 30 fois plus de balise que de contenu). A contrario, quand tu sera à la page aprés-aprés (ps la suivante, mais celle d'encore aprés), tu pourra faire le même controle sur le code de la page, et tu verra à quel point le code est infiniment plus léger.

Voili-voilou

wa à la revoyure ...

[lodan]

Merci, hibou57.

Très intéressant et je n'ai fait que lire et faire des exercices depuis ce matin.

Bon, voila mon résumé.

Les div c'est pour séparer une page en différentes parties, mais bon, je ne suis jamais arrivé à faire 3 colonnes si cela était nécessaire.

Donc c'est : si possible faite des div et si c'est pas possible autrement des tableaux.

Exemple impossible en div (compte tenu de mes compétences peut-être

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<table class="sortable" id="l_majeurs">
<colgroup>
<col width="7%">
<col width="7%">
<col width="1%">
<col width="20%">
<col width="65%">
</colgroup>
   <tr class="t_titre">
      <td colspan="3"><b>Actions</b></td>
	  <td><b>Type de requêtes</b></td>
	  <td><b>Descriptions</b></td>
   </tr>
 
{foreach from=$requetes item=requete key=sql_id}
 
	<tr>
		{if $histo=="" and $requete.id_trt!="5"}
		<td>{if $requete.id_trt != "5"}<input type="button" onclick="javascript:window.location = 'modifier_requete.php?send_sql_id={$requete.sql_id}&send_trt=modifier';" value="Modifier">{/if}</td>
		<td>{if $requete.id_trt != "5"}<input type="button" onclick="javascript:window.location = 'modifier_requete.php?send_sql_id={$requete.sql_id}&send_trt=supprimer';" value="Supprimer">{/if}</td>
    	{if $requete.id_trt == "1"}
	   		<td><img src="{#prefixe_site#}images/Green.ico" alt="Valide"></td>
	   	{elseif $requete.id_trt == "5"}
		   	<td><img src="{#prefixe_site#}images/archive.png" alt="Archive"></td>
	   	{else}
	   		<td><img src="{#prefixe_site#}images/Red.ico" alt="A Valider"></td>
   		{/if}
   		<td class='t_cell'><input type="hidden" name="sql_id" value={$requete.sql_id}>{$requete.sql_type_id|getRequete}</td>
   		<td class='t_cell'>{$requete.libelle}</td>
   		{/if}
	</tr>
{/foreach}
 
</table>

Si je remplace ma table par div et ma ligne par div, je n'ai plus de découpage possible en colonne pour le titre par rapport au corps de mes lignes. Le corps lui-même n'est pas mis en colonnes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div class="t_titre">
      <strong>Actions Type de requêtes Descriptions</strong>
   </tr>
</div>
{* Boucle d'affichage du r?sultat *}
{* {$tables|@debug_print_var}*}
 
{foreach from=$requetes item=requete key=sql_id}
 
	<li>
		{if $histo=="" and $requete.id_trt!="5"}
		{if $requete.id_trt != "5"}<input type="button" onclick="javascript:window.location = 'modifier_requete.php?send_sql_id={$requete.sql_id}&send_trt=modifier';" value="Modifier">{/if}
		{if $requete.id_trt != "5"}<input type="button" onclick="javascript:window.location = 'modifier_requete.php?send_sql_id={$requete.sql_id}&send_trt=supprimer';" value="Supprimer">{/if}
    	{if $requete.id_trt == "1"}
	   		<img src="{#prefixe_site#}images/Green.ico" alt="Valide">
	   	{elseif $requete.id_trt == "5"}
		   	<img src="{#prefixe_site#}images/archive.png" alt="Archive">
	   	{else}
	   		<img src="{#prefixe_site#}images/Red.ico" alt="A Valider">
   		{/if}
   		<input type="hidden" name="sql_id" value={$requete.sql_id}>{$requete.sql_type_id|getRequete}
   		{$requete.libelle}
   		{/if}
	</li>
{/foreach}
 
</div>

J'ai mis comme balise pour mes lignes <li>, mais j'ai un caractère (losange), je ne peux pas mettre <p> puisque cela fait un espace de trop entre chaque ligne.

Pour les colonnes, une idée ?

Merci

[Hibou57]

Bonjour Pierre,

La différence entre les divs et les tableau est d'odre sémantique et non pas présentationelle. Quand un moteur de recherche arrive sur une page contenant un tableaux, il suppose un ensemble de donnée tabulaires/hierarchiques (une sorte de mini base de données). Quand ce même robot arrive sur des div, il suppose un organisation structurelle du document. Un tableau est un peu comme un fonction à deux arguments, la présentation d'un document n'a rien à voir avec cela.

Donc j'aurais tendance à dire, si on ne peut pas le faire avec des div, alors il faut peut-être trouver une autre forme de présentation.

Bon, maintenant je reconnais bien sure que le tableau à aussi des caractéristique pour la présentation... ou plus précisement, on donne une représentation typique à une fonction à deux arguments dans un domaine discret et fini. Et bien sure cette représentation qu'on donne typiquement à ce type de fonction, peut être utiliser pour autre-chose. J'y viens, mais tout d'abord, je souligne encore un fois que la balise « table » fait référence à la sémantique, et non pas à la présentation. Il se peut tout à fait d'ailleur un navigateur présente un « tableau » (je parle de la fameuse catégorie de fonction) sous forme d'une arbre à deux niveau... c'est tout à fait possible. Et un navigateur vocal (pour non voyant-e-s), les présentera encore autrement. Alors imagine un peu le désastre si un navigateur spécialisé, ou un indexeur de contenu arrive sur ta page : le résultat n'a aucun sens. Le résultat sera exactement le même que si sur la route on confondait les panneaux publicitaires et les panneaux de signalisation.

En ce qui concerne la présentation qui est employé pour les tableau (et qui ne sont donc pas les tableaux en eux même), cette présentation est prévue par CSS. Dans documentations de références (que tu sais probablement où trouver), tu trouvera à l'entrée de la propriété « display », des valeur possible comme « table », « table-cell », « inline-table », etc, etc.

Cette propriété display, assigné à ces valeurs, permet de créer des div (ou autre chose) qui se comporte comme tu le souhaite. Mais encore une fois, ceci est une présentation, ce n'est pas le tableau (bien que le mot tableau soit employé dans les deux cas - c'est ce que la linguistique nomme « polysémie »).

Le problème, je te le concède si tu l'as deviné, c'est qu'il y a des problèmes de support avec les navigateur.. le pire étant bien sure... on aura même pas besoin de le nomé.

Mais autant que possible, c'est sur les possibilité de présentation de CSS qu'il faudra se repose.... mais cela dépend aussi de tes propres éxigences.

N.b. je n'ai pas encore pris le temps de lire ton exemple... je te promet d'essayer de trouver le temps de le faire.

Tu es étudiant(e) en info ? Tu fais un stage ? Tu es employé(e) comme webmaster-resse ? (s'cuse moi si je suis trop curieux)

à+