Tableaux et CSS

**Denis Placé** · 25/03/2016, 08h13

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.

Invité · 25/03/2016, 08h43

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 html :

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

1
2
3
<div tableau80>
...
<div tableau40>

Crois-tu que ce soit la bonne syntaxe ??

A corriger.

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

Code css :

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

table { width:100%; }

A lire :

**Denis Placé** · 25/03/2016, 09h24

Bonjour jreaux62,

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

4/ Ensuite, pour les <table>, simplement

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

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.

Invité · 25/03/2016, 09h58

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

On utilise le CSS :

Code css :

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

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

**Denis Placé** · 25/03/2016, 10h32

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:

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 :

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
 
 
<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 :

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

1
2
3
4
5
6
7
8
9
.tableaucentre
	{
		margin:auto;
	}
 
.tableau80
	{
		width:80%;
	}

mais le tableau reste à gauche

Invité · 25/03/2016, 10h56

Corrige d'abord le code HTML, qui ne ressemble à rien.

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 html :

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

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" !

**Jacques Beauregard** · 25/03/2016, 10h58

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/

Tableaux et CSS [CSS 3]

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager