Table Layout

In dit document wordt uitgelegd over de 'Tabel Layout', oftewel 'Table Layout'.

Beschrijving

Een handige manier om geavanceerde lay-outcontrole toe te voegen is het gebruik van de tag [[table]].. In het voorbeeld wordt het kenmerk style gebruikt voor de hele tabel en bepaalde cellen om de lay-out aan te passen. Met behulp van de tags [[row]] en [[cell]].

De onderstaande informatie is gebruikt uit de Engelse versie van deze pagina. (PoesKaji) is niet de originele auteur van dit stuk informatie.

Credits: Helmut_pdorf. Vind het originele, Engelse stuk hier.
De informatie is gevonden in http://snippets.wikidot.com/ ( Zoek naar deze tag = table layout …) — Een erg goed voorbeeld!

Ik heb hier in het voorbeeld geprobeerd om aan het verzoek voor row-span te voldoen over 2 rijen met één cel ernaast (cel 3 hier):
Ik heb het opgelost door een seconde te gebruiken. tabel in één cel met 2 rijen met één cel).

1. De code van het voorbeeld (en later de actie)

[[table style="margin: 0 10px;"]]
[[row]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 40%;"]]

+++ Voorbeeld cell (example cell)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....
[[/cell]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver;width: 40%;"]]

+++ Extra voorbeeld (extra exAMPLE)

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 "]]

@@ @@ 
+++ Andere linker cell (1) (another left cell (1))

Suspendisse id velit vitae ligula volutpat condimentum. ....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]] 

@@ @@

+++ Cell (2) (cell (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"]]

+++ Rechter cell 3 alleen (right cell 3 alone)
Nam magna enim, accumsan eu, blandit sed, blandit a, eros...
[[/cell]]

[[/row]]

[[/table]]

In actie

Deze stukken zijn ook door Helmut_pdorf geschreven. Deze teksten zijn in het Latijn geschreven.

Voorbeeld cell (example cell)

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.

Extra voorbeeld (extra exAMPLE)

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.

Andere linker cell (1) (another left cell (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.

Cell (2) (cell (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.

Rechter cell 3 alleen (right cell 3 alone)

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.


Gekopiëerd van http://snippets.wikidot.com/ van Helmut_pdorf!

Verder lezen:
Layout with tables
Tabs
Mimic Colspan With Multiple Tables


Backlinks:


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License