Tableaux et CSS

Version imprimable

Tableaux et CSS

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:

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:

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.

25/03/2016, 07h43
Invité
Bonjour Denis,

1/ Pour concevoir la mise en page, oublie les tableaux (<table>) qui ne servent qu'à afficher des données tabulaires.
Les tableaux sont du "contenu", comme des blocs de textes ou images,...

2/ => N'utilise que des <div> (ce que tu as déjà commencé à faire !) : et imagine que ce sont des "boites" qui s'empilent, ou s'enboitent.

DESSINE ces boites sur du papier !
Ce sera alors plus facile de coder le HTML et CSS.

3/ Par contre :
Code:

1 2 3 <div tableau80> ... <div tableau40>
Crois-tu que ce soit la bonne syntaxe ?? :aie:
A corriger.

4/ Ensuite, pour les <table>, simplement :

Code:

table { width:100%; }

A lire :
25/03/2016, 08h24
Denis Placé

Bonjour jreaux62,

Citation:

1/ ..... oublie les tableaux (<table>)

Citation:

4/ Ensuite, pour les <table>, simplement

Euh, ... je continue à utiliser <table> ou pas ?

Citation:

3/ <div tableau = tableau80>

Mais c'est bien sûr .... <div class="tableau80"> Merci.

NB: Comment ça se fait que les <BR> ne fonctionnent pas ?

Pour les liens, je regarde ça.
Merci.
25/03/2016, 08h58
Invité
On n'utilise pas <br /> pour la mise en page.

On utilise le CSS :
Code:

1 2 margin:.....; padding:....;

Citation:

On n'utilise pas <br /> pour la mise en page

Encore une vilaine habitude à perdre, il va falloir que je m'y habitue ...
Quand tu dis à propos des div:

Citation:

Imagine que ce sont des "boites" qui s'empilent, ou s'emboitent

Si je comprends bien, je veux un tableau de 80% de large et qu'il soit centré dans la page, je mets un HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class="tableau80"> <div class="tableaucentre"> <table> <table summary="Un tableau de 80% centré dans la page"> <tr> <td>Je</td> <td>voudrais</td> </tr> <tr> <td>bien centrer tout son contenu et être tout a fait certain que sa largeur soit bel et bien de 80% de</td> <td>largeur</td> </tr> </table> </div> </div> </table>
et en CSS:
Code:

