1 résultat trouvé pour couleur

Les tableaux

Un cadre simple

TEXTE TEXTE

Code:

[table border="1" cellpadding="2" cellspacing="1"]
[tr]
[td]TEXTE TEXTE[/td]
[/tr]
[/table]

Cadre amélioré

Vous pouvez choisir la dimension, la couleur, la hauteur et la forme des bordures de votre cellule.
Vous pouvez même sélectionner les propriétés de son contenu.

[size=18][b]TEXTE TEXTE TEXTE TEXTE[/b][/size]

Code:

[table style="width: 350px; height: 150px; border: dashed 5px; border-color: #cc0000; background-color: orange;"]
[tr]
[td style="color: green; font-weight: bold; font-size: 18px; font-family: impact; letter-spacing: 2px; word-spacing: 10px; text-align: center; "]TEXTE TEXTE TEXTE TEXTE[/td]
[/tr]
[/table]

Tableau avec plusieurs cellules



ajoute une cellule horizontalement.

TEXTE CELLULE 1

TEXTE CELLULE 2

Code:

[table border="1" cellpadding="2" cellspacing="1"]
[tr]
[td]TEXTE CELLULE 1[/td] [td]TEXTE CELLULE 2[/td]
[/tr]
[/table]


ajoute une colonne et dans cette colonne, il faut remettre les balises



TEXTE CELLULE 1	TEXTE CELLULE 2
TEXTE CELLULE 3	TEXTE CELLULE 4

Code:

[table border="1" cellpadding="2" cellspacing="1"]
[tr]
[td]TEXTE CELLULE 1[/td] [td]TEXTE CELLULE 2[/td]
[/tr]
[tr]
[td]TEXTE CELLULE 3[/td] [td]TEXTE CELLULE 4[/td]
[/tr]
[/table]

Et vous pouvez toujours personnaliser votre tableau comme expliqué ci-avant avec des propriétés telles que la hauteur "height:00px", la largeur "width:00px", la couleur du texte "color:#macouleur", la forme des bordures du tableau ou des cellules "border: #couleur 00px solid" etc.

Les bordures des tableaux

Pour créer une bordure, il faut la signaler après le style=" ... ", comme ceci : style="border: red 1 px solid". Ce qui signifie que vous voulez une bordure rouge continue de 1 pixel d'épaisseur :

Bordure simple

Code:

[table style="border: red 1px solid"]
[tr]
[td]Bordure simple [/td]
[/tr]
[/table]

Vous pouvez personnaliser cette bordure à volonté en connaissant les différente variations ci-après :

Formes : solid, dotted, dashed, double, ridge, groove, inset, ouset etc.

SOLID

DOTTED

DASHED

DOUBLE

RIDGE

GROOVE

INSET

OUTSET

Code:

[table style="border: red 2px solid"]
[tr]
[td]SOLID[/td]
[/tr]
[/table][/td][td]

[table style="border: red 2px dotted"]
[tr]
[td]DOTTED[/td]
[/tr]
[/table]

[table style="border: red 2px dashed"]
[tr]
[td]DASHED[/td]
[/tr]
[/table]

[table style="border: red 4px double"]
[tr]
[td]DOUBLE[/td]
[/tr]
[/table]

[table style="border: red 4px ridge"]
[tr]
[td]RIDGE[/td]
[/tr]
[/table]

[table style="border: red 4px groove"]
[tr]
[td]GROOVE [/td]
[/tr]
[/table]

[table style="border: red 4px inset"]
[tr]
[td]INSET[/td]
[/tr]
[/table]

[table style="border: red 4px outset"]
[tr]
[td]OUTSET [/td]
[/tr]
[/table]

[td]






couleur : fastoche ! Dans la formule style="border: red 1px solid", il suffit de replacer le "rouge" par la couleur que vous souhaitez, sous forme de code couleur, d'hexadécimal ou de RVB.

l'épaisseur : Cette fois, on remplace le "1px" par l'épaisseur souhaitée, dans l'unité que vous préférez (px, em, cm)

Le fond des cellules et du tableau

Pour personnaliser le fond, la formule magique est style="background-color: #macouleur" si vous souhaitez changer la couleur et style="background-image: url('adresse de l'image')".

Pour changer la couleur de fond du tableau, il faut appliquer la formule magique à [table][/table] ( [table style="background-color: red"] [/table] ) ; pour changer la couleur d'une cellule, il faut appliquer la formule à
(
).

