Accueil  Calendrier  FAQ  Rechercher  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

 [HTML & CSS] Faire un tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
mYn
Modératrice
avatar

Féminin
Nombre de messages : 4409
Age : 24
Localisation : 93 [Seine St-Denis]
Logiciels : Photoshop

MessageSujet: [HTML & CSS] Faire un tableau   Ven 22 Aoû - 15:42

Ce cours vous montrera comment créer un tableau en HTML et comment le mettre en forme avec l'aide du CSS.


1/ Création (HTML)

Pour commencer, voici les balises pour créer votre tableau :
  • Balises élémentaires

    <table> : créer le tableau
    <caption> : légende du tableau (facultatif)
    <tr> : créer une ligne du tableau
    <th> : créer les cellules d'en-tête du tableau
    <td> : créer les cellules du tableau

  • Balises complémentaires

    <thead> : groupe de cellules d'en-tête
    <tbody> : groupe de cellules de corps de tableau
    <tfoot> : groupe de cellules de pied de tableau



Ensuite, le code du tableau. Voici un exemple de code HTML d'un tableau (uniquement avec les balises élémentaires).

Code:
<table> <!-- Ouvre le code du tableau. Cette balise englobe toutes les autres (cellules...) -->
  <caption>Exemple de tableau</caption> <!-- La légende (Facultatif) -->

  <tr> <!-- On créer une ligne au tableau -->
    <th>Titre colonne 1</th> <!-- Puis deux cellules d'entêtes (vous pouvez en ajouter d'autres) -->
    <th>Titre colonne 2</th>
  </tr> <!-- On oublie pas de refermer la balise pour terminer la ligne -->

  <tr> <!-- On créer une autre ligne au tableau -->
    <td>cellule GAUCHE 1</td> <!-- On créer une cellule dans laquelle on peut placer du texte-->
    <td>cellule DROITE 1</td> <!-- On créer une une autre cellule sur la même ligne -->
  </tr>

  <tr> <!-- On refait d'autres lignes (autant qu'on le souhaite)  -->
    <td>cellule GAUCHE 2</td>
    <td>cellule DROITE 2</td>
  </tr>
 
</table> <!-- Et on oublie pas de terminer le tableau en refermant la balise -->


2/ Mise en forme (CSS)

Ouvres ta feuille de style CSS.
Ajoute ces balises CSS :
Code:
/* STYLE DU TABLEAU */
table {
border: medium solid #000000; /* Les bordures */
border-collapse: collapse; /* Pour que les bordures de tour de tableau et de cellules soient confondues */
width: 50%; /* Taille du tableau */
}


/* CELLULES D'ENTÊTES DU TABLEAU */
th {
font-family: Verdana; /* Police du texte */
border: thin solid #6495ed; /* Les bordures */
width: 50%; /* Taille du tableau */
padding: 5px; /* Espacement avec le reste du tableau */
background-color: #888888;  /* Couleur du fond des cellules d'entêtes du tableau */
background-image: url(TON IMAGE.jpg); /* Image de fond (facultatif) */
}

/* CELLULES */
td {
font-family: verdana;  /* Police du texte */
border: thin solid #6495ed; /* Les bordures */
width: 50%; /* Taille du tableau */
padding: 5px; /* Espacement avec le reste du tableau */
text-align: center; /* Alignement du texte dans le tableau */
background-color: #ffffff;  /* Couleur du fond  */
}


3/ Centrer le tableau dans la page

Pour tous les navigateurs (mises à part les versions antérieures à IE 6), ouvre ta feuille de style CSS et place ceci entre les crochets de la balise table :
Code:
margin: auto



Voilà =)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kpweb.c.la/
 
[HTML & CSS] Faire un tableau
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [résolu]Programmer et afficher un Tableau au format swf avec eanim
» Creation de QCM
» Jouer un son lorsque le bouton est en état survolé [RESOLU]
» Créer une infobulle
» comment faire un tableau?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: Les tutoriaux :: Le HTML-
Sauter vers: