Wrapping your template in a bit of Perl code for better understanding, I get the following: 
use strict;
use HTML::Template;
# use File::Find;

# use File::Find's wanted() method to gather
# all directories/files...

my $dir_list = [
                { dir => 'foo', dir_row => [
                                            { file_row => [
                                                           { filename 
+=> 'foo0.pic' },
                                                           { filename 
+=> 'foo1.pic' },
                                                           { filename 
+=> 'foo2.pic' },
                                                           { filename 
+=> 'foo3.pic' },
                                                           { filename 
+=> 'foo4.pic' }
                                                           ] # for fil
+e_row
                                            }
                                            ] # for dir_row
                                            },
                { dir => 'bar', dir_row => [
                                            { file_row => [
                                                           { filename 
+=> 'bar0.pic' },
                                                           { filename 
+=> 'bar1.pic' },
                                                           { filename 
+=> 'bar2.pic' },
                                                           { filename 
+=> 'bar3.pic' },
                                                           { filename 
+=> 'bar4.pic' }
                                                           ] # for fil
+e_row
                                                           }
                                            ] # for dir_row
                }
                ];

my $tmpl = new HTML::Template(type => 'filehandle', source => *DATA);
$tmpl->param(dir_list => $dir_list);
print $tmpl->output();
print "here\n";

__DATA__
<html>
<head>
    <title><TMPL_VAR NAME="title"></title>
</head>
<body>
    <center>
    <table>
    <TMPL_LOOP NAME="dir_list">
        <tr>
            <th colspan="5" bgcolor="#E0E0E0"><font size="+3">
        <TMPL_VAR NAME="dir"></font></th>
        </tr>
        <TMPL_LOOP NAME="dir_row">
        <tr>
            <TMPL_LOOP NAME="file_row">
            <td colspan="5"><TMPL_VAR NAME="filename"></td>
            </TMPL_LOOP>
        </tr>
        </TMPL_LOOP>
    </TMPL_LOOP>
    </table>
    </center>
</body>
</html>

[download]
I didn't test the code yet, but think that it's somewhat close to what you'd want your data structure to look like. Also, I had to change the names you chose for your loops to make things a bit more clear ;-). See, it is already obvious that 'outter_file_loop' is infact an 'outer' loop since it is outside of the 'inner' loop. What is not obvious, however, is what kind of data that loop is 'cycling' through. So, by naming that as 'dir row' I know that the outer loop is in fact cycling through directories whereas the 'inner' loop (which I named 'file_row') cycles through list of files (5 files) in that directory.

UPDATE: Fixed data structure a bit and tested the script.. The output I get is 
<html>
<head>
    <title></title>
</head>
<body>
    <center>
    <table>
    
        <tr>
            <th colspan="5" bgcolor="#E0E0E0"><font size="+3">
        foo</font></th>
        </tr>
        
        <tr>
            
            <td colspan="5">foo0.pic</td>
            
            <td colspan="5">foo1.pic</td>
            
            <td colspan="5">foo2.pic</td>
            
            <td colspan="5">foo3.pic</td>
            
            <td colspan="5">foo4.pic</td>
            
        </tr>
        
    
        <tr>
            <th colspan="5" bgcolor="#E0E0E0"><font size="+3">
        bar</font></th>
        </tr>
        
        <tr>
            
            <td colspan="5">bar0.pic</td>
            
            <td colspan="5">bar1.pic</td>
            
            <td colspan="5">bar2.pic</td>
            
            <td colspan="5">bar3.pic</td>
            
            <td colspan="5">bar4.pic</td>
            
        </tr>
        
    
    </table>
    </center>
</body>
</html>

[download]


UPDATE: Should you need any help filling the actual data structure using 'File::Find' module or some such, let me know.

UPDATE 1: If you were looking at more than 5 files in a given directory, the structure you may expect to get will look something like this: 
my $dir_list = [
                { dir => 'foo', dir_row => [
                                            { file_row => [
                                                           { filename 
+=> 'foo0.pic' },
                                                           { filename 
+=> 'foo1.pic' },
                                                           { filename 
+=> 'foo2.pic' },
                                                           { filename 
+=> 'foo3.pic' },
                                                           { filename 
+=> 'foo4.pic' }
                                                           ]
                                                           }, # for fi
+le_row
                                            # second row (next batch o
+f files of 5)
                                            { file_row => [
                                                           { filename 
+=> 'foo5.pic' },
                                                           { filename 
+=> 'foo6.pic' },
                                                           { filename 
+=> 'foo7.pic' },
                                                           { filename 
+=> 'foo8.pic' },
                                                           { filename 
+=> 'foo9.pic' }
                                                           ]
                                                           }, # for fi
+le_row
                                            ] # for dir_row
                                            },
                { dir => 'bar', dir_row => [
                                            { file_row => [
                                                           { filename 
+=> 'bar0.pic' },
                                                           { filename 
+=> 'bar1.pic' },
                                                           { filename 
+=> 'bar2.pic' },
                                                           { filename 
+=> 'bar3.pic' },
                                                           { filename 
+=> 'bar4.pic' }
                                                           ]
                                                           } # for fil
+e_row
                                            ] # for dir_row
                }
                ];

[download]
Plug this in the code to see your output. Notice here that I have simply added an extra anonymous hash to the dir_row array of the first directory.

_____________________ 
$"=q;grep;;$,=q"grep";for(`find . -name ".saves*~"`){s;$/;;;/(.*-(\d+)
+-.*)$/;
$_=["ps -e -o pid | "," $2 | "," -v "," "];`@$_`?{print"+ $1"}:{print"
+- $1"}&&`rm $1`;
print$\;}

[download]

In reply to Re: Nested loops in HTML::Template by vladb
in thread Nested loops in HTML::Template by Anonymous Monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.