Un exemple avec une couleur rouge pour la tableau et une couleur jaune-orange-vert-rose pour les cellules (huuu que ça va être moche ^^) :

CELLULE jaune	CELLULE orange
CELLULE verte	CELLULE rose

Vous pouvez aussi utiliser les class que nous mettons à disposition pour vos présentations.
Pour cela, il faut remplacer le style=" ... " par class="nom de votre class" ; par exemple : class="lara2" pour le tableau et class="frame" et class="pastille2" pour les cellules, ce qui donnera :

CELLULE frame	CELLULE frame[/b]
CELLULE frame	CELLULE pastille2

Alignement :

Et évidemment, dans les cellules, vous pouvez mettre des images, du texte, tout ce que vous voulez. AFin d'aligner le contenu, vous pouvez donner ces attributs aux cellules :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum, tellus et ornare dapibus, ipsum sapien pellentesque neque, ut lacinia justo urna nec diam. Curabitur augue est, placerat porttitor vehicula sit amet, congue vitae nulla. Aliquam erat volutpat. Suspendisse vestibulum volutpat felis blandit gravida.

Code:

[table][tr][td style="text-align:center"]TEXTE[/td] [td style="text-align:justify"]TEXTE[/td][/tr]
[tr][td style="text-align:right"]TEXTE[/td] [td style="text-align:left"]TEXTE[/td][/tr][/table]

Attacher une image de fond aux cellule :

Nous avons vu que la formule magique était style="background-image: url('adresse de l'image')". Mais il faut préciser qu'on peut appliquer des effets à ce fond et, par exemple, situer spatialement l'image, lui demander de se reproduire horizontalement ou verticalement selon besoin etc.

• background-image : appelle l'image
  
  
  
  • url('adresse de l'image');
    
  
  
  
• background-repeat
  
  
  
  • Par défaut, si vous ne précisez pas, ça sera toujours "repeat". Autrement, il a :
    
  • repeat-x (l'image plusieurs fois horizontalement)
    
  • repeat-y (l'image plusieurs fois verticalement)
    
  • no-repeat (l'image ne se répète pas)
    
  
  
  
• background-attachment (scrollou fixe mais dans les tableaux, je vois pas à quoi ça sert ! C'est bon pour les fond de page)
  
• background-position
  
  
  
  • left top
    
  • left center
    
  • left bottom
    
  • right top
    
  • right center
    
  • right bottom
    
  • center top
    
  • center center
    
  • center bottom
    
  
  
  

Exemple :

Attachons cette image en fond : https://2img.net/h/oi68.tinypic.com/r7rkok.jpg

Mon bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Et cette image maintenant : https://2img.net/h/oi51.tinypic.com/2hcdh6q.jpg

Mon bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

(c) Texture de wikimedia.org, gif de wikipedia

1er tableau

Code:

[table style="background-image: url('http://i68.tinypic.com/r7rkok.jpg'); background-repeat: repeat;"][tr]
[td] [color=black][size=18]<blockquote>Mon bla bla bla </blockquote>[/size][/color][/td]
[/tr][/table]

2ème tableau

Code:

[table border="2" style="background-image: url('http://oi51.tinypic.com/2hcdh6q.jpg'); background-repeat: no-repeat; background-position: bottom right;"][tr]
[td] Mon bla bla bla [/td]
[/tr][/table]

Faire des tableaux relous

                   

Je déteste les tableaux	C'est horrible et ça déforme les forums, les tableaux
C'est chiant les tableaux...

Code:

[table class="pastille4" width="50%" border="1" padding="1" cellspacing="1" valign="middle" align="center"]  [tr]    [td]
      Je déteste les tableaux
    [/td]    [td]
      C'est horribles et ça déforme les forums, les tableaux
    [/td]  [/tr]  [tr]    [td colspan=2]
      C'est chiant les tableaux...
    [/td]  [/tr][/table]

Pour ceux qui sont flémards, voici un petit générateur de tableau ^^ : http://www.quackit.com/html/html_table_generator.cfm

Attention, les balises proposées par ce générateur son des balises . Vous observerez un décalage vertical quand vous l'incorporerez dans un post. Si vous êtes très flémard comme moi, voici une astuce. Il faut simplement savoir manier le copier-coller et la fonctionner "remplacer par" dans "word" ^^


Faire écouter de la musique que vous avez hébergé

Code:

<embed src="http://klgallouet.free.fr/sound/son.mp3" height=20 width=140 ></embed>

[/td]