ImageTable


Some possible answers to this question...

With Lfloat

(:table:)
(:cell style='padding:5px;':)
%lfloat margin-top=5px%Attach:Penguin.jpg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cell style='padding:5px;':)
%lfloat margin-top=5px%Attach:BlockWithTwoExtraSpaces.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cellnr style='padding:5px;':)
%lfloat margin-top=5px%Attach:woman.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cell style='padding:5px;':)
%lfloat margin-top=5px%Attach:pmwiki-40.gif
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:tableend:)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With Lframe

(:table:)
(:cell style='padding:5px;':)
%lframe margin-top=5px%Attach:Penguin.jpg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cell style='padding:5px;':)
%lframe margin-top=5px%Attach:BlockWithTwoExtraSpaces.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cellnr style='padding:5px;':)
%lframe margin-top=5px%Attach:woman.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cell style='padding:5px;':)
%lframe margin-top=5px%Attach:pmwiki-40.gif
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:tableend:)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With Cells in the "Frame" Style

(:table cellspacing=5px border='1px solid #cccccc':)
(:cell class=frame:)
%lfloat margin-top=5px%Attach:Penguin.jpg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cell class=frame:)
%lfloat margin-top=5px%Attach:BlockWithTwoExtraSpaces.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cellnr class=frame:)
%lfloat margin-top=5px%Attach:woman.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:cell class=frame:)
%lfloat margin-top=5px%Attach:pmwiki-40.gif
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(:tableend:)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With no table

>>lframe margin-bottom=10px width=300px<<
%lfloat%Attach:Penguin.jpg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>>lframe margin-bottom=10px width=300px<<
%lfloat%Attach:BlockWithTwoExtraSpaces.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>>lframe margin-bottom=10px width=300px<<
%lfloat%Attach:woman.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>>lframe margin-bottom=10px width=300px<<
%lfloat%Attach:pmwiki-40.gif
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>><<
[[<<]]
text underneath floating divs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


text underneath floating divs

With no table (percentage)

Flexes with screen size for happy usage on narrow (and very wide) displays...

>>lframe margin-bottom=10px width=46pct<<
%lfloat%Attach:Penguin.jpg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>>lframe margin-bottom=10px width=46pct<<
%lfloat%Attach:BlockWithTwoExtraSpaces.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>>lframe margin-bottom=10px width=46pct<<
%lfloat%Attach:woman.png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>>lframe margin-bottom=10px width=46pct<<
%lfloat%Attach:pmwiki-40.gif
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>><<
[[<<]]
text underneath floating divs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


text underneath floating divs

Popout (one image, no table)

>>rframe margin-top=5px width=300px<<
%lfloat%Attach:Penguin.jpg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>><<
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nulla facilisi. Suspendisse eu orci vitae nisi porttitor volutpat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nulla facilisi. Suspendisse eu orci vitae nisi porttitor volutpat

 0: 00.00 00.00 config start
 1: 00.01 00.01 config end
 2: 00.11 00.11 MarkupToHTML begin
 3: 00.11 00.11 MarkupToHTML begin
 4: 00.12 00.12 MarkupToHTML end
 5: 00.12 00.12 MarkupToHTML begin
 6: 00.13 00.12 MarkupToHTML end
 7: 00.13 00.12 MarkupToHTML begin
 8: 00.13 00.12 MarkupToHTML end
 9: 00.13 00.12 MarkupToHTML begin
10: 00.14 00.13 MarkupToHTML end
11: 00.14 00.13 MarkupToHTML begin
12: 00.14 00.13 MarkupToHTML end
13: 00.14 00.13 MarkupToHTML begin
14: 00.14 00.13 MarkupToHTML end
15: 00.14 00.14 ReadApprovedUrls SiteAdmin.ApprovedUrls begin
16: 00.15 00.14 ReadApprovedUrls SiteAdmin.ApprovedUrls end
17: 00.15 00.14 MarkupToHTML end
18: 00.16 00.14 MarkupToHTML begin
19: 00.17 00.16 MarkupToHTML end
20: 00.17 00.16 MarkupToHTML begin
21: 00.17 00.16 MarkupToHTML end
22: 00.17 00.16 now
Peak memory: 3,413,600 bytes