Ajouter une autre ligne à mon tableau css ?

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

En comm c'est pas possible ?

Il suffit de jouer avec le margin et le padding.

Sinon, pour faciliter, tu pourrais aussi mettre tes descriptions en infobulle.