GroupesFAQAccueilRechercherMembresS'enregistrerConnexion

Partagez | 
 

 Tuto HTML #4 - Les tableaux

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Dragon-blue
Administrateur
Administrateur
avatar

Masculin Nombre de messages : 12949
Date d'inscription : 03/11/2008
Age : 24
Humeur : 5 ans o/

MessageSujet: Tuto HTML #4 - Les tableaux   Jeu 16 Déc 2010 - 12:19

Encore un tuto et cette fois ci sur les tableaux en HTML/CSS.
Vous me direz : Mais c'est moche un tableau !! oO
Et je vous répondrai : Savez vous tout ce que l'on faire avec un tableau ? ^^
En bref, si vous avez bien suivi les tutos précédents, je vous conseille vivement de voir celui ci !




Pour commencer, voici la balise type d'un tableau :
Code:
<table></table>


A l'intérieur de cette balise nous allons y glisser les lignes tu tableaux avec la balise tr, ici j'en met 2 par exemple :

Code:
<table>
<tr></tr>
<tr></tr>
</table>


Puis on insert les cellules td à l'intérieur des balises tr des lignes :
La balise th est comme td, elle nous sert de ligne d'en tête.
La balise caption nous sert de titre au tableau.

Code:
<table>
<caption>Les vedettes de GN</caption>
<tr>
<th>Les BG de GN</th>
<th>Les meilleurs posteurs</th>
</tr>
<tr>
<td>Yoshi-One</td>
<td>Dragon-blue</td>
</tr>
<tr>
<td>Jean-Eudes</td>
<td>Takamichi</td>
</tr>
<tr>
<td>Le Docteur</td>
<td>Demonking</td>
</tr>
</table>


Ce qui donne :

Spoiler:
 

Remarque : Ne faites pas attention à la couleur de la balise th, c'est du au CSS du forum qui associe à th l'image dégradée et répétée que vous pouvez voir un peu partout sur le forum.


Pour l'instant le tableau est très vide xD
Nous allons donc voir les propriétés CSS qui nous permettront de rendre ce tableau plus agréable à la vue.

-caption-side : indique la position du titre du tableau : caption. Valeurs :
  • top : par défaut : titre placé en haut.
  • bottom : en bas du tableau.
  • left : à gauche du tableau.
  • right : à droite du tableau.


-border-collapse : indique si les bordures sont collées ou non. Valeurs :
  • separate : par défaut : bordures séparées.
  • collapse : bordures collées.



Je rappelle également quelques propriétés qui peuvent nous êtres utiles dans un tableau :

-margin : taille de la marge extérieure en px.

-padding : taille de la marge intérieure en px.

-border : bordure avec comme valeur : sa largeur, sa forme et sa couleur.

-font-family : type de police, exemples : "Arial, Times, Times New Roman, serif".

-font-weight : valeur "bold" pour une écriture en gras.

-font-size : taille de la police en px ou em.



Enfin, j'assemble le tout, et voici le résultat :

Spoiler:
 


Et son code :

Code:

<table style="border-collapse: collapse; border: 4px outset red; margin: auto;">
<caption style="font-weight: bold; font-size: 1.4em; color: #009900; margin-bottom: 20px;">Les vedettes de GN</caption>
<tr style="border: 1px solid black;">
<th>Les BG de GN</th>
<th>Les meilleurs posteurs</th>
</tr>
<tr style="border: 1px solid black;">
<td>Yoshi-One</td>
<td>Dragon-blue</td>
</tr>
<tr style="border: 1px solid black;">
<td>Jean-Eudes</td>
<td>Takamichi</td>
</tr>
<tr style="border: 1px solid black;">
<td>Le Docteur</td>
<td>Demonking</td>
</tr>
</table>



A vous d'essayer des combinaisons de code et de nous montrer vos chefs d'œuvres ^^

Après, il est vrai qu'il est beaucoup plus simple d'utiliser des fiches de styles CSS liés à la page HTML pour faire le design d'un tableau. Mais pour cela, il faut un logiciel adapté. Dans un prochain tuto, je vous expliquerai comment alléger votre code grace au CSS.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Fate
Rédacteur
Rédacteur
avatar

Masculin Nombre de messages : 5724
Date d'inscription : 19/12/2009
Age : 24
Humeur : Nunununutella!

MessageSujet: Re: Tuto HTML #4 - Les tableaux   Jeu 16 Déc 2010 - 12:45

Waouh,sympa le tuto, jvais essayer tiens :leon: quand j'aurais le pc

_________________




Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Elfimate ©
You can't run
You can't run
avatar

Masculin Nombre de messages : 1417
Date d'inscription : 12/07/2010
Age : 23
Humeur : Pourtant il était gentil Hu

MessageSujet: Re: Tuto HTML #4 - Les tableaux   Jeu 16 Déc 2010 - 13:23

Good, très utile !

( 300ème post cheers !!! )

_________________

------------------ Elfimate Seigneur des écureuils
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ender
You can't run
You can't run
avatar

Masculin Nombre de messages : 1443
Date d'inscription : 01/03/2010
Age : 22

MessageSujet: Re: Tuto HTML #4 - Les tableaux   Jeu 16 Déc 2010 - 13:27

Flatteur va :hap: !!! MERCI POUR LE TUTO !!!!!! :noel

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: Tuto HTML #4 - Les tableaux   

Revenir en haut Aller en bas
 
Tuto HTML #4 - Les tableaux
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Génération Nintendo :: Forums Nintendo :: Dossiers & Tutoriels-
Sauter vers: