|
Rappel : Penser à indenter votre code, car un code bien indenté est plus lisible, les corrections sont plus aisées ainsi que les mises à jours éventuelles. |
La balise <table>
La réalisation d'un tableau se fait facilement. Vous déclarez le tableau avec la balise <table>, vous créez une ligne <tr>, vous créez la cellule <td> et vous refermez vos balises; </td> pour la cellule, </tr> pour la ligne et </table> pour fermer le tableau.
| Code | Résultat | |
|---|---|---|
|
<table border="1px"><!-- Ouverture du tableau --> <tr><!-- Création d'une ligne --> <td><!-- Création de la cellule --> Le contenu de la cellule --> </td><!-- Fermeture de la cellule --> </tr><!-- Fermeture de la ligne --> </table><!-- Fermeture du tableau --> |
|
Maintenant nous allons ajouter des cellules supplémentaires en restant sur une ligne.
| Code | Résultat | |||
|---|---|---|---|---|
|
<table border="1px"> <tr> <td>Cellule 1</td> <td>Cellule 2</td> <td>Cellule 3</td> </tr> </table> |
|
Pour continuer, nous allons créer un tableau de 4 cellules, MAIS ! sur 2 lignes.
| Code | Résultat | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
<table border="0px"> <tr><!-- Création de la 1 ère ligne --> <td>Cellule 1</td> <td>Cellule 2</td> <td>Cellule 3</td> <td>Cellule 4</td> </tr><!-- Fermeture de la 1 ère ligne --> <tr><!-- Création de la 2 ème ligne --> <td>Cellule 5</td> <td>Cellule 6</td> <td>Cellule 7</td> <td>Cellule 8</td> </tr><!-- Fermeture de la 2 ème ligne --> </table> |
|
Un autre exemple : un tableau de 5 cellules sur 4 lignes. Afficher/Cacher l'exemple
Fusion des cellules
Pour fusionner les cellules, vous avez l'attribut colspan="nombre de cellules" (fusion de cellules sur la même ligne) et rowspan="nombre de cellules" (fusion de cellules de la même colonne) que vous placez dans la balise <td>.
Nous allons fusionner la cellule 1 avec la cellule 2 et la cellule 8 avec la cellule 9 et 10.
| Code | Résultat | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table><tr> <td colspan="2">Cellule 1</td> <td>Cellule 3</td> <td>Cellule 4</td> <td>Cellule 5</td> </tr><tr> <td>Cellule 6</td> <td>Cellule 7</td> <td colspan="3">Cellule 8</td> </tr></table> |
| ||||||||||
Fusion de la cellule 5 avec la cellule 10 et 15 et fusion de la cellule 6 avec
la cellule 11 avec rowspan.
Afficher/Cacher l'exemple
Fusion de la cellule 1 avec la cellule 2, 3, 4; fusion de la cellule 5 avec la 10; fusion
de la cellule 6 avec la 11 et la 16; fision de la cellule 7 avec 8 et 9; fusion de la cellule 12 avec la 13, 14
et 15 avec colspan et rowspan.
Afficher/Cacher l'exemple
Vous avez des difficultés pour réaliser les fusions de vos cellules. Alors procéder par étapes. Faîtes votre tableau avec toutes les cellules en les nommant comme les exemples (cellule 1, 2...) pour bien visualiser votre tableau. Placez vous sur la première cellule que vous voulez fusionner saisissez l'attribut colspan ou rowspan et ajoutez le nombre total de cellules à fusionner et supprimer les cellules qui seront fusionnées de votre tableau. Si vous désirez fusionner d'autres cellules recommencer de la même manière, ce qui vous évitera de vous perdre dans vos fusions quand elles sont nombreuses dans un tableau.