Tuto HTML #4 - Les tableaux

Nouveau sujet Répondre

Dragon-blue
Vieux de la vieille

#27426

Jeu 16 Déc 2010 - 20:19 (modifié)

“Pouet”
21119 messages
Inscrit en 2008

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:

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:

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.

_________________