Les créatures mythiques aussi ont le droit de faire leur pub
 
AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  


Affichage jusqu'au 13.02.17
TITRE

Partagez | 
 

 HTML/CSS : les tableaux

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Masculin
Messages : 262
Date d'inscription : 12/11/2014
Age : 21
MessageSujet: HTML/CSS : les tableaux   Mer 26 Nov - 21:14

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


aaa
aaa
aaa
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
aaa
aa
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
aaa
aa
aaa
aa



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/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fairytailrpg-wol.forumactif.org
avatar
Masculin
Messages : 692
Date d'inscription : 23/05/2013
Age : 26
Localisation : Paris
MessageSujet: Re: HTML/CSS : les tableaux   Ven 28 Nov - 9:23

C'est très bon tuto mais connaissant bien le codage web, les tableaux ne sont pas ergonomiques, on peut dire que c'est une solution de simplicité. Smile

Moi personnellement, des que je peux éviter de faire des tableaux, je le fait, et j'utilise plutôt des divs Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.humouretdetente.com/
avatar
Masculin
Messages : 262
Date d'inscription : 12/11/2014
Age : 21
MessageSujet: Re: HTML/CSS : les tableaux   Ven 28 Nov - 13:08

Pareil :p

Et c'est pas un tuto, sinon j'aurais détaillé à mort chaque balise, comment faire tel ou tel truc, c'est juste des conseils pour utiliser les tableaux correctement :p
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fairytailrpg-wol.forumactif.org
Invité
Invité
avatar
MessageSujet: Re: HTML/CSS : les tableaux   Ven 28 Nov - 20:02

Bonsoir,


Bravo pour le détail sur la création de table et l'inclusion d'un appel par le CSS et où inclure directement la personnalisation de la table par la balise style, je pense que Lucy déplacera ce tuto dans la section adéquate dès que possible.

Sacha.

Revenir en haut Aller en bas
avatar
Masculin
Messages : 262
Date d'inscription : 12/11/2014
Age : 21
MessageSujet: Re: HTML/CSS : les tableaux   Sam 29 Nov - 23:47

Mais mais mais, c'est pas un tuto XD

Si c'était un tuto j'aurais fait un truc bien plus complet, c'est juste une liste d'erreur que j'ai souvent vu et comment faire pour ne pas les reproduire XD

Sinon j'aurais parlé de header, footer et bien d'autres choses XD ET j’aurais bien plus détaillé XD
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fairytailrpg-wol.forumactif.org
Invité
Invité
avatar
MessageSujet: Re: HTML/CSS : les tableaux   Dim 30 Nov - 0:38

Bonsoir,

Pourquoi pas en faire un tuto, il serai peut-être utile pour certain membre ?
Revenir en haut Aller en bas
avatar
Masculin
Messages : 262
Date d'inscription : 12/11/2014
Age : 21
MessageSujet: Re: HTML/CSS : les tableaux   Dim 30 Nov - 12:18

Bah...Faire un tuto me demandera beaucoup plus de temps, à la limite j'en ferais un si je vois que ça intéresse du monde x)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fairytailrpg-wol.forumactif.org
loup garou m
avatar
Membre du staff : Administrateur
Masculin
Messages : 8091
Date d'inscription : 19/04/2013
Age : 46
Localisation : Londres
loup garou m
MessageSujet: Re: HTML/CSS : les tableaux   Dim 30 Nov - 18:21

Merci pour ces conseils Kager Wink et merci de ton investissement. Au moins, ça montre que je n'ai pas ouvert ce service pour rien.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://chat-pub.forumotiom.co.uk
Contenu sponsorisé
MessageSujet: Re: HTML/CSS : les tableaux   

Revenir en haut Aller en bas
 
HTML/CSS : les tableaux
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» besion d'aide language html lecteur de musique !! (Résolu)
» Xhtml/css: integrer une video avec html
» fond noir qui n'apparait pas en html résolu

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Legend Pub :: 
Brethil Dhel
 :: 
La forêt sacrée
-
Sauter vers: