Présentation Tableau dans une page Web

Version imprimable

Bonsoir,

L'URL de ma page est la suivante : http://www.socios-gfca.com/trasfirimenti-121,1.html

Je souhaite améliorer la présentation de mon tableau HTML de façon simple de la façon suivante mais je n'y arrive pas :

- Supprimer la bordure qui encadre l'ensemble du tableau (J'ai essayé l'attribut border='0').
- Réduire la taille de la police du nom de chaque joueur pour qu'il reste sur une ligne.
- Insérer une ligne blanche d'une hauteur à définir après la ligne du dessus (J'ai essayé les différentes formes de la balise <TR>).
- Réduire la taille de l'image en conservant les proportions.

J'ai fait beaucoup de tests mais cela n'a aucun effet sur mon tableau !!!.

Voici le code source du tableau en question :

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
   <table width="600">
                <tbody>
                    <tr>
                        <td width="1">&nbsp;</td>
                        <td class="css-arrondi" style="text-align: center; width=5px;">
                        <p>&nbsp;<span style="color: rgb(255, 0, 0);"><span style="font-size: large;"><strong>Steeve<br />
                        </strong></span></span><span style="font-size: large;"><span style="color: rgb(0, 0, 255);"><strong>BEUSNARD</strong></span></span></p>
                        <p><img border="1" align="middle" src="http://socios-gfca.com/content/photos/20130302Inconnu_Signature.jpg" alt="" /></p>
                        <p><span style="color: rgb(0, 0, 255);"><span style="font-size: medium;"><strong>ATTACANTU</strong></span></span></p>
                        <p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: small;"><u>Ancien Club :</u></span></strong></span><strong><span style="font-size: small;"><span style="color: rgb(0, 0, 255);"> <br />
                        AS B&eacute;ziers</span></span></strong></p>
                        <p><span style="font-size: small;"><span style="color: rgb(0, 0, 255);"><strong><a target="_blank" href="http://www.socios-gfca.com/beusnard-steeve-joueur-ajaccio-9504.html">Voir la Fiche</a></strong></span></span></p>
                        </td>
                        <td width="2">&nbsp;</td>
                        <td class="css-arrondi" style="text-align: center; width=5px;">
                        <p>&nbsp;<span style="color: rgb(255, 0, 0);"><span style="font-size: large;"><strong>Zi&eacute;<br />
                        </strong></span></span><span style="font-size: large;"><span style="color: rgb(0, 0, 255);"><strong> DIABATE</strong></span></span></p>
                        <p><img border="1" align="middle" src="http://socios-gfca.com/content/photos/20130302Inconnu_Signature.jpg" alt="" /></p>
                        <p><span style="color: rgb(0, 0, 255);"><span style="font-size: medium;"><strong>DIFINSORU</strong></span></span></p>
                        <p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: small;"><u>Ancien Club :</u></span></strong></span><strong><span style="font-size: small;"><span style="color: rgb(0, 0, 255);"> <br />
                        Foolad FC</span></span></strong></p>
                        <p><span style="font-size: small;"><span style="color: rgb(0, 0, 255);"><strong><a target="_blank" href="http://www.socios-gfca.com/administration/viewpl.php?pid=9505">Voir la Fiche</a></strong></span></span></p>
                        </td>
                        <td width="2">&nbsp;</td>
                        <td class="css-arrondi" style="text-align: center; width=5px;">
                        <p>&nbsp;<span style="color: rgb(255, 0, 0);"><span style="font-size: large;"><strong>Rod&eacute;ric<br />
                        </strong></span></span><span style="font-size: large;"><span style="color: rgb(0, 0, 255);"><strong>FILIPPI</strong></span></span></p>
                        <p><img border="1" align="middle" src="http://socios-gfca.com/content/photos/20130302Inconnu_Signature.jpg" alt="" /></p>
                        <p><span style="color: rgb(0, 0, 255);"><span style="font-size: medium;"><strong>DIFINSORU</strong></span></span></p>
                        <p><span style="color: rgb(255, 0, 0);"><strong><span style="font-size: small;"><u>Ancien Club :</u></span></strong></span><strong><span style="font-size: small;"><span style="color: rgb(0, 0, 255);"> <br />
                        Tours FC</span></span></strong></p>
                        <p><span style="font-size: small;"><span style="color: rgb(0, 0, 255);"><strong><a target="_blank" href="http://www.socios-gfca.com/filippi-roderic-joueur-ajaccio-6105.html">Voir la Fiche</a></strong></span></span></p>
                        </td>
                        <td width="1">&nbsp;</td>
                    </tr>
                    <tr>
                    </tr>

