Ajouter une autre ligne à mon tableau css ? [Fermé]

Signaler
Messages postés
1
Date d'inscription
lundi 7 décembre 2015
Statut
Membre
Dernière intervention
7 décembre 2015
-
le hollandais volant
Messages postés
4984
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
-
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

1 réponse

Messages postés
4984
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
965
Bonjour,

Avec HTML5 tu peux utiliser quelque chose de ce style :

<figure><img src="" /><figcaption>le texte</figcaption></figure>.

C’est fait pour ça : le <figure> contient l’image et la description.
Il te suffit de modeler ça en CSS ensuite (marges, tailles…).

Sinon, question : pourquoi tu utilises un DIV et des P plutôt qu’un <table> ?

Tu peux utiliser les tableaux en HTML, ce n’est pas interdit et ils sont tout à fait valables quand on veut créer… un tableau.
C’est juste pour le design principal de la page (entête, corps, footer…) qu’ils ne doivent pas être utilisés car pas très pratiques.

Sinon, tu peux aussi placer tout dans une liste <UL> unique et où chaque <LI> contient une image (pas de <p> ni de <div>) : c’est plus logique et bien plus modelable : tu pourras même choisir le nombre d’images par ligne sans avoir à tout réécrire.