Le RPG Star Wars par forum // Qualité RP, intrigues & évolution... Immergez-vous !
 
AccueilTableau de bordFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 HTML et tableaux

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Raimee Baryon
~ Padawan ~
~ Padawan ~
Raimee Baryon


Nombre de messages : 90
Âge du perso : 20 ans
Race : Humain
Binôme : Sevel'he Ean (chevalier Jedi)

Feuille de personnage
Activité actuelle:
HP:
HTML et tableaux Left_b1167/67HTML et tableaux Empty_10  (67/67)
PF:
HTML et tableaux Left_bar_bleue82/82HTML et tableaux Empty_bar_bleue  (82/82)

HTML et tableaux _
MessageSujet: HTML et tableaux   HTML et tableaux Icon_minitimeVen 26 Avr 2019 - 23:48

Salut à tous !

J'ai remarqué que vous utilisiez des tableaux html typés "table" et que c'est pas mal contraignant pour des novices de comprendre tout ce qui est tr, td et cie, d'autant plus que Forumactif utilise cette formule pour afficher un forum et qu'à la moindre bidouille css si vous n'identifiez ou classez pas une capsule, ou à la moindre erreur d'inattention (oubli d'un /table ou autre) vous risquez fort bien de changer entièrement la synergie de l'affichage complet Razz

Et je parle même pas quand vous décidez de revoir ce tableau pour en changer les cellules, là, ça part très souvent en cacahuètes. Et çà, je parle uniquement pour les Indiana Jones et autres Dora, qui, aventuriers dans l'âme, souhaitent braver les nombreux dangers d'une telle encapsulation. Pourtant il existe une autre formulation très simple, beaucoup plus simple, qui s'affranchit de toute notion de programmation sous architecture tabulaire et qui est super intuitive, à la fois pour vous et à la fois pour votre ordinateur.

Roulement de tambour, il s'agit de la propriété "grid" et de sa petite famille...

123
456

Code:
<table id='raimee_montableau'><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>


1
2
3
4
5
6

Code:
<style>#raimee_montableau1{display : grid; grid-template-columns: repeat(3, 1fr);}</style>
<div id='raimee_montableau1'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Avec cette méthode, finis les retours à la ligne, la gestion de la place des cellules, finis les erreurs et finis les risques de modifier carrément l'affichage du forum. Finis les bidouilles de style entre les table, les tr et les td, les alignements verticaux, les marges et j'en passe... Et finie aussi la terreur de se dire "nom d'un Ortolan, je veux plus ce tableau sur 3 colonnes mais sur 4 mais ca va me mettre des plombes à tout changer"... Un simple changement de déclaration de valeurs, et paf, ca fait des chocapics. Razz


1
2
3
4
5
6

Code:
<style>#raimee_montableau2{display : grid; grid-template-columns: repeat(2, 1fr);}</style>

1
2
3
4
5
6

Code:
<style>#raimee_montableau3{display : grid; grid-template-columns: 50px 1fr 100px;}</style>

En changeant uniquement les valeurs déclarées, votre navigateur calcule tout seul le reste. Il m'aura fallu changer simplement le 3 par 2 dans la déclaration du nombre de colonnes pour que mon tableau change de forme, ou changer complètement sa revue parce que je voulais que la première colonne fasse 50px et la dernière 100px mais celle du milieu, je voulais qu'elle prenne le reste de la page et çà, sans devoir faire appel à un mathématicien de la NASA.

Il n'y a que deux contraintes avec cette méthode. La première étant de respecter les balises de départ et de fin de votre tableau, la seconde, de ne pas faire de retour-chariot (taper sur entrée pour changer de ligne, la balise br/ et ses cousines, etc... ) entre deux balises sinon Forumactif est pas content.

début de mon tableau ma cellule ma cellule ma cellule ... fin de mon tableau

A ne pas confondre avec la propriété unique columns qui elle permet de séparer votre page en deux et de fonctionner à la manière d'une édition de journal, très pratique aussi, mais qui n'a rien à voir avec la gestion d'un tableau, son uniformité et ses propriétés géométriques Very Happy C'est vrai que c'est une propriété très sympa aussi mais si tu veux faire un tableau propre sans prendre avant, pendant et après des dolipranes, n'utilise pas cette propriété Razz




Exemple pour les caracs du forum :

Force
4
Dextérité
5
Agilité
5
Constitution
5
Intelligence
3
Sagesse
4
Charisme
4

Code:
<style>#tonpseudo_tableaucarac{display : grid; grid-template-columns: auto 1fr; column-gap:10px;}</style>
Puis :
Code:
<div id='tonpseudo_tableaucarac'><div>Force</div><div>4</div><div>Dextérité</div><div>5</div><div>Agilité</div><div>5</div><div>Constitution</div><div>5</div><div>Intelligence</div><div>3</div><div>Sagesse</div><div>4</div><div>Charisme</div><div>4</div></div>
ou si t'es allergique aux capsules :
Code:
<div id='tonpseudo_tableaucarac'><div>Force
Dextérité
Agilité
Constitution
Intelligence
Sagesse
Charisme</div><div>4
5
5
5
3
4
4</div></div>



Si t'as envie d'un tableau plus spécifique mais que tu ne sais pas trop comment t'y prendre, n'hésite pas à poster à la suite de ce message pour demander conseil :salut:
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

HTML et tableaux

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Les Enfants de la Force :: HRP :: Flood :: Zone graphique-