Mise en forme d'une TABLE

**labarre2002** · 05/08/2022, 16h06

Bonjour,

Je realise le tableau de Mendeleiev en html
voici le resultat

Nom : tableaux.jpg
Affichages : 88
Taille : 310,5 Ko

la suite de mon tableau :

Nom : 2.jpg
Affichages : 89
Taille : 458,2 Ko

Mon soucis est que je voudrais supprimer les bordures des cellules vides
Pourtant un dans mon fichier CSS j ai mis :

Nom : css.jpg
Affichages : 89
Taille : 49,9 Ko

Nom : css.jpg
Affichages : 89
Taille : 49,9 Ko

Code :

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

1
2
3
.no{
border:none.
}

Mais rien n y fait .

**NoSmoking** · 05/08/2022, 16h31

Bonjour,

Mon soucis est que je voudrais supprimer les bordures des cellules vides

regarde du côté de la propriété empty-cells applicable aux <table>.

**labarre2002** · 05/08/2022, 20h09

Bonsoir NoSmoking

Merci pour ta reponse qui resout mon et en cree un autre

les cases avec un background en couleur n apparaissent plus. Nom : ccc.jpg
Affichages : 53
Taille : 62,2 Ko

Nom : ccc.jpg
Affichages : 53
Taille : 62,2 Ko

**mathieu** · 05/08/2022, 22h15

vous pouvez mettre une classe css spéciale pour la légende et vous pourrez y appliquer des règles spéciales.
montrez nous le code html que vous utilisez.

**labarre2002** · 05/08/2022, 22h39

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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html>
 
 
<head>
<meta charset="utf-8">
<meta name="keywords"  content="element,chimique">
<title>Mendeleiev</title>
<link rel="stylesheet"  href="style.css">
 
</head>
 
 
<body>
 
<table  contenteditable="true">
<thead>
<tr>
<th colspan="4"></th>
<th class="fushia"></th>
<th class="purple"></th>
<th class="fushia"></th>
<th class="silver"></th>
<th class="fushia"></th>
<th class="purple"></th>
<th class="yellow"></th>
<th class="green"></th>
<th class="yellow"></th>
<th class="royalblue"></th>
<td colspan="4"></td>
</tr>
    <tr>
        <td colspan="4"></td>
        <td><p>Métaux alcalins</p></td>
        <td><p>Métaux alcalino-terreux</p></td>
        <td><p>Métaux de transition</p></td>
        <td><p>Métaux pauvres</p></td>
        <td><p>Lanthanides</p></td>
        <td><p>Actinides</p></td>
        <td><p>Métalloides</p></td>
        <td><p>Non-métaux</p></td>
		<td><p>Hallogènes</p></td>
        <td><p>Gaz rares</p></td>
          <td colspan="4"></td> 
    </tr>
 
 
 
 
</thead>
<tbody>
<tr>
<td class="green"><h1>H</h1><p>1</p></td>
<td colspan="16"></td>
<td class="royalblue" ><h1>He</h1><p>2</p></td>
</tr>
<tr>
<td class="fushia"><h1>Li</h1><p>3</p></td>
<td class="jaune"><h1>Be</h1><p>4</p></td>
<td colspan="10"></td>
<td class="yellow" ><h1>B</h1><p>5</p></td>
<td class="green" ><h1>C</h1><p>6</p></td>
<td class="green" ><h1>N</h1><p>7</p></td>
<td class="green" ><h1>O</h1><p>8</p></td>
<td class="yellow"><h1>F</h1><p>9</p></td>
<td class="royalblue" ><h1>Ne</h1><p>10</p></td>
 
</tr>
<tr>
<td class="fushia"><h1>Na</h1><p>11</p></td>
<td class="jaune"><h1>Mg</h1><p>12</p></td>
<td colspan="10"></td>
<td class="silver" ><h1>Al</h1><p>13</p></td>
<td class="yellow"><h1>Si</h1><p>14</p></td>
<td class="green"><h1>P</h1><p>15</p></td>
<td class="green"><h1>S</h1><p>16</p></td>
<td class="yellow"><h1>Cl</h1><p>17</p></td>
<td class="royalblue"><h1>Ar</h1><p>18</p></td>
 
