Exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode des tableaux

Explications :

Dans cet exemple la mise en page est faite à base de tableaux, tous les aspects de la présentation sont gérés directement dans le code XHTML et à l'aide d'attributs relevant de ce langage. Il n'y a cependant pas d'énormes différences d'affichage entre cette version et la précédente.

Cependant cet exemple est une accumulation de mauvaises pratiques (même si le code passe la validation au prix d'un changement de DOCTYPE). Pour se conformer aux bonnes pratiques en la matière, il est en effet déconseillé de faire des mises en page à l'aide de tableaux ni d'intégrer des attributs de présentation au sein du code (X)HTML. De plus le CSS est un énorme progrès et qui a de nombreux avantages tels que légèreté du code, facilité de changer de design, etc.

Aujourd'hui le (X)HTML ne peut plus se passer du CSS. Il faut séparer au maximum la structure du document de sa mise en forme, et le CSS est là pour répondre à ce besoin.

Il permet surtout de faire des choses qui ne sont pas possibles ou, pour le moins, beaucoup plus complexes à réaliser en HTML pur : ce qu'il n'est pas possible de reproduire sans trop de complexité, avec cette méthode c'est la mise en page de la lettrine. Pour le reste on peut aboutir au même design au prix d'un code plus lourd et alambiqué.

Vous pouvez également noter que pour garder une page valide nous avons dû modifier le DOCTYPE utilisé : nous sommes passés du DOCTYPE Strict au DOCTYPE Transitional. En effet les attributs de présentation dans le code (X)HTML ne sont pas admis avec un DOCTYPE Strict, tandis qu'ils sont autorisés si on utilise un DOCTYPE Transitional.

Consultez l'exemple ci-dessus en pleine page : exemple 03a sur la mise en page XHTML avec l'ancienne méthode des tableaux.

Code XHTML :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode des tableaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<h1>
Exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode des tableaux
</h1>

  <table border="0" width="100%">
    <tr>
      <td>

        <table border="1" width="100%" bgcolor="lightgrey" cellspacing="0">
          <tr>
            <td>

              <table border="0" width="100%" cellspacing="0">
                <tr>
                  <td align="left">
                    <h2>
                      <font face="Arial, Serif" color="blue">
                      <u>
Exemple de site sans CSS et avec des tableaux
                      </u>
                      </font>
                    </h2>
                    <p>
Un exemple de présentation avec tableaux.
                    </p>
                  </td>
                  <td align="right">
                    <img src="../../commun/images/logo.gif" title="Logo" alt="" />
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </td>
    </tr>
    <tr>
      <td height="1">
      </td>
    </tr>

    <tr>
      <td>

        <table border="1" width="100%" bgcolor="lightgrey" cellspacing="0">
          <tr>
            <td>

              <table border="0" width="100%" cellspacing="0">
                <tr>
                  <td width="20%" valign="top">
                    <h3>
                      <font face="Arial, Serif" color="blue">
                      <u>
Menu
                      </u>
                      </font>
                    </h3>
                    <ul>
                      <li>
                        <a href="#">
Lien 1
                        </a>
                      </li>
                      <li>
                        <a href="#">
Lien 2
                        </a>
                      </li>
                      <li>
                        <a href="#">
Lien 3
                        </a>
                      </li>
                    </ul>
                  </td>
                  <td width="80%">
                    <img src="../../commun/images/logo_css.gif" align="right" alt="Logo CSS" />

                    <h3>
                      <font face="Arial, Serif" color="blue">
                      <u>
Contenu
                      </u>
                      </font>
                    </h3>

                    <p>
<font size="7"><b>L</b></font>orem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat quam quis 
dui. Proin sit amet purus ac quam interdum placerat. Aliquam a tellus eget arcu placerat pellentesque. 
Maecenas sed ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Mauris tincidunt libero at turpis. Suspendisse consequat rhoncus sapien. Aenean quam ipsum, adipiscing ac, 
interdum ut, pharetra et, est. Integer id magna in erat consectetur posuere. Nam vehicula nulla id urna. 
Aenean neque lectus, scelerisque in, condimentum sit amet, congue eu, lectus. Ut mattis. Quisque bibendum 
tincidunt velit. Sed laoreet. Nunc eleifend.
                    </p>
                    <p>
<font size="7"><b>S</b></font>ed sed felis. Mauris a dui. Ut metus. Suspendisse dictum nisl et dui. Sed 
metus elit, vehicula at, elementum quis, tincidunt ac, sem. Aenean eleifend, ipsum sed gravida porta, ante 
est tincidunt velit, sed commodo sapien quam ut arcu. Curabitur eu purus. Phasellus vulputate mi a felis. 
Suspendisse potenti. Sed at nisi et felis viverra adipiscing. Morbi ac nibh. Vestibulum in risus. Nullam 
auctor vehicula tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. In ut metus at magna sollicitudin molestie. Nunc nec diam sit amet lectus consectetur feugiat. 
Curabitur varius bibendum nisl. Sed viverra justo sed eros. In tempor dolor.
                    </p>
                    <p>
<font size="7"><b>S</b></font>uspendisse potenti. Sed vitae elit sed ligula dignissim semper. Pellentesque 
ligula leo, mollis quis, consequat sit amet, fringilla at, justo. Ut eros erat, fringilla vel, lobortis vel, 
faucibus nec, lorem. In vel felis. Sed sagittis neque lobortis nunc. Donec rhoncus mollis purus. Sed ac 
ligula non quam dictum blandit. Praesent at dui id lectus lacinia laoreet. In justo mi, congue et, convallis 
vitae, consectetur vitae, eros. Proin mattis est eu erat. Fusce pretium condimentum lorem. Suspendisse 
potenti. Quisque luctus mollis sem. Donec sollicitudin aliquam mauris. Sed pharetra libero vitae est. 
Vestibulum sagittis, tellus id suscipit semper, ligula velit pretium odio, sed pharetra magna neque a ante.
                    </p>
                    <p>
<font size="7"><b>D</b></font>uis rhoncus cursus tellus. Donec pharetra est vitae massa. Quisque neque 
neque, blandit ut, ultrices ut, pulvinar sit amet, ligula. Aliquam commodo. Donec dictum eros in magna. 
Suspendisse pulvinar dapibus risus. Sed eu nunc. Integer posuere urna ac arcu dapibus tincidunt. Aenean 
erat lorem, pulvinar sit amet, pretium sit amet, tristique in, velit. Etiam gravida, eros sollicitudin 
pellentesque eleifend, nunc mi commodo nisl, eget eleifend massa erat et mauris. Suspendisse potenti. 
Fusce tincidunt lobortis lectus. Phasellus molestie accumsan dolor. Duis massa ipsum, pretium nec, 
dignissim sed, porttitor pretium, purus.
                    </p>
                    <p>
<font size="7"><b>C</b></font>ras arcu ante, sagittis quis, dapibus vel, varius eu, dui. Morbi gravida nisl 
sit amet dui. Mauris fringilla adipiscing justo. Maecenas luctus justo sed nunc. Cras nisi nisl, euismod 
nec, malesuada eu, viverra quis, nulla. Cras gravida vestibulum sem. Etiam aliquet, quam sed convallis 
semper, quam quam congue sem, eget tincidunt ipsum eros vitae massa. Nunc sem. Fusce mollis lorem sed nisl 
elementum sollicitudin. Etiam convallis nisi in urna. Morbi lorem felis, tincidunt sit amet, tempor et, 
sollicitudin vitae, sem. Aenean ante. Morbi fermentum venenatis dui. Curabitur tincidunt lobortis ipsum. 
Phasellus sed erat eu mi tempor porttitor. Suspendisse potenti. Nam mollis ante nec libero. Quisque vehicula, 
neque non vestibulum malesuada, enim dolor congue leo, sit amet laoreet tellus tortor a purus. Fusce eu nibh. 
Duis et urna non odio dignissim gravida. 
                    </p>
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </td>
    </tr>
    <tr>
      <td height="1">
      </td>
    </tr>
    <tr>
      <td>

        <table border="1" width="100%" bgcolor="lightgrey" cellspacing="0">
          <tr>
            <td align="center" height="50">
Pied de page
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.