Les tableauxUn cadre simple - 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 tableauxPour 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 :
- 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.
- 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 tableauPour 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 wikipedia1er 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" ^^
1. Copier-coller votre tableau et ses balises tr, td, table et tout le patacaisse dans un nouveau document word.
2. chercher la fonction "remplacer par" ou faites CTRL+H
3. taper < tr > dans la partie "rechercher" et taper dans la partie "remplacer par"
4. cliquer sur "remplacer tout".
5. réitérer pour chaque balise (td, table etc...)
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]