Mettre mon tableau en CSS

Version imprimable

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:

http://i42.tinypic.com/adc4mg.jpg

Voilà le code:

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

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

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

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;
}

07/05/2009, 17h11
damien.rif

Citation:

Envoyé par devyan

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>

Et si tu fais quelque chose qui ressemblerait à :

Code:

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:

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.

07/05/2009, 19h22
HiRoN

Bonjour,

As-tu été faire un tour ici ?