| langages informatiques |
|
|
Apprendre comment créer un site Web pour les débutants
Chapitre 1: Des tableaux simple
Chapitre 2: Des tableaux plus complexes
Chapitre 3: Décoration avec du CSS
Première balise: <table> </table>. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau
Cette balise est de type block, il faut la mettre en dehors d'un paragraphe.
Exemple :
Code : HTML
<ul>
<p>C'est un paragraphe qui se trouve avant le tableau.</p>
<table>.
<!-- Ici, on mettra le contenu du tableau -->
</table>.
<p>C'est un paragraphe qui se trouve après le tableau.</p>
puis deux importantes nouvelles balises :
* <tr> </tr> : indique le début et la fin d'une ligne du tableau.
* <td> </td> : indique le début et la fin d'une cellule.
En XHTML, on construit le tableau ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
Par exemple, si je veux faire un tableau à deux lignes, avec 4 cellules par lignes (donc 4 colonnes), je devrai taper ceci :
Code : HTML
<ul>
<table>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Ajouter des bordures, vous connaissez déjà le code CSS qu'il faut écrire !
Code : CSS
<ul>
td /* Toutes les cellules des tableaux... */
{
border: 1px solid black; /* ... une bordure de 1px */
}
Il existe une propriété CSS spécifique aux tableaux : border-collapse, qui signifie "coller les bordures entre elles".
Elle peut prendre 2 valeurs :
* collapse : les bordures seront collées entre elles, c'est ce qu'on recherche.
* separate : les bordures seront dissociées (valeur par défaut)
Code : CSS
<ul>
table
{
border-collapse: collapse; /* Les bordures du tableau seront collées */
}
td
{
border: 1px solid black;
}
Maintenant que l'on a ce qu'on veut, on va ajouter la ligne d'en-tête du tableau. Dans notre exemple, les en-têtes sont "Produit", "prix unitaire en €" , ""et "Total".
La ligne d'en-tête se crée aussi avec un <tr> , mais les cellules à l'intérieur sont des <th> et non pas des <td> !!!
Code : HTML
<ul>
<table>
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Et le code CSS:
<ul>
td, th /* Mettre une bordure sur les td ET les th */
{
border: 1px solid black;
}
Le tableau peut avoir un titre qui renseigne le visiteur sur le contenu du tableau.
La balise <caption> . Cette balise se met au début du tableau. C'est elle qui indique le titre du tableau :
Code : HTML
<ul>
<table>
<caption>Liste de produits</caption>
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Ces petits tableaux suffisent dans la plupart des cas, mais il se peut que vous ayez besoin de tableaux plus... complexes.
Nous allons voir 2 techniques particulières :
Pour les gros tableaux, il est possible de les diviser en 3 parties :
En-tête
Corps du tableau
Pied de tableau
Pour certains tableaux, on peut avoir besoin de fusionner des cellules.
Si vous avez un très grand tableau, il faut le découper en plusieurs parties. Pour cela, il existe des balises XHTML qui permettent de définir les 3 parties du tableau :
L'en-tête en haut: les balises <thead></thead>
Le corps au centre: les balises <tbody></tbody>
Le pied du tableau en bas: les balises <tfoot></tfoot>
Il faut mettre les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>
Voici donc le code à écrire pour faire le tableau en 3 parties :
Code : HTML
<ul>
<table>
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
</thead>
<tfoot> <!-- Pied de tableau -->
<tr>
<td> Total </td>
<td> </td>
<td> </td>
<td> 650</td>
</tr>
</tfoot>
<tbody> <!-- Corps du tableau -->
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</tbody>
</table>
Il n'est pas obligatoire d'utiliser ces 3 balises (thead, tbody, tfoot) sur un tableau. sauf si votre tableau est assez gros et que vous voulez l'organiser plus clairement.
Pour les petits tableaux garder l'organisation qu'on a vu au début.
Sur des tableaux complexes, on a souvent besoin de "fusionner" des cellules entre elles.
Exemple de fusion:
Pour fusionner des cellules, on ajouter un attribut à la balise <td>.
Il existe 2 types de fusion :
* La fusion horizontale : c'est la fusion qui s'effectue horizontalement sur des colonnes.
On utilise l'attribut colspan.
* La fusion verticale de lignes : deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.
On utilisera l'attribut rowspan.
Il faut donner une valeur à l'attribut (colspan ou rowspan).
C'est le nombre de cellules à fusionner entre elles. Pour deux cellules :
On écrira donc: <td colspan="2">
On a dit que c'est la fusion qui s'effectue horizontalement sur des colonnes.
On utilise l'attribut colspan.
<td colspan="2"> FUSION DEDEUX CELLUES
On peut fusionner plus de cellules à la fois (3, 4, 5... comme vous voulez).
Code : HTML
<ul>
<table>
<caption>Liste de produits</caption>
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td> Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td colspan="3">Total</td>
<td>225</td>
</tr>
</table>
C’est un petit peu compliqué.
Prenons notre tableau de tout à l’heur ce lui avec 6 lignes et où il y a sur la première colonne une répétition de stylo si on veut fusionner les deux cellules stylo qui se suivent .
Lisez bien cet exemple pour comprendre.
Code : HTML
<ul>
<table>
<caption>Liste de produits</caption>
<tr>
<th> Produit </th>
<th> Quantité </th>
<th> Prix unitaire en € </th>
<th>Total </th>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td rowspan="2">Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td> cahier</td>
<td> 50</td>
<td> 2,50 </td>
<td>125 </td>
</tr>
<tr>
<td rowspan="2">Stylo </td>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
<tr>
<td> 50 </td>
<td> 2 </td>
<td> 100 </td>
</tr>
</table>
Et avec le CSS on peut rendre nos tableaux plus beaux...
La plupart des propriétés CSS dont nous aurons besoin vous les connaissez .
Un rappelle :
Pour modifier la bordure des cellules, on utiliser border.
Pour modifier la couleur de fond d'une cellule, on utilise background-color.
Pour modifier l'image de fond d'une cellule, on utilisera background-image
Mais on modifie aussi la taille (font-size) et la police (font-family) du texte des cellules d'en-tête, en appliquant les propriétés aux balises <th>
On agrandit aussi le tableau tout entier (width), le centrer (margin:auto et oui le tableau est un block).
On peut centrer le texte à l'intérieur des cellules (text-align:center), modifier les marges intérieures des cellules (padding).
Code : CSS
<ul>
caption /* Titre du tableau */
{
margin: auto; /* Centre le titre du tableau */
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 150%;
color: #CC8800;
margin-bottom: 20px; /* Pour éviter que le titre ne soit collé au tableau en dessous */
}
table /* Le tableau lui-même */
{
margin: auto; /* Centré le tableau */
border: 4px outset blue; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
}
th /* Les cellules d'en-tête */
{
background-color: #000066;
color: white;
font-size: 1.2em;
font-family: Arial, "Arial Black", Times, serif;
}
td /* Les cellules normales */
{
border: 1px solid black;
font-family: Times, "Times New Roman", serif;
text-align: center; /* Tous les textes des cellules seront centrés*/
padding: 5px; /* marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
| Précèdent | retour au sommaire | voir la suite |
