[HTML] interface avec des tables : qu'en pense le w3c ?

interface avec des tables : qu'en pense le w3c ? [HTML] - HTML/CSS - Programmation

Marsh Posté le 12-02-2003 à 18:06:22    

J'ai terminé une maquette de site sous toshop, je l'ai passée dans ImageReady pour la découper proprement et l'exporter. Je voudrais savoir ce que vous pensez du code généré.
 

Code :
  1. <html>
  2. <head>
  3. <title>menu5</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. </head>
  6. <body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
  7. <table width=750 border=0 cellpadding=0 cellspacing=0>
  8. <tr>
  9.  <td width=200 height=195 colspan=5>
  10.   <img src="images/index_01.gif" width=200 height=195 alt="" /></td>
  11.  <td width=550 height=345 colspan=8 rowspan=3>
  12.   <img src="images/index_02.gif" width=550 height=345 alt="" /></td>
  13.  <td width=0 height=195 nowrap></td>
  14. </tr>
  15. <tr>
  16.  <td width=200 height=24 colspan=5>
  17.   <img src="images/index_03.gif" width=200 height=24 alt="" /></td>
  18.  <td width=0 height=24 nowrap></td>
  19. </tr>
  20. <tr>
  21.  <td width=200 height=221 colspan=5 rowspan=3>
  22.   <img src="images/index_04.gif" width=200 height=221 alt="" /></td>
  23.  <td width=0 height=126 nowrap></td>
  24. </tr>
  25. <tr>
  26.  <td width=70 height=95 rowspan=2>
  27.   <img src="images/index_05.gif" width=70 height=95 alt="" /></td>
  28.  <td width=65 height=95 rowspan=2>
  29.   <img src="images/index_06.gif" width=65 height=95 alt="" /></td>
  30.  <td width=25 height=95 rowspan=2>
  31.   <img src="images/index_07.gif" width=25 height=95 alt="" /></td>
  32.  <td width=85 height=95 rowspan=2>
  33.   <img src="images/index_08.gif" width=85 height=95 alt="" /></td>
  34.  <td width=25 height=95 rowspan=2>
  35.   <img src="images/index_09.gif" width=25 height=95 alt="" /></td>
  36.  <td width=90 height=95 rowspan=2>
  37.   <img src="images/index_10.gif" width=90 height=95 alt="" /></td>
  38.  <td width=70 height=95 rowspan=2>
  39.   <img src="images/index_11.gif" width=70 height=95 alt="" /></td>
  40.  <td width=120 height=65>
  41.   <img src="images/index_12.gif" width=120 height=65 alt="" /></td>
  42.  <td width=0 height=65 nowrap></td>
  43. </tr>
  44. <tr>
  45.  <td width=120 height=30>
  46.   <img src="images/index_13.gif" width=120 height=30 alt="" /></td>
  47.  <td width=0 height=30 nowrap></td>
  48. </tr>
  49. <tr>
  50.  <td width=750 height=15 colspan=13>
  51.   <img src="images/index_14.gif" width=750 height=15 alt="" /></td>
  52.  <td width=0 height=15 nowrap></td>
  53. </tr>
  54. <tr>
  55.  <td width=50 height=145 rowspan=4>
  56.   <img src="images/index_15.gif" width=50 height=145 alt="" /></td>
  57.  <td width=104 height=53 colspan=2>
  58.   <img src="images/index_16.gif" width=104 height=53 alt="" /></td>
  59.  <td width=36 height=53>
  60.   <img src="images/index_17.gif" width=36 height=53 alt="" /></td>
  61.  <td width=560 height=145 colspan=9 rowspan=4>
  62.   <img src="images/index_18.gif" width=560 height=145 alt="" /></td>
  63.  <td width=0 height=53 nowrap></td>
  64. </tr>
  65. <tr>
  66.  <td width=140 height=12 colspan=3>
  67.   <img src="images/index_19.gif" width=140 height=12 alt="" /></td>
  68.  <td width=0 height=12 nowrap></td>
  69. </tr>
  70. <tr>
  71.  <td width=19 height=36>
  72.   <img src="images/index_20.gif" width=19 height=36 alt="" /></td>
  73.  <td width=121 height=36 colspan=2>
  74.   <img src="images/index_21.gif" width=121 height=36 alt="" /></td>
  75.  <td width=0 height=36 nowrap></td>
  76. </tr>
  77. <tr>
  78.  <td width=140 height=44 colspan=3>
  79.   <img src="images/index_22.gif" width=140 height=44 alt="" /></td>
  80.  <td width=0 height=44 nowrap></td>
  81. </tr>
  82. <tr>
  83.  <td width=50 height=0 nowrap></td>
  84.  <td width=19 height=0 nowrap></td>
  85.  <td width=85 height=0 nowrap></td>
  86.  <td width=36 height=0 nowrap></td>
  87.  <td width=10 height=0 nowrap></td>
  88.  <td width=70 height=0 nowrap></td>
  89.  <td width=65 height=0 nowrap></td>
  90.  <td width=25 height=0 nowrap></td>
  91.  <td width=85 height=0 nowrap></td>
  92.  <td width=25 height=0 nowrap></td>
  93.  <td width=90 height=0 nowrap></td>
  94.  <td width=70 height=0 nowrap></td>
  95.  <td width=120 height=0 nowrap></td>
  96.  <td width=0 height=0></td>
  97. </tr>
  98. </table>
  99. </body>
  100. </html>


 
(Je remplirai les ALT plus tard.)
 
L'interface finale sera peut-être conçue en css, mais je risque de ne pas avoir le temps de m'y plonger. Quelques questions donc : ce code passe-t-il le validateur (et puis comment tester ça d'ailleurs) ? La page s'affichera-t-elle correctement sur tous les navigateurs ?
 
Merci. :)

Reply

Marsh Posté le 12-02-2003 à 18:06:22   

Reply

Marsh Posté le 12-02-2003 à 18:15:18    

Reply

Marsh Posté le 12-02-2003 à 18:17:00    

tu t'en fous du validateur  ;)  
ça peut très bien passer partout même s'il te sort des erreurs
 
par contre le code n'est pas parfait
notamment la série des <td> vides vers la fin et parce que les attributs sont définis par width=140  et pas par width="140" (quotes)
mais ça passera quand même...

Reply

Marsh Posté le 12-02-2003 à 18:21:26    

Anakn a écrit :

tu t'en fous du validateur  ;)  
ça peut très bien passer partout même s'il te sort des erreurs
 
par contre le code n'est pas parfait
notamment la série des <td> vides vers la fin et parce que les attributs sont définis par width=140  et pas par width="140" (quotes)
mais ça passera quand même...


 
Tu es sûr que tu ne t'es pas perdu ici ? Tu n'aurais pas cliqué sur prog à la place de graphisme toi par hasard ?  :D  
 
Je dis ça, mais c'est pour ton bien...  [:totozzz]

Reply

Marsh Posté le 12-02-2003 à 18:27:03    

Kristoph a écrit :

http://validator.w3.org/


 
Ok merci.
 

Anakn a écrit :

tu t'en fous du validateur  ;)  
ça peut très bien passer partout même s'il te sort des erreurs
 
par contre le code n'est pas parfait
notamment la série des <td> vides vers la fin et parce que les attributs sont définis par width=140  et pas par width="140" (quotes)
mais ça passera quand même...


 
Effectivement c'est pas tant le validateur que la compatibilité avec les brouteurs existant qui m'intéresse, mais si on peut faire d'une pierre 2 coups hein... ;)
Je vais voir si on peut rajouter par défaut des guillemets partout, j'imagine (j'espère...) que oui.

Reply

Marsh Posté le 12-02-2003 à 18:30:12    

parappa a écrit :


 
Ok merci.
 
 
 
Effectivement c'est pas tant le validateur que la compatibilité avec les brouteurs existant qui m'intéresse, mais si on peut faire d'une pierre 2 coups hein... ;)
Je vais voir si on peut rajouter par défaut des guillemets partout, j'imagine (j'espère...) que oui.


 
Et bien écoutes, si tu as envie de tester ton site avec tous les brouteurs existants plutôt que de respecter un standard, c'est ton problème, mais ça risque d'être long...  :D  
 
Tandis que si tu respectes les standards, tu as déjà plus de chance de passer moins de temps à débugger ce que tu as écrit.

Reply

Marsh Posté le 12-02-2003 à 18:34:13    

HotShot a écrit :

Parappa : tu reviendras quand il y aura du contenu stp, passque là on peut pas te dire grand chose... [:mlc]  


 
Oui oui j'ai bien compris merci.

Reply

Marsh Posté le 12-02-2003 à 18:41:27    

J'ai tout un tas de doctype possibles, lequel est-ce que je dois utiliser ?

Reply

Marsh Posté le 12-02-2003 à 18:49:55    

Si je ne met pas de doctype je peux pas essayer le validateur. Là j'ai mis le premier de la liste, "HTML 4.01 Transitional".
 
Apparemment il aime pas les attributs du body.
 
<body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
 
Y a une alternative à ça ?

Reply

Marsh Posté le 12-02-2003 à 18:56:09    

HotShot a écrit :

