Les tableaux permettent de diviser la page en différentes zones d'espace et de remplir ces zones avec des certaines représentations comme les textes, images, couleurs, etc. Ceci permet un meilleur contrôle de la position de nos objets sur notre page et ainsi, gérer convenablement la présentation.
Tous les tableaux peuvent avoir des contours ou des fonds visibles ou non.
Avant de commencer, nous devons connaitre 3 groupes de balises pour l'insertion de tableaux dans nos fichiers HTML.
Premièrement: <table> et </table> indiquent le début et la fin du tableau.
Ensuite: <tr> ainsi que </tr> indiquent le commencement et la finale d'une rangée du tableau.
En fin: <td> et </td> indiquent une case figurante de la rangé.
Par exemple: <table><tr><td>Ceci est un tableau.</td><td>Il est composé de plusieurs cases...</td></tr><tr><td>ainsi que plusieurs rangées.</td></tr></table>
Qui donnerait:| Ceci est un tableau. | Il est composé de plusieurs cases... |
| ainsi que plusieurs rangées. |
Mais qui apparaîtrait comme:
| Ceci est un tableau. | Il est composé de plusieurs cases... |
| ainsi que plusieurs rangées. |
Mise en forme d'un tableau
Comme dans un fichier HTML quelconque, nous pouvons tout faire à l'intérieur d'une cellule d'un tableau.
Mais tout d'abord, configurons les bordures du tableau. Les attributs border, cellspacing et cellpadding vont nous aider à former notre tableau.
L'attribut «border» donne l'épaisseur de la bordure. La valeur 0 correspond à aucune bordure, c'est également la valeur par défaut. Plus on augmente la valeur, plus la bordure s'épaissit.
Par exemple: <table border=5><tr><td>Un contour plus large</td></tr></table>
Qui donnerait:
| Un contour plus large |
«Cellspacing» signifie l'espace entre les cases. Encore une fois, plus le nombre est élevé, plus l'espace est large.
Par exemple: <table cellspacing= 8 border=1><tr><td>L'espace entre</td><td>les cases</td></tr><tr><td>est plus</td><td>importante.</td></tr></table>
Qui donnerait:
| L'espace entre | les cases |
| est plus | importante. |
Ensuite, nous avons l'attribut «cellpadding» qui donnera une marge au contenu de chaque case. Bien entendu, plus son équivalence est haute, plus les mots seront espacés de la bordure.
Par exemple: <table cellspacing=8 border=1><tr><td>L'espace entre</td><td>les mots</td><td>et la</td></tr><tr><td>bordure</td><td>est plus</td><td>importante.</td></tr></table>
Qui donnerait:| L'espace entre | les mots | et la |
| bordure | est plus | importante. |
La couleur
Il est aussi possible de changer la couleur du tableau (le fond et la bordure). Les attributs suivants: «bgcolor» et «border color» nous permetteront d'y parvenir. «bgcolor="#..."», où les «...» est remplacé par le code couleur voulu, changera le fond tandis que border «color="#..."» changera la couleur de la bordure. Ces 2 attributs peuvent également être ajoutés spécifiquement à une cellule du tableau en les indiquant dans la ou les balises <td> de notre choix.
Par exemple: <table bgcolor="#A36DD4" bordercolor="#1DC01F" border=8><tr><td>Le fond</td><td>et la</td><td>bordure</td></tr><tr><td>ont</td><td>changés</td><td>de couleur.</td></tr></table>
Qui donnerait:| Le fond | et la | bordure |
| ont | changés | de couleur. |
Voir articles sur les couleurs
Fusion des cellules
Les lignes et colonnes peuvent être fusionnées, afin d'obtenir des cellules plus ou moins grandes les unes des autres. Ce fusionnement est réalisé avec les attributs : «rowspan» et «colspan».
Pour fusionner 2 cellules adjacentes sur une rangée, utilisons l'attribut «rowspan=...», où les points de suspension désignent le nombre de cases à fusionner.
Par exemple: <table border=1><tr><td rowspan=3>Titre</td><td>cell. 1</td><td rowspan=2>cell. 2</td><td>cell. 3</td></tr><tr><td>cell. 4</td><td>cell. 5</td></tr><tr><td>cell. 6</td><td>cell. 7</td><td>cell. 8</td></table>
Qui donnerait:| Titre | cell. 1 | cell. 2 | cell. 3 |
| cell. 4 | cell. 5 | ||
| cell. 6 | cell. 7 | cell. 8 |
Pour fusionner 2 cellules adjacentes sur une colonne, utilisons l'attribut «colspan=...», où les points de suspension désignent le nombre de cases à fusionner.
Par exemple: <table border=1><tr><td colspan=2>Titre</td></tr><tr><td>cell. 1</td><td>cell. 2</td></tr></table>
Qui donnerait:
| Titre | |
| cell. 1 | cell. 2 |
Nous pouvons permettre les 2 sur le même tableau.
Par exemple: <table border=1><tr><td>Cell. 1</td><td colspan=2>2 cellules fusionnées (sur la même ligne)</td></tr><tr><td>Cell. 2</td><td>Cell. 3</td><td rowspan=2>2 cellules fusionnées (sur la même colonne)</td></tr><tr><td>Cell. 4</td><td>Cell. 5</td></tr></table>
Qui donnerait:
| Cell. 1 | 2 cellules fusionnées (sur la même ligne) | |
| Cell. 2 | Cell. 3 | 2 cellules fusionnées (sur la même colonne) |
| Cell. 4 | Cell. 5 | |
Tout et n'importe quoi
Tel qu'indiqué, nous pouvons tout inclure dans un tableau: de la couleur, mais aussi des images, des liens, tout type de texte, des listes, des formulaires, des frames, et plus encore, ... et même d'autres tableaux
Par exemple:<center><table border=1><tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV2KQKpJUdNTwuk6gqcDR-amYhTZ2S7bNLuxEkSU-bRNmdP1yD6cFGcIZTosu9nqH0nEFSsNlwbUje6OYBH9B8pnocPzXyNFCiK1p97P2R9c635l6DKsRk-WjSrqnQQUh2Jnx99WyZQwc/s200/image+test3.jpg"></td><td align=center><a href="http://napkinco.blogspot.com">Voici un lien</a></td></tr><tr><td><ol><li><ul><li>texte 1</li><li>texte 1,2</li></ul></li><li><ul><li>texte 2</li><li>texte 2,2</li></ul></li></ol></td><td>Comme <b>vous le <u>remarquez,</b> nous <i>sommes</u> en mesure de <s>superposer</i> différents</s> <sup><u>rehausseurs</u></sup> <b><i><u><s>de textes.</b></i></u></s></td></tr></table></center>
Qui donnerait:
 | Voici un lien |
| Comme vous le remarquez, nous sommes en mesure de |
voir articles sur les images;
voir articles sur les liens;
voir articles sur les listes;
voir articles sur la configuration de textes
