Bon cette fois ci ce sera des explications sur les tableaux , pourquoi eux? Parce qu'ils sont très utilisés pour les PA et que le codage phpbb2 est en tableau mais que surtout, SURTOUT c'est parce que la groosse, très grosse majorité des forum où j'ai été prit en codeur en avaient et heu...Dieu que j'ai pleuré, c'est pas parce que ça marche que c'est généralement parfait, au contraire, le tableau est un piège de la pire espèce car on ne vois pas au niveau du rendu si le code est bien , bref avant de commencer les explications, voici un top des choses à ne PAS faire (sinon, je vous frappe)

1)Ne pas empiler des balises table, par exemple:

a

a

a

a

a

a

a

a

a

Code:

<table border="1"><tr><td>a</td><td>a</td><td>a</td></tr></table>
<table border="1"><tr><td>a</td><td>a</td><td>a</td></tr></table>
<table border="1"><tr><td>a</td><td>a</td><td>a</td></tr></table>

vous comprendrez pourquoi dans les explications

2)Ne pas mettre de balise div dans une balise td sans raison c'est strictement inutile, ça complique juste le code

3)Ne pas faire le codage de tableau grâce à un "dessinateur internet", je sais pas comment ça s'appelle, mais en gros, vous dessiner un tableau, il vous donne le codage correspondant, ça à l'air cool? Et bien non, car dès que vous voudrez le remplir de contenu ect, il pourra y avoir des décalages, des trucs inutiles mis automatiquement, bref ça deviendra vite du nawak

Rien d'autres ne me vient à l'esprit, mais j'ai tellement vu ces erreurs que j'en peut plus XD


Explications sur les tableaux


Je vais faire au plus simple , en gros il y a 3 balises qui sont réellement importantes : la balise table, la balise td et la balise tr voici ce qu'elles signifies:

-table=> c'est le tableau, si vous mettez juste table votre tableau n'aura ni ligne, ni colonne
-tr=> c'est une ligne de tableau, vous vous souvenez du cas numéro un? Comme vous l'aurez comprit il faut aligner les tr et non les table , comme de la façon suivante:

a	a	a
a	a	a
a	a	a

Code:

<table border="1"><tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr></table>

-td c'est une colonne de tableau, toutes les lignes doivent avoir le même nombre de colonne sinon bug à l'horizon, si vous voulez qu'une cellule prenne la place de deux colonnes voir plus, il vous suffit d'utiliser le colspan="nombre"
Par exemple, je vais c/c l'exemple ci dessus, je voudrais que la première ligne n'ait qu'une colonne, al deuxième ligne 3 colonnes et la dernière 2 colonnes, je vais donc mettre un colspan="3" à la balise TD de la première ligne, aucun colspan à la deuxième et un colspan="2" à la troisième

a
a	a	a
a		a

Code:

<table border="1"><tr><td colspan="3">a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td colspan="2">a</td><td>a</td></tr></table>

Bien sûr, il existe son équivalent pour qu'une colonne s'étende sur deux lignes, elle est appelé le rowpan

Aussi concernant les marges des cellules vous disposez de  cellpadding="nombre" cellspacing="nombre"
Le cellpadding gère l'espace entre la bordure et le contenu
Le cellspacing gère l'espace entre les cellules (donc entre les autres td)

Il faut les placer dans le table, comme ceci:

Code:

<table cellpadding="5" cellspacing="5">

Bien sûr, le table dispose de d'autres balises comme du th qui permet de faire l'intitulé d'une colonne en gras et centré mais ce n'est pas vital si votre but premier est de coder une PA par exemple

*accorde la parole au mage qui lève la main*

Le border="1", il sert à quoi?

Bonne question, je l'ai juste mit pour que la bordure du tableau apparaisse mais globalement ce n'est plus très recommandé, en effet maintenant tout se fait par css et c'est ce dont on va parler

Je ne pense pas avoir besoin d'expliquer le fonctionnement du CSS (au pire, dites le moi et je ferais un tuto dessus) donc sachez que le css s'applique très bien au table! Pour démonstration, je vais faire m'amuser à reprendre l'exemple que je réutilise en boucle et à le bidouiller avec du css,

Donc premier réflexe, lui donner une class, je vais ici donner la class poney:

Code:

<table class="poney"><tr><td colspan="3">a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td colspan="2">a</td><td>a</td></tr></table>

Et maintenant que dois-je modifier au niveau du html? Bah....Rien, juste en mettant une class vous pourrez tout faire (sauf les rowspan et les colspan ça, vous pouvez pas faire autrement)

Je vais donc aller dans ma feuille de style css ce qui correspond à la classe :

.poney {
border:1px solid red; /*c'est la bordure */
background-color:grey; /*c'est la couleur de fond */
border-radius:20px; /*C'est l'arrondit */
width:100%; /* La largeur du tableau dans la page*/
}

Maintenant je peux par exemple que toutes mes cellules ait un fond bleu ainsi que les coins arrondits, on va donc cibler toutes les balises td se trouvant dans ce qui porte la class poney:

.poney td {
border:2px solid yellow; /*c'est la bordure */
background-color:white; /*c'est la couleur de fond */
border-radius:20px; /*C'est l'arrondit */

}

Ce qui nous donne (dites bonjour au rowspan dont je vous parlais que j'ai rajouté à l'arrache XD:

a
a	a	a
a		a
a	a	a
	a	a

Comme vous pouvez le voir toutes les td ont été modifiées!

Bien sur vous pouvez faire ça aussi avec les tr ect, y a pas de limites sur la customisation !



Voilà, un petit exercice pour les plus motivés o/

Créez moi un tableau personnalisé de 3 lignes mini et de 3 colonnes mini prenant tout l'espace de la page , faudra au moins un colspan, un rowspan et que ce soit customisé niveau css


*redonne la parole au mage du fond*

Comment je fais pour le css? Pour qu'il soit posté?

Il suffit d'utiliser la balise style, dans laquelle vous y mettrez votre css SANS AUCUN RETOUR A LA LIGNE (sinon ça marche pas XD

Par exemple tantôt j'ai utilisé posté (mais vous ne pouvez pas le voir):

Code:

<style type="text/css">.poney {border:1px solid red;background-color:grey;border-radius:20px;width:100%;}.poney td {border:2px solid yellow;background-color:white;border-radius:20px;}</style>

Et pitiez, changez le poney, histoire que j'ai pas un tableau qui soit affecté par vos posts et qui change de couleur tout le temps XD


Voilà, c'est tout pour les bases, n'hésitez donc pas à poster vos tableau, si je vois une erreur, je vous la corrigerais et je vous l'expliquerais o/