Ajouter une autre ligne à mon tableau css ?

Ajouter une autre ligne à mon tableau css ? - HTML/CSS - Programmation

Marsh Posté le 07-12-2015 à 11:43:02    

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 :
  1. <link href="css.css" rel="stylesheet">
  3.   <div class="tableau">
  5.   <p>   
  6.   <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  7.   <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  8.   <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  9.   <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  10.   </p>
  12.   <p>   
  13.   <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  14.   <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  15.   <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  16.   <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  17.   </p>
  19.   <p>   
  20.   <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  21.   <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  22.   <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  23.   <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  24.   </p>
  26.   </div>


 
- Mon fichier css.css =
 

Code :
  1. .tableau span {
  2. margin: 20px;
  3. padding-top:20px;
  4. padding-bottom:20px;
  5. padding-right:100px
  6. padding-left:100px;
  7. text-align :center;
  8. }
  10. .tableau p {
  11. margin: 20px;
  12. padding-top:20px;
  13. padding-bottom:20px;
  14. padding-right:100px
  15. padding-left:100px;
  16. text-align :center;
  17. }


 
Merci d'avance pour votre aide :).
 
A

Reply

Marsh Posté le 07-12-2015 à 11:43:02   

Reply

Marsh Posté le 09-12-2015 à 12:14:32    

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

Code :
  1. <link href="css.css" rel="stylesheet">
  2. <meta charset="UTF-8"/>
  3. <center><table>
  5. <tr>
  6.  <td>
  7.   <img alt="" height="150" src="01.jpg" width="100"/>
  8.   <p class="legende">Ceci est une légende !</p>
  9.  </td>
  10.  <td>
  11.   <img alt="" height="150" src="01.jpg" width="100"/>
  12.   <p class="legende">Ceci est une légende !</p>
  13.  </td>
  14.  <td>
  15.   <img alt="" height="150" src="01.jpg" width="100"/>
  16.   <p class="legende">Ceci est une légende !</p>
  17.  </td>
  18.  <td>
  19.   <img alt="" height="150" src="01.jpg" width="100"/>
  20.   <p class="legende">Ceci est une légende !</p>
  21.  </td>
  22. </tr>
  24. </table></center>


 
------- CSS
 

Code :
  1. table td {
  2.     padding: 10px 20px;
  3. } table td img {
  4.     display: inline;
  5.     padding: 0;
  6.     margin: 0;
  7. } table td p.legende {
  8.     margin: 0;
  9.     padding: 3px 1px;
  10.     background-color: rgba(0,0,0,0.2);
  11.     font-family: Arial, sans-serif;
  12.     width: 100;
  13. }


 
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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed