Vous pouvez poster dans la section entraide pour vos forums sans être inscrit !


 

Partagez | .
 

 [Tuto - HTML/CSS] Tableau simple

SkySkyavatar Modérateur
Dim 2 Juin - 6:37   

Bonjour,

Voici un petit tableau tout simple :
TestTest n°1
Test n°2Test n°3
Code:
<table width="600"><tr><td style="border:1px solid #123456;" width="200" rowspan=2 vAlign="middle" align="center">Test</td><td style="border:1px solid #123456;" width="400" colspan=2 align="center">Test n°1</td></tr><tr><td style="border:1px solid #123456;" width="200">Test n°2</td><td style="border:1px solid #123456;" width="200">Test n°3</td></tr></table>

Explications :
  • Table : Balise pour le tableau au complet
  • TR : Balise pour le renvoi vers une nouvelle ligne du tableau
  • TD : Balise pour une cellule d'un tableau
  • Style="XXXX" : Permet de mettre du css pour agrémenter vos tableau
  • Rowspan=X : A pour effet de donner une largeur de lignes que l'on définit. (Dans ce cas 2) "Fusionne les cellules en quelque sorte"
  • Colspan=X : a pour effet de donner une largeur de colonne que l'on définit. (Dans ce cas 2) "Fusionne les colonne en quelques sortes
  • vAlign : Il permet de contrôler la disposition verticale des données à l'intérieur des cellules du tableau.
    - valign=top : le texte est placé dans la partie supérieure de la cellule.
    - valign=middle : le texte est placé au milieu de la cellule (valeur par défaut).
    - valign=bottom : le texte est placé dans la partie inférieure de la cellule.
    - valign=baseline : le texte est placé sur la même ligne.
  • Align : Il permet de contrôler la disposition horizontale des données à l'intérieur des cellules du tableau.


Je ne développe pas la partie CSS car vous pouvez personnalisé au maximum selon vos connaissances
Page 1 sur 1

 Sujets similaires

-
» Tableau de partenaires avec effet Zoom
» TinyWall un pare feu léger, simple, gratuit et en Français
» [TUTO] Intégration Parrot MKI9200 dans une Lagune 3 Phase 1
» Megazine 3 : un "flip album"
» [Annulée] Demande une page HTML

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le forum d'entraide de Mr. Docteur :: Libre service & commandes :: Codage :: Libre service :: Tutoriels-