déjà, prends l'habitude de mettre des guillemets aux attributs... et ca devrait aller un peu mieux (si tu ne veux pas utiliser de CSS)


 
Si si, je vais en utiliser (de toute façon pour faire des "iframe" convenables je suis obligé, et puis pour tous les textes, les liens etc.), là c'était simplement pour tester l'export direct d'ImageReady. J'en avais entendu beaucoup de mal, mais apparemment ça fonctionne relativement bien. Enfin j'ai rien trouvé pour lui faire mettre des guillemets, ça c'est chiant. (Edit : Ah bah si en fait c'est bon.)
 
Edit : avec des guillemets il ne me prend toujours pas mon body et ses attributs.


Message édité par parappa le 12-02-2003 à 18:59:40
Reply

Marsh Posté le 12-02-2003 à 18:56:09   

Reply

Marsh Posté le 12-02-2003 à 19:08:55    

1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2:  "http://www.w3.org/TR/html4/loose.dtd">
   3: <html>
   4: <head>
   5: <title>menu5</title>
   6: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   7: </head>
   8: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
   9: <table width="750" border="0" cellpadding="0" cellspacing="0">
  10:  <tr>
  11:   <td width="200" height="195" colspan="5">
  12:    <img src="images/index_01.gif" width="200" height="195" alt="" /></td>
  13:   <td width="550" height="345" colspan="8" rowspan="3">
  14:    <img src="images/index_02.gif" width="550" height="345" alt="" /></td>
  15:   <td width="0" height="195" nowrap></td>
  16:  </tr>
  17:  <tr>
  18:   <td width="200" height="24" colspan="5">
  19:    <img src="images/index_03.gif" width="200" height="24" alt="" /></td>
  20:   <td width="0" height="24" nowrap></td>
  21:  </tr>
  22:  <tr>
  23:   <td width="200" height="221" colspan="5" rowspan="3">
  24:    <img src="images/index_04.gif" width="200" height="221" alt="" /></td>
  25:   <td width="0" height="126" nowrap></td>
  26:  </tr>
  27:  <tr>
  28:   <td width="70" height="95" rowspan="2">
  29:    <img src="images/index_05.gif" width="70" height="95" alt="" /></td>
  30:   <td width="65" height="95" rowspan="2">
  31:    <img src="images/index_06.gif" width="65" height="95" alt="" /></td>
  32:   <td width="25" height="95" rowspan="2">
  33:    <img src="images/index_07.gif" width="25" height="95" alt="" /></td>
  34:   <td width="85" height="95" rowspan="2">
  35:    <img src="images/index_08.gif" width="85" height="95" alt="" /></td>
  36:   <td width="25" height="95" rowspan="2">
  37:    <img src="images/index_09.gif" width="25" height="95" alt="" /></td>
  38:   <td width="90" height="95" rowspan="2">
  39:    <img src="images/index_10.gif" width="90" height="95" alt="" /></td>
  40:   <td width="70" height="95" rowspan="2">
  41:    <img src="images/index_11.gif" width="70" height="95" alt="" /></td>
  42:   <td width="120" height="65">
  43:    <img src="images/index_12.gif" width="120" height="65" alt="" /></td>
  44:   <td width="0" height="65" nowrap></td>
  45:  </tr>
  46:  <tr>
  47:   <td width="120" height="30">
  48:    <img src="images/index_13.gif" width="120" height="30" alt="" /></td>
  49:   <td width="0" height="30" nowrap></td>
  50:  </tr>
  51:  <tr>
  52:   <td width="750" height="15" colspan="13">
  53:    <img src="images/index_14.gif" width="750" height="15" alt="" /></td>
  54:   <td width="0" height="15" nowrap></td>
  55:  </tr>
  56:  <tr>
  57:   <td width="50" height="145" rowspan="4">
  58:    <img src="images/index_15.gif" width="50" height="145" alt="" /></td>
  59:   <td width="104" height="53" colspan="2">
  60:    <img src="images/index_16.gif" width="104" height="53" alt="" /></td>
  61:   <td width="36" height="53">
  62:    <img src="images/index_17.gif" width="36" height="53" alt="" /></td>
  63:   <td width="560" height="145" colspan="9" rowspan="4">
  64:    <img src="images/index_18.gif" width="560" height="145" alt="" /></td>
  65:   <td width="0" height="53" nowrap></td>
  66:  </tr>
  67:  <tr>
  68:   <td width="140" height="12" colspan="3">
  69:    <img src="images/index_19.gif" width="140" height="12" alt="" /></td>
  70:   <td width="0" height="12" nowrap></td>
  71:  </tr>
  72:  <tr>
  73:   <td width="19" height="36">
  74:    <img src="images/index_20.gif" width="19" height="36" alt="" /></td>
  75:   <td width="121" height="36" colspan="2">
  76:    <img src="images/index_21.gif" width="121" height="36" alt="" /></td>
  77:   <td width="0" height="36" nowrap></td>
  78:  </tr>
  79:  <tr>
  80:   <td width="140" height="44" colspan="3">
  81:    <img src="images/index_22.gif" width="140" height="44" alt="" /></td>
  82:   <td width="0" height="44" nowrap></td>
  83:  </tr>
  84:  <tr>
  85:   <td width="50" height="0" nowrap></td>
  86:   <td width="19" height="0" nowrap></td>
  87:   <td width="85" height="0" nowrap></td>
  88:   <td width="36" height="0" nowrap></td>
  89:   <td width="10" height="0" nowrap></td>
  90:   <td width="70" height="0" nowrap></td>
  91:   <td width="65" height="0" nowrap></td>
  92:   <td width="25" height="0" nowrap></td>
  93:   <td width="85" height="0" nowrap></td>
  94:   <td width="25" height="0" nowrap></td>
  95:   <td width="90" height="0" nowrap></td>
  96:   <td width="70" height="0" nowrap></td>
  97:   <td width="120" height="0" nowrap></td>
  98:   <td width="0" height="0"></td>
  99:  </tr>
 100: </table>
 101: </body>
 102: </html>


 

Line 7, column 6: end tag for element "HEAD" which is not open (explain...).  
  </head>
        ^


 
Pourquoi il me dit ça :??:

Reply

Marsh Posté le 12-02-2003 à 19:29:14    

parappa a écrit :

[fixed]
   4: <head>
   5: <title>menu5</title>
   6: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   7: </head>


 
J'y connais rien, mais je pense qu'il faut rajouter des guillemets :
 
   6: <meta http-equiv="Content-Type" content="text/html"; charset="iso-8859-1" />

Reply

Marsh Posté le 12-02-2003 à 19:41:59    

parappa a écrit :

Si je ne met pas de doctype je peux pas essayer le validateur. Là j'ai mis le premier de la liste, "HTML 4.01 Transitional".
 
Apparemment il aime pas les attributs du body.
 
<body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
 
Y a une alternative à ça ?


Les CSS comme d'hab. Il faut en prendre l'habitude ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-02-2003 à 19:45:06    

gm_superstar a écrit :


Les CSS comme d'hab. Il faut en prendre l'habitude ;)


 
Ok pas de soucis. Une idée pour l'erreur sur le </head> ?

Reply

Marsh Posté le 12-02-2003 à 19:45:40    

parappa a écrit :

Pourquoi il me dit ça :??:


Parce que tu ne fais pas du XHTML ;)
Or ta balise <meta> est écrite comme en XHTML.


Message édité par gm_superstar le 12-02-2003 à 19:46:01

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-02-2003 à 19:46:25    

HotShot a écrit :

nope, la syntaxe est bien content="machin; charset=machin" />


 
Autant pour moi, désolé ;)

Reply

Marsh Posté le 12-02-2003 à 20:52:07    

gm_superstar a écrit :


Parce que tu ne fais pas du XHTML ;)
Or ta balise <meta> est écrite comme en XHTML.


 
Merci.

Reply

Marsh Posté le 12-02-2003 à 22:08:45    

Comment est-ce qu'on fait pour laisser une case vide dans un tableau ? 'me semble que le   ne fonctionne pas toujours. :??:

Reply

Marsh Posté le 12-02-2003 à 22:27:50    

'me semblait avoir lu que le   n'était pas invisible sur certains navigateurs (netscape 4 de mémoire, mais je peux me tromper - enfin si c'est que netscape 4 à la rigueur spatropgrave, mais qu'en pensera le validateur ? [:boidleau]).

Reply

Marsh Posté le 12-02-2003 à 22:30:15    

Ok je dois me tromper alors. Merci.

Reply

Marsh Posté le 12-02-2003 à 22:47:01    

parappa a écrit :

'me semblait avoir lu que le   n'était pas invisible sur certains navigateurs


 
Non, c'est juste qu'il y avait un éditeur qui écrivait   (sans le ; après) donc forcément ça s'affichait avec NS4.


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 12-02-2003 à 22:51:52    

Ok. Par défaut Imageready ne met rien par contre.

Reply

Marsh Posté le 13-02-2003 à 12:38:56    

parappa a écrit :

Ok. Par défaut Imageready ne met rien par contre.


 
Sisi il mets une images vide  :wahoo:

Reply

Marsh Posté le 13-02-2003 à 13:06:08    

Juste un truc : ImageReady peut aussi créer du code avec des calques positionnés en absolu au lieu de ces immondes tableaux.  
 
Il y a juste à cocher l'option "Generate CSS inline" (ou "Generate CSS in external file", ou un truc du genre) .

Reply

Marsh Posté le 13-02-2003 à 13:28:49    

Tu veux dire générer une feuille de style ? Oui j'ai vu, mais j'ai pas encore essayé.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed