Etape 7 : Disposer ses éléments : les tableaux

Il vous est peut-être déjà arrivé de voir un code qui comporte ce genre de balise :

Code:

<table> <tbody> <tr> <td>

Eh bien oui, c'est exactement ça qu'on utilise pour faire un tableau.

Procédons étape par étape.

La théorie

⚫Tout d'abord la première balise :

Code:

<table> </table>

C'est elle qui définit que nous sommes dans un tableau. C'est elle qui pose les bases. C'est en quelque sorte la chappe de béton du tableau. On ouvre donc la balise là où on veut placer le tableau et on la ferme là où il se termine.


Dit comme ça... Mais sachez que ça se complique un peu plus par la suite.


⚫Ensuite nous avons la balise suivante :

Code:

<tbody></tbody>

Pour être simple et concis, c'est le "corps" du tableau. En clair, c'est tout ce qui sera dans cette balise qui constituera le corps du tableau. Dans les utilisations précises de tableau on retrouve aussi les balises :

Code:

<thead></thead> <tfoot></tfoot>

Respectivement l'entête et le pied du tableau. Mais c'est à titre informatif que je vous les donne. Il me semble qu'on le trouve dans les templates.


⚫Nous continuons avec la balise :

Code:

<tr></tr>

Cette dernière correspond aux lignes du tableau (par opposition aux colonnes). Pour imager, elles sont rouge, bleue et jaune sur l'exemple qui suit.

bla

bla

bla

Si vous voulez ajouter des éléments au fur et à mesure, il faut faire attention à ajouter toutes les balises nécessaires. Tant que vous n'ajouterez pas de nouvelles lignes, les colonnes ajoutées resteront dans la même ligne. Ça peut être gênant, car il se peut que les colonnes dépassent des bords du forum. Comme ceci :




⚫Pour finir nous avons la balise :

Code:

<td></td>

Par opposition aux lignes (tr), elles représentent les colonnes. Toujours en imageant, elles sont respectivement en verte, orange et violette sur l'exemple qui suit.

Bla

Bla

Bla

Voilà, nous avons définit l'utilité et le rôle de chaque balise.

La disposition des éléments

Maintenant, on va s'attaquer au véritable but de cette étape, la disposition des éléments.

Il faut savoir que beaucoup de gens apprennent à coder avec des tableaux partout. Certes, c'est une façon de faire. C'est également de cette manière que j'ai commencé. Mais il faut prendre conscience que tout ne se fait pas avec des tableaux. Parfois, si ce n'est pas souvent, ça peut poser plus de problème que ça n'apporte de solution.




J'y viens !

Le mieux, c'est d'utiliser un tableau pour classer des informations (des chiffres, des statistiques, des légendes, etc.). Le meilleur exemple que j'ai c'est pour un forum sur Naruto.



Étant donné que c'est un code qui est disponible en libre service, je vous donne le lien du LS, c'est ici.

Néanmoins, tout le monde n'a pas de forum Naruto. D'autres exemple concrets où on utilise les tableaux utilement sur Never-Utopia, ce sont les index.



Le tableau en lui même donne ça :

Show me the meaning of being lonely par A-Lice

Voir le sujet

Et voici le code :

Code:

[table][tr][td]<img src="http://nsa33.casimages.com/img/2015/02/13/150213114018447778.png" height="100" width="200" alt="" />[/td][td][size=16][b]Show me the meaning of being lonely[/b][/size]
<i>par <b>A-Lice</b></i>[/td][td]<a href="http://www.never-utopia.com/t53691-show-me-the-meaning-of-being-lonely#811386" class="paginleft">Voir le sujet</a>[/td][/tr][/table]

Mais là encore ça n'est pas utile à tous.


Alors on peut également disposer une image à côté d'un texte. Le cas le plus courant est celui de la fiche de présentation.

Sans tableau nous avons quelque chose comme ceci :

Code:

<img src="http://img11.hostingpics.net/pics/355723icon100100.png" /><div style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.</div>

Maintenant si on met un tableau :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.

Code:

<table><tbody><tr><td><img src="http://img11.hostingpics.net/pics/355723icon100100.png" /></td><td style="text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.</td></tr></tbody></table>

On constate que l'alignement est parfait. Cependant, parfois les marges des tableaux peuvent gêner. Dans l'exemple juste au dessus, on voit que l'image est pas collée au bord du tableau, (enfin on ne le voit pas vraiment, mais on a pas eu besoin de mettre de padding pour qu'il y ait un espace entre l'image et le texte) c'est de ce genre de marge que je parle. Dans ces cas-là, on peut jouer avec des margins négatifs. (On ne va pas parler des positions ici, mais c'est une possibilité également.)

Voici donc la version brute :

Blabla

Code:

<table style="background: gray;"><tbody><tr><td>Blabla</td></tr></tbody></table>

Et la version avec retouche des marges :

Blabla

Code:

<table style="background: gray;" cellpadding="0" cellspacing="0"><tbody><tr><td>Blabla</td></tr></tbody></table>

En plus des marges intérieures, il peut y avoir des marges extérieures quand on place le tableau dans un bloc. Dans ce genre de cas ça peut déranger aussi.


On peut tout faire. De là à ce que ce soit correct ou dans les normes, je n'en sais rien. Mais je dois bien avouer que parfois c'est plus pratique que de mettre des propriétés dans la balise "table".


Eh bien, pour styliser votre tableau vous n'êtes pas obligés de passer par une div pour lui donner des propriétés. On peut très bien inclure un style, une class ou un id à la balise "table". C'est exactement ce que j'ai fait quand j'ai mis les lignes et les colonnes en évidence par des couleurs.

Voilà, c'est ainsi que se termine cette étape.

Très jolie étape Alice! ^^
Je pense qu'il n'y a rien à rajouter, selon moi c'est assez clair, donc je classe! ^^

Merci pour ce tuto' ! :)

Merci pour ce tuto ! :)
Je tiens à signaler également que l'image (concernant les index de NU) est dead : et même chose pour le sujet qui suit donc... :/

Boop ! Je suis ma vdd, mais les exemples sont mort, du coups c'est compliqué de visualiser quelque chose de plus complexe ! En dehors de ça, merci beaucoup pour le tuto