Le tableau
L'utilité des tableau en xhtml
Bon, un tableau, sur le net à plusieurs utilité, donc pour classez vos donnez (évidemment, les tableau ont les à créer pour sa), mais aussi pour les design web, nous verrons pour classifiez nos donnez puis, dans un tuto qui arrivera bientôt, nous aborderont le design d'un site web avec la mis en page css.
Comment créer un tableau?
Un tableau est simple à créer:
- Code: Tout sélectionner
<table></table>
Vous serez surpris (ou pas) que le code ne fait RIEN!
En effet il ajoutez une ligne à notre tableau.
- Code: Tout sélectionner
<table><tr></tr></table>
Toujours rien! non, je ne vous fout pas de votre figure...
Mais maintenant les colonnes, combien en voulait vous? bon va pour 3 collone.
- Code: Tout sélectionner
<table><tr>
<td>1er ligne et 1 colonne</td>
<td>1er ligne et 2 colonne</td>
<td>1er ligne et 3 colonne</td>
</tr></table>
Bon, maintenant 2 ligne, non c'est pas trop compliqué
- Code: Tout sélectionner
<table>
<tr>
<td>1er ligne et 1 colonne</td>
<td>1er ligne et 2 colonne</td>
<td>1er ligne et 3 colonne</td>
</tr>
<tr>
<td>2eme ligne et 1 colonne</td>
<td>2eme ligne et 2 colonne</td>
<td>2eme ligne et 3 colonne</td>
</tr>
</table>
Bon c'est pas laid, il y a pas de bordure, heureusement qu'il existe le css.
la fonction border prend plusieurs paramètre.
- Code: Tout sélectionner
boder: nomdepixel nomdelabordure nomdelacouleur;
Le nom de la pixel est en faites le nombre de pixel que dois faire une bordure, 3px est suffisant.
le nom de la bordure:
- solid simple encadrez
- double une double bordure
- ridge effet de relief
- inset l'encadrez donne l'effet que le texte est derrière la page, enfin testez vous même.
Bon ce qui donne pour nous, un tableau en rouge assez jolie lol
- Code: Tout sélectionner
td
{
border: 2px solid red;
}
Pourquoi td et pas table?
Parce que, si j'aurais utilisez table, il y aurais une bordure seulement autour du tableau, et pas dedans!
Le titre du tableau et la légende
pour les tableau administratif, il faut un titre et une légende. Bon, avec un tableau comme celui ci
- Code: Tout sélectionner
<table>
<tr>
<td>killian</td><td>15ans</td><td>france</td>
</tr><tr>
<td>renaud</td><td>16ans</td><td>france</td>
</tr><tr>
<td>tibo</td><td>15ans</td><td>france</td>
</tr>
</table>
Avec, une legende et un titre, sa donne ceci
- Code: Tout sélectionner
<table>
<caption>Mes amis</caption>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
<tr>
<td>killian</td><td>15ans</td><td>france</td>
</tr><tr>
<td>renaud</td><td>16ans</td><td>france</td>
</tr><tr>
<td>tibo</td><td>15ans</td><td>france</td>
</tr>
</table>
Bon, bref. Vous savez maniez les tableau, enfin presque!
Jouez avec les cellules
Utilisez colspan! Mais à quoi peut t-il servire hein? Dois je vous rappelez que un informaticien c'est flemmard?
- Code: Tout sélectionner
<table>
<caption>Mes amis</caption>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
<tr>
<td>killian</td><td>???</td><td>????</td>
</tr><tr>
<td>renaud</td><td>16ans</td><td>france</td>
</tr><tr>
<td>???</td><td>???</td><td>france</td>
</tr>
</table>
Bon, j'ai mis en "???" toutes les donnés que je ne connait pas, mais voila grace à la magie de colspan
- Code: Tout sélectionner
<table>
<caption>Mes amis</caption>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
<tr>
<td>killian</td><td colspan="2">???</td>
</tr><tr>
<td>renaud</td><td>16ans</td><td>france</td>
</tr><tr>
<td colspan="2">???</td><td>france</td>
</tr>
</table>
En faites colspan permet qu'une cellule prenne de la place de plusieur cellule, dans notre cas, il prend la place de 2cellules.
Ainsi, ce termine ce chapitre
Il serait quand même un peu mieux que tu utilises les balises 
