Bonjour,

Je suis en train de refaire mon site qui comporte, entre autre, des centaines de pages comportant des tableaux différents (nombre de lignes, colonnes, bordures, etc.). Certains tableaux comportent du texte alors que d'autres comportent des images. Mon objectif est de repartir sur des bases saines.
Mon code HTML serait par exemple le suivant :
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype html >
<html>
  <head>
    <meta charset = 'utf-8' />
    <link rel='stylesheet' href='feuille.css'>
  </head>
  <body>
    <div id="container">
      <header>
             Bla, bla
      </header>
 
      <main>
        <p>Un tableau T1 de 80% de large avec 2 lignes et 2 colonnes au contenu centr&eacute; mais sans bordures</p>
        <BR><div tableau80>
          <table>
            <tr>
              <td>Je</td>
              <td>voudrais</td>
            </tr>
            <tr>
              <td>bien centrer tout son contenu et etre tout a fait certain que sa largeur soit bel et bien de 80% de</td>
              <td>largeur</td>
            </tr>
          </table>
        </div>
 
<BR>
        <p>Un tableau T2 de 40% de large avec 3 lignes et 2 colonnes et des bordures</p>
        <div tableau40>
          <table>
            <tr>
              <td>centr&eacute;</td>
              <td>centr&eacute;</td>
            </tr>
            <tr>
              <td>alignement droite</td>
              <td>alignement gauche</td>
            </tr>
            <tr>
              <td>alignement droite</td>
              <td>alignement gauche</td>
            </tr>
          </table>
        </div>
 
 
<BR>
        <p>Un tableau T3 de 40% de large avec 3 lignes et 2 colonnes sans bordures</p>
        <div tableau40>
          <table>
            <tr>
              <td>centr&eacute;</td>
              <td>centr&eacute;</td>
            </tr>
            <tr>
              <td>alignement droite</td>
              <td>alignement gauche</td>
            </tr>
            <tr>
              <td>alignement droite</td>
              <td>alignement gauche</td>
            </tr>
          </table>
      </main>
    </div>
  </body>
</html>
et le CSS celui-ci:
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
#container
   {
      max-width: 100%;
      margin:0 auto;
 
   }
 
main
   {
     clear:both;
     display:flex;
     width:90%;
   }
 
table
   {
      border-collapse: collapse; /* Les bordures du tableau sont collées */
   }
 
.tableau40
   {
      width:40%;
   }
 
.tableau80
   {
      width:80%;
   }
J'ai les problèmes suivants:
  • Tout s'affiche sur une ligne (les sauts à la ligne semblent inopérants).
  • Comment réaliser les alignements et bordures de la façon la + efficace connaissant les nombre important de combinaisons ?


Pourriez-vous m'aiguiller, svp ? Merci.