Apprendre à faire un tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutoriel Apprendre à faire un tableau

Message par Tech le Ven 1 Aoû 2014 - 16:25

Apprendre à faire un tableau


Ce tutoriel vous explique comment faire un tableau.

Introduction

• Vous savez sans doute ce qu'est un tableau, ce n'est pas bien compliqué et c'est très utile. Vous pouvez y insérer du texte, des images, des vidéos, et ce, d'une manière ordonnée, structurée et même esthétique.

• Il est possible de faire un tableau en Html et également en BBcode (en remplaçant dans les instructions qui suivent les < par [ et les > par ] ).

• Même en ayant peu de connaissances en html, il est tout à fait possible de produire un tableau convenable et même de l'améliorer par la suite. Il faut pratiquer les bases et à la longue, vous ferez vos tableaux rapidement !

• Et pour ceux qui ne l'auraient pas remarqué, les templates de la version phpbb2 sont justement structurés avec des tableaux. Vous pourrez donc vous lancer dans leur modification.

Les Bases

• Un tableau est formé par des colonnes et des lignes.
• Les balises
Code:
<table>
&
Code:
</table>
encadrent TOUJOURS le contenu.
• Juste après la balise <table>, vous avez la balise <tr> (ligne), suivie par la balise <td> (colonne).

♣ Quand vous ouvrez une balise, quelle qu'elle soit, il ne faut pas oublier de la fermer. J'ouvre ma balise td, je ferme ma balise td. Sinon, il y aura des bugs et votre tableau ne ressemblera à rien.

♣ Les td (cellules) ne doivent pas se balader dans le code, elles se trouvent toujours dans un tr (ligne).


Tableau:
Code:

<table>
  <tr>
      <td>Ligne 1 (a)</td>
      <td>Ligne 1 (b)</td>
      <td>Ligne 1 (c)</td>
  </tr>
  <tr>
      <td>Ligne 2 (a)</td>
      <td>Ligne 2 (b)</td>
      <td>Ligne 2 (c)</td>
  </tr>
  <tr>
      <td>Ligne 3 (a)</td>
      <td>Ligne 3 (b)</td>
      <td>Ligne 3 (c)</td>
  </tr>
</table>

Exemple 1
Contenu A
Contenu B
=> Ce tableau, très simple, contient une ligne et deux colonnes.
Le code aura donc cette forme:

Code:
<table><tr><td></td><td></td></tr></table>


Exemple 2
Contenu 1
Contenu 2
Contenu 3
Contenu 4

=> Ce tableau contient deux lignes et deux colonnes.
Le code aura donc cette forme:

Code:
<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>

Et le contenu dans tout ca ?

• Vos contenus: texte, image, vidéo se placeront toujours entre les balises td.

Exemple

Code:
<table><tr><td>Contenu A</td><td>Contenu B</td></tr><tr><td>Contenu C</td><td>Contenu D</td></tr></table>

Résultat:
Contenu A
Contenu B
Contenu C
Contenu D


Colspan && Rowspan

♣ Colspan => Pour "fusionner" des cellules.
♣ Rowspan => Pour "fusionner" des colonnes.

• On sort le grand jeu, les fusions ! Vos tableaux n'auront pas tous une structure simple et basique, d'autres seront un peu plus sophistiqués. C'est là que nos amis colspan et rowspan entrent en jeu.

• Colspan ou Rowspan, ce bout de code se trouvera toujours dans votre td et le code ressemblera à ceci:

Code:
<table><tr><td colspan="2">Contenu A</td></tr><tr><td>Contenu B</td><td>Contenu C</td></tr></table>
=> toujours sous cette forme: td colspan="Un chiffre" ou td rowspan="un chiffre" (le chiffre indique le nombre de cases qui vont "fusionner".

En image, pour mieux comprendre =>
Contenu A
Contenu B
Contenu C

ou encore:

Contenu A
Contenu B
Contenu C




{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }
avatar

Tech
Modéractif
Modéractif

Masculin
Messages : 21367
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum