Centrer une TABLE

**Media20** · 13/07/2021, 19h04

Bonjour a tous.
Je ne peux centrer un tableau via CSS.
Je ne peux que sur le code comme cela:
https://www.developpez.com/
Pieces jointes
CSS et html

Code HTML :

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Acces restreint</title>
<!-- chargement des feuilles de style -->
 
 
<script src="scr/jquery.js"></script>
<script src="scr/modernizr.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/styletab.css" rel="stylesheet" type="text/css">
</head>
<body class="no-js">
<!-- Emplacement du menu -->		
<nav id="topNav">
<ul>
<li><a href="#" title="">Accueil</a></li>
<li><a href="#" title="">Diaporamas</a>
<ul>
<li><a href="#" title="">HTML</a></li>
<li><a href="#" title="">jQuery</a></li>
<li><a href="#" title="">Flash</a></li>
</ul>
</li>
<li><a href="#" title="">Lightbox</a></li>
<li><a href="#" title="">Scripts</a>
<ul>
<li><a href="#" title="">Javascript</a></li>
<li><a href="#" title="">jQuery</a></li>
</ul>     				
</li>
<li class="last"><a href="#" title="">Contact</a></li>
</ul>
</nav>
<!-- Emplacement du contenu --><!-- Initialisation de la fonction -->	
<!-- chargement des scripts -->	
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
(function($){
var nav = $("#topNav");
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();});
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();});}
});
})(jQuery);
</script>
<!-- fin navbar --> 
</body>
<img src="Images/communes/fond1.png" alt="">
<img src="Images/Users/fond_bandeau_2..png" alt="">
https://www.developpez.com/
<tr>
  <td>Créez votre compte</td>
  <td>Connectez-vous</td>
</tr>
<tr>
  <td>Créez votre compte en quelques clics</td>
  <td>Accédez directement à votre compte</td>
</tr>
<tr>
    <td>Email</td>
    <td>Email</td>
</tr>
<tr>
   <td><input type="text" id="email1" class="form-control"></td>
    <td><input type="text" id="email2" class="form-control"></td>
</tr>
<tr>
    <td>Confirmation email</td>
    <td>Mot de passe</td>
</tr>
<tr>
    <td><input type="text" id="email3" class="form-control"></td>
    <td><input type="text" id="email4" class="form-control"></td>
</tr>
<tr>
    <td>Mot de passe</td>
    <td><input type="checkbox" value="0" onclick="if (this.checked) this.value=1; else this.value=0;alert(this.value);" name="sev1_relance" />   Se souvenir de moi</td>
</tr>
<tr>
    <td><input type="text" id="email" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Confirmation mot de passe</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="email5" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>aaaaa</td>
    <td></td>
</tr>
<tr>
    <td>aaaaa</td>
    <td></td>
</tr>
<tr>
    <td>Nom*</td>
    <td></td>
</tr>
	<tr>
    <td><input type="text" id="nom" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Prénom*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="prenom" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Adresse*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="adresse" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Code postal*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="cp" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Ville*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="ville" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
	</table>
<p>Traitement des données à caractère personnel</p>	
<p>Les informations personnelles que vous nous communiquez par l'envoi d'un courrier électronique, par connection à un service en ligne, par renseignement d'un formulaire ou par tout autre moyen sont strictement confidentielles et destinées au traitement de vos demandes par nos services. Elles ne sont transmises à aucun tiers ni à titre onéreux ni à titre gratuit. Conformément à la loi n° 78-17 du 6 janvier 1978 modifiée en 2004 et au Règlement Général sur la Protection des données (RGPD) 2016/679 du Parlement européen et du Conseil du 27 avril 2016, vous bénéficiez d'un droit d'accès, de rectification ou de suppression des informations qui vous concernent, que vous pouvez exercer en vous adressant à :</p>
<p>La Déléguée à la protection des données </p>
	<ul>
  <li>soit par téléphone 07.86.52.32.10</li>
  <li>soit par courriel pascal@sos-chiens-dordogne.fr</li>
  <li>soit à l'adresse postale suivante :</li>
</ul>
 
</html>

Css:

Code :

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

1
2
3
4
5
6
7
8
9
10
table{
      border-collapse: collapse;
      width: 1000px;
}
 
td{width: 500px;
   border: 1px solid black;
   padding: 10px;
   height: 20px;
}

ceci : https://www.developpez.com/, est une erreur
Merci a tous

Invité · 15/07/2021, 17h28

Bonjour,

