Définition
Une façon élégante et somme toute assez répandue de réaliser des mises en pages de qualité est d’utiliser les balises [[table]]. L’exemple ci-dessous utilise l’attribut style pour la table entière mais aussi pour des cellules particulières afin de parfaire la mise en page qui utilise les balises [[row]] et [[cell]]
Cet exemple est pris dans http://snippets.wikidot.com/ (chercher = table layout …), et c'est un excellent exemple.
Dans cet exemple, nous essayons de réaliser une mise en page qui contient 2 cellules verticales séparées opposées à une cellule unique, le seul moyen que nous avons alors trouvé est d’intégrer un tableau dans l'une des cellules.
1. Les instructions
[[table style="margin: 0 10px;"]]
[[row]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 40%;"]]
+++ exemple de cellule
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....
[[/cell]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver;width: 40%;"]]
+++ Un autre exemple de cellule
bLA bLA ! Vivamus pharetra posuere sapien. Nam consectetuer....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]]
[[table style="padding: 0px; margin: 0 0px; width: 100%"]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]]
@@ @@
+++ encore une cellule gauche (1)
Suspendisse id velit vitae ligula volutpat condimentum. ....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]]
@@ @@
+++ cellule (2)
Nam magna enim, accumsan eu, blandit sed, blandit a, eros....
[[/cell]]
[[/row]]
[[/table]]
[[/cell]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]]
+++ Cellule unique de droite 3
Nam magna enim, accumsan eu, blandit sed, blandit a, eros...
[[/cell]]
[[/row]]
[[/table]]2. Le resultat
exemple de cellule
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.
un autre exemple de cellule
bLA bLA ! Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
une autre cellule de gauche (1)
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.
cellule (2)
Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.
Cellule unique de droite 3
Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.
Copié par Helmut_pdorf à partir de http://snippets.wikidot.com/
Lecture instructives:
Layout with tables
Tabs
Mimic Colspan With Multiple Tables