</tr>
 
<tr>
<td class="fushia"><h1>K</h1><p>19</p></td>
<td class="jaune"><h1>Ca</h1><p>20</p></td>
<td  class="fushia"><h1>Sc</h1><p>21</p></td>
<td class="fushia" ><h1>Ti</h1><p>22</p></td>
<td  class="fushia"><h1>V</h1><p>23</p></td>
<td  class="fushia"><h1>Cr</h1><p>24</p></td>
<td  class="fushia"><h1>Mn</h1><p>25</p></td>
<td class="fushia" ><h1>Fe</h1><p>26</p></td>
<td  class="fushia"><h1>Co</h1><p>27</p></td>
<td  class="fushia"><h1>Ni</h1><p>28</p></td>
<td class="fushia" ><h1>Cu</h1><p>29</p></td>
<td class="fushia" ><h1>Zn</h1><p>30</p></td>
<td class="silver"><h1>Ga</h1><p>31</p></td>
<td class="yellow"><h1>Ge</h1><p>32</p></td>
<td class="yellow"><h1>As</h1><p>33</p></td>
<td class="green"><h1>Se</h1><p>34</p></td>
<td class="yellow" ><h1>Br</h1><p>35</p></td>
<td class="royalblue"><h1>Kr</h1><p>36</p></td>
 
</tr>
 
 
 
<tr>
 
<td class="fushia"><h1>Rb</h1><p>37</p></td>
<td class="jaune"><h1>Sr</h1><p>38</p></td>
<td class="fushia"><h1>Y</h1><p>39</p></td>
<td class="fushia"><h1>Zr</h1><p>40</p></td>
<td class="fushia"><h1>Nb</h1><p>41</p></td>
<td class="fushia"><h1>Mo</h1><p>42</p></td>
<td class="fushia"><h1>Tc</h1><p>43</p></td>
<td class="fushia"><h1>Ru</h1><p>44</p></td>
<td  class="fushia"><h1>Rh</h1><p>45</p></td>
<td class="fushia" ><h1>Pd</h1><p>46</p></td>
<td class="fushia" ><h1>Ag</h1><p>47</p></td>
<td class="fushia" ><h1>Cd</h1><p>48</p></td>
<td class="silver"><h1>In</h1><p>49</p></td>
<td class="silver"><h1>Sn</h1><p>50</p></td>
<td class="yellow"><h1>Sb</h1><p>51</p></td>
<td class="yellow" ><h1>Te</h1><p>52</p></td>
<td class="yellow" ><h1>I</h1><p>53</p></td>
<td class="royalblue"><h1>Xe</h1><p>54</p></td>
 
</tr>
 
<tr>
<td class="fushia"><h1>Cs</h1><p>55</p></td>
<td class="jaune"><h1>Ba</h1><p>56</p></td>
<td class="purple"><h1>57-71</h1><p></td>
<td  class="fushia"><h1>Hf</h1><p>72</p></td>
<td class="fushia" ><h1>Ta</h1><p>73</p></td>
<td class="fushia" ><h1>W</h1><p>74</p></td>
<td class="fushia" ><h1>Re</h1><p>75</p></td>
<td class="fushia" ><h1>Os</h1><p>76</p></td>
<td  class="fushia"><h1>Ir</h1><p>77</p></td>
<td class="fushia" ><h1>Pt</h1><p>78</p></td>
<td  class="fushia"><h1>Au</h1><p>79</p></td>
<td class="fushia" ><h1>Hg</h1><p>80</p></td>
<td class="silver"><h1>Tl</h1><p>81</p></td>
<td class="silver" ><h1>Pb</h1><p>82</p></td>
<td class="silver"><h1>Bi</h1><p>83</p></td>
<td class="silver" ><h1>Po</h1><p>84</p></td>
<td class="yellow" ><h1>At</h1><p>85</p></td>
<td class="royalblue"><h1>Rn</h1><p>86</p></td>
 
