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">
  2.   <div class="tableau">
  3.   <p>   
  4.   <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  5.   <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  6.   <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  7.   <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  8.   </p>
  9.   <p>   
  10.   <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  11.   <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  12.   <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  13.   <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  14.   </p>
  15.   <p>   
  16.   <span class="a1"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  17.   <span class="a2"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  18.   <span class="a3"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  19.   <span class="a4"><img alt="" height="150" src="img/01.jpg" width="100"></span>
  20.   </p>
  21.   </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. }
  9. .tableau p {
  10. margin: 20px;
  11. padding-top:20px;
  12. padding-bottom:20px;
  13. padding-right:100px
  14. padding-left:100px;
  15. text-align :center;
  16. }


 
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>
  4. <tr>
  5.  <td>
  6.   <img alt="" height="150" src="01.jpg" width="100"/>
  7.   <p class="legende">Ceci est une légende !</p>
  8.  </td>
  9.  <td>
  10.   <img alt="" height="150" src="01.jpg" width="100"/>
  11.   <p class="legende">Ceci est une légende !</p>
  12.  </td>
  13.  <td>
  14.   <img alt="" height="150" src="01.jpg" width="100"/>
  15.   <p class="legende">Ceci est une légende !</p>
  16.  </td>
  17.  <td>
  18.   <img alt="" height="150" src="01.jpg" width="100"/>
  19.   <p class="legende">Ceci est une légende !</p>
  20.  </td>
  21. </tr>
  22. </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