Discussion :

[damien.rif]

Bonjour

Je possèdes un tableau en HTML que je voudrais convertir en CSS

Mon tableau possède 6 lignes et 7 colonnes, et des cellules de 100 pixels de largeur sur 100 pixels de hauteur, ce qui fait 42 cellules

Et il possède une 7e ligne tout en haut avec les 7 cellules fusionnées

Ca fait des heures que je suis sur le Net et que j'essayes, et je m'arraches les cheveux

Quelqu'un peut m'aider s'il vous plait?

Merci beaucoup beaucoup


Voilà ce que je voudrais:




Voilà le code:

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
 
 
<table width="900" border="1" align="center" bordercolor="#000000">
  <tr>
    <td colspan="7">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
    <td width="100" height="100">&nbsp;</td>
  </tr>
</table>

[devyan]

Je ne suis pas certain de bien avoir compris ton problème...

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
 
<table>
  <tr>
    <td colspan="7">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
table {
  width:900px;
  border:1px solid #000000;
  text-align:center;
}
 
td {
  width:100px;
  height:100px;
}

[damien.rif]

Je ne suis pas certain de bien avoir compris ton problème...

Et bien je veux supprimer le tableau (trop de code HTML)

Dans chaque cellule, je veux mettre une petite photo, centrée

Je voudrais pouvoir faire ça uniquement en CSS, sans passer par la balise <table>

[m1ckros]

Et si tu fais quelque chose qui ressemblerait à :

Code :

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

1
2
3
4
<div class"madiv">
	<div>&nbsp;</div>
	<img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" /><img src="fondd.gif" />
</div>

Je ne vais pas à la ligne après chaque <img src="fondd.gif" /> je crois que ça ajoute des espaces entre chaque image sinon.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.madiv {
	width: 760px;
	border: 1px solid black;
	margin: 0;
	padding: 1px;
}
.madiv img, .madiv div {
	border: 1px solid black;
	margin: 1px;
	padding: 0;
}
.madiv div {
	height: 15px;
}

?

Après, il faut un peu jouer avec les dimensions.

[HiRoN]

Bonjour,

As-tu été faire un tour ici ?