1 2 3 4 5 6 7 8 9 .tableaucentre { margin:auto; } .tableau80 { width:80%; }
mais le tableau reste à gauche:(

25/03/2016, 09h56
Invité
Corrige d'abord le code HTML, qui ne ressemble à rien. :aie:

Ensuite, je t'ai conseillé de DESSINER sur du papier (avec des cadres de couleurs pour les différents <div>).
Ca permet de VISUALISER la mise en page que tu veux obtenir.
Le code vient après.

D'autre part, on peut très bien avoir un tableau de 80% (de son parent), et centré dans celui-ci (le parent)
Code:

1 2 3 4 5 <div> <table style="width:80%; margin:0 auto;"> .... </table> </div>
- 100% est la valeur par défaut pour un <div> (de type "block")
- pour une table, par défaut, elle adapte sa largeur à son contenu : il faut donc lui définir une largeur (100%, 80%,...) si on veut.
N.B. JE T'AI FOURNI UN LIEN VERS LA FAQ CSS : SUIS-LE ET LIS !!
Il y a aussi le GLOSSAIRE CSS.

Arrête de coder "à tâton" !
25/03/2016, 09h58
Jacques Beauregard

Salut,

Ta structure HTML est à revoir : car elle est fausse.. (deux <div> qui se ferment avant <table>)
http://j-willette.developpez.com/tut...bases-du-html/
25/03/2016, 10h06
Denis Placé

@Jreaux62 > Ok. Je tâche d'aller moins vite et je fais un dessin, promis.

@Jacques Beauregard > En effet, merci.

Bon, j'ai lu (attentivement) la faq et fait le dessin (en couleurs) mais ... force est de constater que je tourne en rond. Il doit y avoir une logique qui m'échappe ou/et j'interprète mal.
Mon code HTML est devenu :

Code:

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
<!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 class="tableau_sans_bordures">
          <table style="width:80% margin:0 auto;">
            <table summary="Resume (invisible) du contenu du tableau pour les malvoyants">
            <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>
 
 
        <p>Un tableau T2 de 40% de large avec 3 lignes et 2 colonnes et des bordures</p>
        <div class="tableau_avec_bordures">
          <table style="width:40% margin:0 auto;">
          <table summary="Resume (invisible) du contenu du tableau pour les malvoyants">
            <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>
 
 
 
        <p>Un tableau T3 de 40% de large avec 3 lignes et 2 colonnes sans bordures</p>
        <div class="tableau_sans_bordures">
          <table style="width:40% margin:0 auto;">
          <table summary="Resume (invisible) du contenu du tableau pour les malvoyants">
            <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>
      </main>
  </body>
</html>

Et mon CSS:

Code:

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
body
   {
      background: black;
   }
 
 
#container
   {
      background: white;
      max-width: 90%;
      margin:0 auto;
   }
 
main
   {
     clear:both;
     display:flex;
     width:100%;
   }
 
tableau_avec_bordures
   {  
      width:100%;
      border-collapse: collapse; /* Les bordures du tableau sont collées */
      margin: auto; /* permet de centrer le tableau */
      border: 3px;
   }
 
tableau_sans_bordures
   {
      width:100%;
      border-collapse: collapse; /* Les bordures du tableau sont collées */
      margin: auto; /* permet de centrer le tableau */
      border: 0;
   }

25/03/2016, 15h36
Invité
1/
Code:

1 2 3 4 5 6 main { ... display:flex; ... }
As-tu une explication ?

DANS <main>, se trouve AUSSI un <p> (directement enfant) -> lui-aussi est affecté par ce display:flex;
Ce que tu ne souhaitais certainement pas...

N.B. Et toujours des <BR> qui trainent...

2/
Code:

1 2 3 4 5 6 7 8 tableau_avec_bordures { ... } tableau_sans_bordures { ... }
C'est sûr qu'avec une syntaxe fausse, ça va moins bien...

3/ et quand le HTML est faux aussi, ça n'arrange rien (pourquoi 2 <table> ici ? ) :
Code:

1 2 3 <table style="width:40% margin:0 auto;"> <table summary="Resume (invisible) du contenu du tableau pour ...
Et pourquoi appliquer les classes "tableau_sans_bordures" et "tableau_sans_bordures" aux <div> au lieu de les appliquer aux <table> ?? :koi:

BREF : tu continues à passer ton code au mixer, en espérant que, par miracle, ça finisse par fonctionner...

5/ => et si tu nous montrais ton joli dessin ? :aie:

1 pièce(s) jointe(s)

Bonjour et encore merci,

Citation:

1/ As-tu une explication sur le display:flex; ?

Euh ... non.

2: Ok, j'avais effectivement oublié les points :oops::oops:

3/ Pourquoi 2 fois <table> ? C'est une mauvaise interprétation de ma part. Je ne comprends pas tout.....

Citation:

4/ Et pourquoi appliquer les classes "tableau_sans_bordures" et "tableau_sans_bordures" aux <div> au lieu de les appliquer aux <table>

Je ne suis pas sûr de comprendre ta remarque, désolé.

5/ Je crois cerner dans tes paroles quelques doutes donc je te prends au mot et t'envoie mon (très) joli dessin et je lis tes commentaires.
Merci.

Le HTML devient:

Code:

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
<!doctype html >
<html>
  <head>
    <meta charset = 'utf-8' />
    <link rel='stylesheet' href='feuille.css'>
  </head>
 
  <body>
    <div id="container">
      <header>
             Bla, bla
      </header>
 
      <main>
        Un tableau T1 de 80% de large avec 2 lignes et 2 colonnes au contenu centr&eacute; mais sans bordures
        <div class="tableau_sans_bordures">
          <table style="width:80% margin:0 auto;" summary="Resume (invisible) du contenu du tableau pour les malvoyants">
            <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>
 
 
        Un tableau T2 de 40% de large avec 3 lignes et 2 colonnes et des bordures
        <div class="tableau_avec_bordures">
          <table style="width:40% margin:0 auto;" summary="Resume (invisible) du contenu du tableau pour les malvoyants">
            <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>
 
 
 
        Un tableau T3 de 40% de large avec 3 lignes et 2 colonnes sans bordures
        <div class="tableau_sans_bordures">
          <table style="width:40% margin:0 auto;" summary="Resume (invisible) du contenu du tableau pour les malvoyants">
            <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>
      </main>
  </body>
</html>

Et le CSS:

Code:

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
body
   {
      background: black;
   }
 
 
#container
   {
      background: white;
      max-width: 90%;
      margin:0 auto;
   }
 
main
   {
     clear:both;
     width:100%;
   }
 
.tableau_avec_bordures
   {  
      width:100%;
      border-collapse: collapse; /* Les bordures du tableau sont collées */
      margin: auto; /* permet de centrer le tableau */
      border: 3px;
   }
 
.tableau_sans_bordures
   {
      width:100%;
      border-collapse: collapse; /* Les bordures du tableau sont collées */
      margin: auto; /* permet de centrer le tableau */
      border: 0;
   }

Vu.

en fait, tes tableaux sont simplement l'un en dessous de l'autre (et pas l'un à coté de l'autre).

Du coup, c'est très simple :
Code:

1 2 3 4 5 6 7 8 <div id="container"> <table class="w80 hcentrer"> ... </table> <table class="w40 hcentrer"> ... </table> </div>
Code:

1 2 3 4 5 6 7 8 9 10 #container { width:90%; margin:0 auto; /*centrage horizontal */ } .w80 { width:80%; } .w40 { width:40%; } table.hcentrer { margin:20px auto; /* on indique ici des marges haut/bas (ce qui évite les <BR> !) + auto = centrage horizontal */ }
IMPORTANT : un BON code est un code SIMPLE !

A partir du moment où ton code (HTML ou CSS) devient trop complexe, c'est certainement que tu t'engages dans une mauvaise direction...

Code:

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
<div id="container">
  <header>
    Bla, bla
  </header>
 
  <main>
 
    <table class="w80 hcentrer tableau_sans_bordures" summary="Resume (invisible) du contenu du tableau pour les malvoyants">
      <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>
 
    <table class="w40 hcentrer tableau_avec_bordures" summary="Resume (invisible) du contenu du tableau pour les malvoyants">
      <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>
 
 
    <p>Un tableau T3 de 40% de large avec 3 lignes et 2 colonnes sans bordures</p>
 
    <table class="w40 hcentrer tableau_avec_bordures" summary="Resume (invisible) du contenu du tableau pour les malvoyants">
      <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>

Code:

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
body {
  background: black;
}
 
header {
  background: green;
}
 
#container {
  width: 90%;
  margin: 0 auto;
  /*centrage horizontal */
  background: white;
}
 
main {
  clear: both;
}
 
.w80 {
  width: 80%;
}
 
.w40 {
  width: 40%;
}
 
table {
  border-collapse: collapse;
  /* Les bordures du tableau sont collées */
}
 
table.hcentrer {
  margin: 20px auto;
  /* on indique ici des marges haut/bas (ce qui évite les <BR> !) + auto = centrage horizontal */
}
 
.tableau_avec_bordures {
  border: 3px solid #ccc;
}
 
.tableau_sans_bordures {
  border: 0;
}

26/03/2016, 08h46
Denis Placé

Super :merci:
Ca fonctionne.
Félicitation pour ta patience.