[Problème] Ajouter une autre ligne à mon tableau css ?

[Etanm]

Bonjour,

J'aimerais ajouter une légende sous mes images (dans mes tableaux ci-dessous).

J'ai du mal à gérer les tailles de tableaux en css.

Comment pourrai-je ajouter 3 lignes sous les 3 colonnes (afin d'y ajouter une légende/description) ?

Voici une représentation de ce je voudrais : http://s15.postimg.org/tjn9w79mz/representation.jpg

- Mon fichier html =

<link href="css.css" rel="stylesheet">

  <div class="tableau">

  <p>     
  <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  </p>

  <p>     
  <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  </p>

  <p>     
  <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  </p>

  </div>

- Mon fichier css.css =

.tableau span {
margin: 20px;
padding-top:20px;
padding-bottom:20px;
padding-right:100px
padding-left:100px;
text-align :center;
}

.tableau p {
margin: 20px;
padding-top:20px;
padding-bottom:20px;
padding-right:100px
padding-left:100px;
text-align :center;
} 

Merci d'avance pour votre aide .

A

[chabi01]

Re : Ajouter une autre ligne à mon tableau css ?

Bonjour,
En le montant avec des div à la place de span ?

[lefabdu51]

Re : Ajouter une autre ligne à mon tableau css ?

il faut changer la structure de ton code html:

vu que c est un tableau tu devrais avoir :

<table class="tableau">
<tr><td><span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span></td><td><span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span></td><td><span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span></td><td><span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span></td></tr>

<tr><th>Titre colonne 1</th><th>Titre colonne deux</th><th>Titre colonne3</th><th>Titre colonne 4</th></tr>
</table>

pour ajouter une legende à une ou plusieurs images remplacer le contenu de la balise span par celui ci dessous :

<figure>
    <img src="img/01.jpg" alt="Legende de mon image" />
    <figcaption>La légende de mon image</figcaption>
</figure>

De plus erreur ds ton code : tu doit fermer la balise img........ et mettre une classe spécifique dessus ce qui te mermettras de simplfier celui ci.