1-dans le code que vous avez fournis, vous avez bien déclaré la balise de fermeture </table> mais avez oublié la balise ouvrante <table>. Il faut donc la rajouter. La balise </body> est aussi mal positionné.

Code html :

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Acces restreint</title>
<!-- chargement des feuilles de style -->
 
 
<script src="scr/jquery.js"></script>
<script src="scr/modernizr.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/styletab.css" rel="stylesheet" type="text/css">
</head>
<body class="no-js">
<!-- Emplacement du menu -->		
<nav id="topNav">
<ul>
<li><a href="#" title="">Accueil</a></li>
<li><a href="#" title="">Diaporamas</a>
<ul>
<li><a href="#" title="">HTML</a></li>
<li><a href="#" title="">jQuery</a></li>
<li><a href="#" title="">Flash</a></li>
</ul>
</li>
<li><a href="#" title="">Lightbox</a></li>
<li><a href="#" title="">Scripts</a>
<ul>
<li><a href="#" title="">Javascript</a></li>
<li><a href="#" title="">jQuery</a></li>
</ul>     				
</li>
<li class="last"><a href="#" title="">Contact</a></li>
</ul>
</nav>
<!-- Emplacement du contenu --><!-- Initialisation de la fonction -->	
<!-- chargement des scripts -->	
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
(function($){
var nav = $("#topNav");
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();});
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();});}
});
})(jQuery);
</script>
<!-- fin navbar --> 
 
<img src="Images/communes/fond1.png" alt="">
<img src="Images/Users/fond_bandeau_2..png" alt="">
https://www.developpez.com/
<table>
<tr>
  <td>Créez votre compte</td>
  <td>Connectez-vous</td>
</tr>
<tr>
  <td>Créez votre compte en quelques clics</td>
  <td>Accédez directement à votre compte</td>
</tr>
<tr>
    <td>Email</td>
    <td>Email</td>
</tr>
<tr>
   <td><input type="text" id="email1" class="form-control"></td>
    <td><input type="text" id="email2" class="form-control"></td>
</tr>
<tr>
    <td>Confirmation email</td>
    <td>Mot de passe</td>
</tr>
<tr>
    <td><input type="text" id="email3" class="form-control"></td>
    <td><input type="text" id="email4" class="form-control"></td>
</tr>
<tr>
    <td>Mot de passe</td>
    <td><input type="checkbox" value="0" onclick="if (this.checked) this.value=1; else this.value=0;alert(this.value);" name="sev1_relance" />   Se souvenir de moi</td>
</tr>
<tr>
    <td><input type="text" id="email" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Confirmation mot de passe</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="email5" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>aaaaa</td>
    <td></td>
</tr>
<tr>
    <td>aaaaa</td>
    <td></td>
</tr>
<tr>
    <td>Nom*</td>
    <td></td>
</tr>
	<tr>
    <td><input type="text" id="nom" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Prénom*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="prenom" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Adresse*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="adresse" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Code postal*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="cp" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td>Ville*</td>
    <td></td>
</tr>
<tr>
    <td><input type="text" id="ville" class="form-control"></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
	</table>
<p>Traitement des données à caractère personnel</p>	
<p>Les informations personnelles que vous nous communiquez par l'envoi d'un courrier électronique, par connection à un service en ligne, par renseignement d'un formulaire ou par tout autre moyen sont strictement confidentielles et destinées au traitement de vos demandes par nos services. Elles ne sont transmises à aucun tiers ni à titre onéreux ni à titre gratuit. Conformément à la loi n° 78-17 du 6 janvier 1978 modifiée en 2004 et au Règlement Général sur la Protection des données (RGPD) 2016/679 du Parlement européen et du Conseil du 27 avril 2016, vous bénéficiez d'un droit d'accès, de rectification ou de suppression des informations qui vous concernent, que vous pouvez exercer en vous adressant à :</p>
<p>La Déléguée à la protection des données </p>
	<ul>
  <li>soit par téléphone 07.86.52.32.10</li>
  <li>soit par courriel pascal@sos-chiens-dordogne.fr</li>
  <li>soit à l'adresse postale suivante :</li>
</ul>
 </body>
</html>

2- une fois rajouté, il suffit de rajouter un margin:auto sur l'élément table de votre feuille de style, ainsi votre tableau sera centré, même si vous modifiez sa largueur.

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
table{
      border-collapse: collapse;
      width: 1000px;
      margin:auto;
}
 
td{
      width: 500px;
      border: 1px solid black;
      padding: 10px;
      height: 20px;
}

Cordialement

Centrer une TABLE

Centrer un élément en CSS

Discussions similaires

Partager

Partager