Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Apprendre à faire un tableau

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

  • 0

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

avatar

Tech
Modéractif
Modéractif

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

https://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