Apprendre à faire un tableau

[Tech]

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

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Anzu. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.