Ajouter une autre ligne à mon tableau css ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Ajouter une autre ligne à mon tableau css ?

etanmita

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 =

Code :

<link href="css.css" rel="stylesheet">
<div class="tableau">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
<img alt="" height="150" src="img/01.jpg" width="100">
</div>

- Mon fichier css.css =

Code :

.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

Publicité

vodkadream

coucouu !
Tiens voilà le code, j'espère que c'est ça

------- HTML

Code :

<link href="css.css" rel="stylesheet">
<meta charset="UTF-8"/>
<center><table>
<tr>
<td>
<img alt="" height="150" src="01.jpg" width="100"/>
Ceci est une légende !
</td>
<td>
<img alt="" height="150" src="01.jpg" width="100"/>
Ceci est une légende !
</td>
<td>
<img alt="" height="150" src="01.jpg" width="100"/>
Ceci est une légende !
</td>
<td>
<img alt="" height="150" src="01.jpg" width="100"/>
Ceci est une légende !
</td>
</tr>
</table></center>

------- CSS

Code :

table td {
padding: 10px 20px;
} table td img {
display: inline;
padding: 0;
margin: 0;
} table td p.legende {
margin: 0;
padding: 3px 1px;
background-color: rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
width: 100;
}

Si tu veux centrer le texte, tu ajoutes "text-align:center;" dans "table td p.legende".

Voilà ! Bonne chance :jap:

Message édité par vodkadream le 09-12-2015 à 12:16:13

FORUM HardWare.fr

Programmation

HTML/CSS

Ajouter une autre ligne à mon tableau css ?

Sujets relatifs
Allocation Mémoire pour tableau 2 dimensions	[SQL] Select un nbre max de données = selectionner une ligne sur n.
GCC HOMEBREW personnalisation, comment ajouter une option a GCC	GCC personnalisation, comment ajouter une option a GCC
Comment ajouter des éléments une list STL?	Comment protéger mes vidéos html5 en ligne
[Resolu]Supprimer la ligne vide	Tableau 2D, chercher une valeur dans une colonne et ramener la seconde
Ajouter une ligne à un tableau en javascript	[Javascript] Ajouter une ligne a un tableau
Plus de sujets relatifs à : Ajouter une autre ligne à mon tableau css ?

Page générée en 0.079 secondes