</tr>
 
 
 
 
 
<tr>
<td class="fushia" ><h1>Fr</h1><p>87</p></td>
<td class="jaune"><h1>Ra</h1><p>88</p></td>
<td class="purple" ><h1>89-103</h1></td>
<td  class="fushia"><h1>Rf</h1><p>104</p></td>
<td class="fushia" ><h1>Db</h1><p>105</p></td>
<td class="fushia" ><h1>Sg</h1><p>106</p></td>
<td class="fushia" ><h1>Bh</h1><p>107</p></td>
<td class="fushia" ><h1>Hs</h1><p>108</p></td>
<td class="fushia" ><h1>Mt</h1><p>109</p></td>
<td  class="fushia"><h1>Ds</h1><p>110</p></td>
<td class="fushia" ><h1>Rg</h1><p>111</p></td>
<td  class="fushia"><h1>Cn</h1><p>112</p></td>
<td class="silver" ><h1>Uut</h1><p>113</p></td>
<td class="silver" ><h1>Fl</h1><p>114</p></td>
<td class="silver"><h1>Uup</h1><p>115</p></td>
<td class="silver" ><h1>Lv</h1><p>116</p></td>
<td class="yellow" ><h1>Uus</h1><p>117</p></td>
<td class="royalblue"><h1>Uuo</h1><p>118</p></td>
 
</tr>
 
 
 
<tr>
<td colspan="18"></td>
 
</tr>
 
 
 
 
<tr>
<td colspan="3"></td>
<td class="purple"><h1>La</h1><p>57</p></td>
<td class="purple"><h1>Ce</h1><p>58</p></td>
<td class="purple"><h1>Pr</h1><p>59</p></td>
<td class="purple"><h1>Nd</h1><p>60</p></td>
<td class="purple" ><h1>Pm</h1><p>61</p></td>
<td class="purple"><h1>Sm</h1><p>62</p></td>
<td class="purple" ><h1>Eu</h1><p>63</p></td>
<td class="purple"><h1>Gd</h1><p>64</p></td>
<td class="purple"><h1>Tb</h1><p>65</p></td>
<td class="purple"><h1>Dy</h1><p>66</p></td>
<td class="purple"><h1>Ho</h1><p>67</p></td>
<td class="purple" ><h1>Er</h1><p>68</p></td>
<td class="purple"><h1>Tm</h1><p>69</p></td>
<td class="purple"><h1>Yb</h1><p>70</p></td>
<td class="purple"><h1>Lu</h1><p>71</p></td>
</tr>
 
 
 
 
 
 
 
 
<tr>
 
<td colspan="3"></td>
<td class="purple" ><h1>Ac</h1><p>89</p></td>
<td class="purple" ><h1>Th</h1><p>90</p></td>
<td class="purple"><h1>Pa</h1><p>91</p></td>
<td class="purple"><h1>U</h1><p>92</p></td>
<td class="purple" ><h1>Np</h1><p>93</p></td>
<td class="purple" ><h1>Pu</h1><p>94</p></td>
<td class="purple"><h1>Am</h1><p>95</p></td>
<td class="purple" ><h1>Cm</h1><p>96</p></td>
<td class="purple"><h1>Bk</h1><p>97</p></td>
<td class="purple"><h1>Cf</h1><p>98</p></td>
<td class="purple" ><h1>Es</h1><p>99</p></td>
<td class="purple"><h1>Fm</h1><p>100</p></td>
<td class="purple"><h1>Md</h1><p>101</p></td>
<td class="purple"><h1>No</h1><p>102</p></td>
<td class="purple" ><h1>Lr</h1><p>103</p></td>
 
</tr>
 
 
<tbody>
 
</table>
 
</body>
</html>

et pour lr CSS:

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
body{
 
	font-family:verdana,helvetica;
	font-size:12px;
	margin:auto;
 
}
 
th{
	border:thin solid royalblue;
 
 
	}
 