J'espère que vous allez pouvoir m'aider rapidement.
Bon confinement à tous.

23/04/2020, 08h20
Invité
Bonjour,
- Les tableaux (XHTML & CSS)
19/07/2020, 21h50
cg2604

Merci pour cette réponse.

Mais impossible de trouver une solution. Quelqu'un pourrait-il vraiment m'aider à ce sujet sur ce forum ?.

Merci beaucoup pour votre aide.
CG.
;)

Bonjour,

Citation:

Je souhaite améliorer la présentation de mon tableau HTML

plusieurs points à signaler :

supprime le style inline pour avoir recours à une feuille de style intégré ou externe ;
supprime la mise en page sur base de <table> ;
utilise l'inspecteur(*) d'éléments, pour voir ce que tu peux simplement modifier.

Tu pourrais grandement améliorer la « présentation » en passant, par exemple par une structure du type fiche/carte, ce qui pourrait donner sur base de ton code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container-joueur">
  <dl class="joueur">
    <dt class="joueur-fn"><span class="prenom">Alexandre</span> <span class="nom">DURIMEL</span></dt>
    <dd class="joueur-photo"><img src="http://socios-gfca.com/content/photos/20130302Inconnu_Signature.jpg" alt=""></dd>
    <dd class="joueur-role"><span class="label">Poste :</span>DIFINSORU</dd>
    <dd class="joueur-oldclub"><span class="label">Ancien Club :</span>FC Bastia-Borgo</dd>
    <dd class="joueur-url"><a target="_blank" href="lien-vers-page-joueur.html">Voir la Fiche</a></dd>
  </dl>
  <dl class="joueur">
    <dt class="joueur-fn"><span class="prenom">Ludovic</span> <span class="nom"> GAMBOA</span></dt>
    <dd class="joueur-photo"><img src="http://socios-gfca.com/content/photos/20130302Inconnu_Signature.jpg" alt=""></dd>
    <dd class="joueur-role"><span class="label">Poste :</span>MEZITARRENU</dd>
    <dd class="joueur-oldclub"><span class="label">Ancien Club :</span>USL Dunkerque</dd>
    <dd class="joueur-url"><a target="_blank" href="lien-vers-page-joueur.html">Voir la Fiche</a></dd>
  </dl>
<!-- la suite des fiches-->
</div>

Voici le style suivant tu sera pas loin de ce que tu as réalisé :

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
53
54
55
56
.container-joueur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 600px;
  margin: auto;
}
.joueur {
  flex: 0 0 190px;
  box-sizing: border-box;
  margin: .25em;
  padding: .5em;
  border: 1px solid #ABC;
  border-radius: .5em;
  text-align: center;
  font-size: .9em;
  line-height: 2;
  background-color: #EEE;
  box-shadow: 0.25em 0.25em 0.5em #CCC;
}
.joueur dd {
  margin: 0;
}
.joueur-fn {
  font-weight: 700;
}
.joueur-fn .prenom {
  color: #F00;
}
.joueur-fn .nom {
  color: #00F;
}
.joueur-photo img {
  max-height: 12em;
  border: 1px solid #CCC;
}
.joueur-role {
  font-size: .9em;
  font-weight: 700;
  color: #00F;
}
.joueur-oldclub {
  font-weight: 700;
  color: #00F;
}
.joueur .label {
  display: block;
  margin-top: .5em;
  font-size: .9em;
  font-style: italic;
  font-weight: normal;
  line-height: 1;
  color: #888;
}
.joueur-url {
}

A toi de jouer ;)

^(*)touche F12 pour faire apparaître la console ... et être curieux ;)