Partout Les forums Les lexiques Les tutoriaux

Apprendre les langages du web c'est si simple avec nous

Les tableaux II - XwZ

Bon voila le deuxième tutorial sur les tableaux dans lequel il va y avoir les explications sur le fusionnement des cellules sur la longueur ou la hauteur. Cette partie est assez simple à comprendre mais il faut avoir (pour le début) un crayon et un papier sous la main pour faire le schéma du tableau que l'on veut avoir car c'est assez abstrait. Ici je vous donne une méthode de travail pour commencer mais si vous ne voulez pas la suivre car elle vous parrez bizarre ou absurde n'hésitez pas à changer de méthode, toutes les méthodes sont bonnes.
Méthode :
1/ Griffonner le tableau
2/ Décomposer le tableau rang par rang
3/ Connaître le nombre maximum de cellule sur un rang.

Voila maintenant que c'est fait on a tout ce qu'il faut.
Je vais donner un petit exemple pour faire ce tableau :


Maintenant passons à l'analyse :
1/ Voir l'image ci-dessus
2/ Voici ce que donne la décomposition du tableau rang par rang
- rang 1 : il y a 4 cellules dont les deux premières sont fusionnées.
- rang 2 : il y a 5 cellules. De plus on voit que la 4ième est fusionnées avec celle du dessus donc on en compte que 4
- rang 3 : il y a 5 cellules non fusionner donc rien de spécial.
- rang 4 : il y a 3 cellules dont 3 fusionnées.
- rang 5 : il y a 5 cellules non fusionnées
3/ Ici le nombre maximum de cellules dans un rang est 5 donc la longueur de base est de 5 cellules

Maintenant la première approche du code, on créer le tableau avec 5 rangs et le bon nombre de cellule dans chaque rang :

<table>
  <tr>
    <td>texte 1</td>
    <td>texte 2</td>
    <td>texte 3</td>
    <td>texte 4</td>
  </tr>
  <tr>
    <td>texte 5</td>
    <td>texte 6</td>
    <td>texte 7</td>
    <td>texte 8</td>
  </tr>
  <tr>
    <td>texte 9</td>
    <td>texte 10</td>
    <td>texte 11</td>
    <td>texte 12</td>
    <td>texte 13</td>
  </tr>
  <tr>
    <td>texte 14</td>
    <td>texte 15</td>
    <td>texte 16</td>
  </tr>
  <tr>
    <td>texte 17</td>
    <td>texte 18</td>
    <td>texte 19</td>
    <td>texte 20</td>
    <td>texte 21</td>
  </tr>
</table>

Maintenant que c'est fait utilisons les attributs colspan et rowspan pour fusionner les cellules. rowspan pour fusionner verticalement et colspan pour fusionner horizontalement.
Le code de notre tableau devient donc :

<table>
  <tr>
    <td colspan="2">texte 1</td>
    <td>texte 2</td>
    <td rowspan="2">texte 3</td>
    <td>texte 4</td>
  </tr>
  <tr>
    <td>texte 5</td>
    <td>texte 6</td>
    <td>texte 7</td>
    <td>texte 8</td>
  </tr>
  <tr>
    <td>texte 9</td>
    <td>texte 10</td>
    <td>texte 11</td>
    <td>texte 12</td>
    <td>texte 13</td>
  </tr>
  <tr>
    <td>texte 14</td>
    <td>texte 15</td>
    <td colspan="3">texte 16</td>
  </tr>
  <tr>
    <td>texte 17</td>
    <td>texte 18</td>
    <td>texte 19</td>
    <td>texte 20</td>
    <td>texte 21</td>
  </tr>
</table>

Regardons le résultat (je met le border à 1 pour que l'on voit les traits du tableau) :


Voila vous êtes maintenant capable de faire une belle mise en page avec les tableaux mais ces derniers sont fortement déconseillé à cause de leur poids il faut donc utiliser les calques. Ils feront le sujet d'un prochain tutorial.

Les commentaires :