td{
	border:thin solid royalblue;
	padding:5px 7px;
	}
 
table{
	border-collapse:separate;
	border-radius:6px;
	margin:auto;
	empty-cells:hide;
	}	
 
 
.fushia{
	background-color:#ff00ff;
 
}
 
.purple{
 
	background-color:purple;
}
 
.green{
 
	background-color:#008000;
}
 
.yellow{
	background-color:#ffff00;
}
.silver{
 
	background-color:silver
}
 
.royalblue{
	background-color:royalblue;
}
 
.jaune{
	background-color:#f9e79f;
}
 
thead td{
 
	padding:2px 5px;
}

**NoSmoking** · 06/08/2022, 10h21

Comme son nom l'indique, les cellules vide, sans contenu, ne sont pas traitées/affichées.
Dans ton cas il suffit donc de mettre un caractère neutre pour que la cellules soit considérée comme non vide, avec   ou avec  .

Par exemple :

Code html :

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

1
2
<!-- avec &nbsp; -->
<th class="fushia">&nbsp;</th>

Ceci étant, séparer les deux lignes n'a pas trop de sens attendu que les cellules de même position sont intiment liées.
Il serait plus judicieux d'écrire quelque chose comme :

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
<tr>
  <td colspan="4"></td>
  <td class="bg-fushia">Métaux alcalins</td>
  <td class="bg-purple">Métaux alcalino-terreux</td>
  <td class="bg-fushia">Métaux de transition</td>
  <td class="bg-silver">Métaux pauvres</td>
  <td class="bg-fushia">Lanthanides</td>
  <td class="bg-purple">Actinides</td>
  <td class="bg-yellow">Métalloides</td>
  <td class="bg-green">Non-métaux</td>
  <td class="bg-yellow">Hallogènes</td>
  <td class="bg-royalblue">Gaz rares</td>
  <td colspan="4"></td>
</tr>

... la présence d'un élément <p> n'étant absolument pas nécessaire dans les cellules je les ais supprimées.

Dans ce cas on peut utiliser un pseudo-élément :before pour afficher la couleur.

Les déclarations CSS sont un peu plus importantes.

Pour toutes les classes concernées :

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
td[class^="bg-"] {
  position: relative;
  padding: 2.5em .5em 1em;
  background-repeat: no-repeat;
  background-size: 100% 1.5em;
}
td[class^="bg-"]:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1.5em;
  border-bottom: 1px solid #4169E1;
}

et ensuite on personnalise :

Code :

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

1
2
3
4
5
6
.bg-fushia:before    {background-color: #F0F;}
.bg-purple:before    {background-color: #800080;}
.bg-green:before     {background-color: #080;}
.bg-yellow:before    {background-color: #FF0;}
.bg-silver:before    {background-color: #C0C0C0;}
.bg-royalblue:before {background-color: #4169E1;}

Tout cela resterait à affiner et on pourrait envisager d'autres solutions comme très souvent.

**labarre2002** · 06/08/2022, 17h49

Bonsoir NoSmoking

Merci pour ton croustillant message .qui resout mon probleme

je me pose une question est il possible d attribuer une meme dimension a toutes les cellules de mon tableau ?
mon ami

google m informe qu il faut attribuer une faible valeur a l attribut width pour ce faire mais concretement il se pase rien.

**NoSmoking** · 08/08/2022, 11h28

Revenons quand même sur le principe de ta structure HTML.
Tu as deux parties bien distinctes l"une par rapport à l'autre, une légende et des données.
Il me semble bien plus judicieux de dissocier les deux, cela te facilitera la tâche concernant le formatage.

Concernant « une meme dimension a toutes les cellules de mon tableau » tudevrais t'en sortir en mettant ajoutant au CSS de ta <table> :

Code :

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

1
2
3
4
table {
  width: 100em;          /*-- peut être ajustée --*/
  table-layout: fixed;
}

Ressources :

PS : autre chose au passage, les éléments <h1> sont des éléments sémantiques et ne devraientt pas être utilisés pour faire de la mise en forme, il y a le CSS pour cela.