Thumbnail gallery without tables?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Max Quordlepleen

    Thumbnail gallery without tables?

    Apologies for the crossposting, I wasn't sure which of these groups to
    ask this in.

    I have been lurking in these groups for a week or so, trying to glean
    what I need to design a simple, clean set of pages that get the w3c
    tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
    to the great information in these groups.

    Now, however, I'm having trouble. A few days ago, I read a thread that
    dealt with this issue of table-less thumbnails, and one example of an
    approach that worked was
    http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
    renders properly for me in my Gecko browsers, and iCapture shows it as
    rendering properly in Safari, but in IE6, the thumbnails are lined up
    vertically in a single column. I am very pleased to have been able to
    avoid using any tables at all so far, and would love to keep this
    up. May I ask for suggestions on how to achieve a plain, boring
    table-like gallery in CSS2, sans tables?

    --
    Democracy is a form of government that substitutes election by the
    incompetent many for appointment by the corrupt few. - G. B. Shaw
  • Els

    #2
    Re: Thumbnail gallery without tables?

    Max Quordlepleen wrote:
    [color=blue]
    > Apologies for the crossposting, I wasn't sure which of these groups to
    > ask this in.
    >
    > I have been lurking in these groups for a week or so, trying to glean
    > what I need to design a simple, clean set of pages that get the w3c
    > tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
    > to the great information in these groups.
    >
    > Now, however, I'm having trouble. A few days ago, I read a thread that
    > dealt with this issue of table-less thumbnails, and one example of an
    > approach that worked was
    > http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
    > renders properly for me in my Gecko browsers, and iCapture shows it as
    > rendering properly in Safari, but in IE6, the thumbnails are lined up
    > vertically in a single column.[/color]

    Not in my IE6.0....
    [color=blue]
    > I am very pleased to have been able to
    > avoid using any tables at all so far, and would love to keep this
    > up. May I ask for suggestions on how to achieve a plain, boring
    > table-like gallery in CSS2, sans tables?[/color]

    give them 'display:inline '. This way you can center them or
    left align them, just like regular text.


    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -

    Comment

    • Lauri Raittila

      #3
      Re: Thumbnail gallery without tables?

      In article Max Quordlepleen wrote:[color=blue]
      > Apologies for the crossposting, I wasn't sure which of these groups to
      > ask this in.
      >
      > I have been lurking in these groups for a week or so, trying to glean
      > what I need to design a simple, clean set of pages that get the w3c
      > tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
      > to the great information in these groups.
      >
      > Now, however, I'm having trouble. A few days ago, I read a thread that
      > dealt with this issue of table-less thumbnails, and one example of an
      > approach that worked was
      > http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
      > renders properly for me in my Gecko browsers, and iCapture shows it as
      > rendering properly in Safari, but in IE6, the thumbnails are lined up
      > vertically in a single column.[/color]

      Could you specify which IE6 minor version? On what platform? IIRC have
      tested on XP and 2000.
      [color=blue]
      > I am very pleased to have been able to
      > avoid using any tables at all so far, and would love to keep this
      > up. May I ask for suggestions on how to achieve a plain, boring
      > table-like gallery in CSS2, sans tables?[/color]

      how about:


      Does it happen there too?

      (special interest as I did both sites)

      --
      Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
      Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
      tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

      Comment

      • Lauri Raittila

        #4
        Re: Thumbnail gallery without tables?

        In article Els wrote:[color=blue]
        > Max Quordlepleen wrote:
        >[color=green]
        > > Apologies for the crossposting, I wasn't sure which of these groups to
        > > ask this in.
        > >
        > > I have been lurking in these groups for a week or so, trying to glean
        > > what I need to design a simple, clean set of pages that get the w3c
        > > tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
        > > to the great information in these groups.
        > >
        > > Now, however, I'm having trouble. A few days ago, I read a thread that
        > > dealt with this issue of table-less thumbnails, and one example of an
        > > approach that worked was
        > > http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
        > > renders properly for me in my Gecko browsers, and iCapture shows it as
        > > rendering properly in Safari, but in IE6, the thumbnails are lined up
        > > vertically in a single column.[/color]
        >
        > Not in my IE6.0....
        >[color=green]
        > > I am very pleased to have been able to
        > > avoid using any tables at all so far, and would love to keep this
        > > up. May I ask for suggestions on how to achieve a plain, boring
        > > table-like gallery in CSS2, sans tables?[/color]
        >
        > give them 'display:inline '. This way you can center them or
        > left align them, just like regular text.[/color]

        Display:inline should not work as it does in IE, so it is useless when
        you have captions.

        but:


        Uses inline for IE and inline-table for Opera 6 and 7 and bugless
        browsers. Tried to aply float:left for mozilla, but html*somthing bug is
        fixed in gecko, and it don't work anymore.

        Why they don't they fix bugs that do some real harm, instead of fixing
        useful bugs? There has been no big CSS fixes since Mozilla 1.


        --
        Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
        Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
        tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

        Comment

        • Max Quordlepleen

          #5
          Re: Thumbnail gallery without tables?

          Els <els.aNOSPAM@ti scali.nl> writes:
          [color=blue]
          > Not in my IE6.0....[/color]


          Now _that's_ weird. My HTML editor is set to invoke my default browser
          (K-Meleon), and my IE6, so that I can see how pages look in both. When
          I open this page in the editor, and invoke IE6, the thumbs are
          vertically aligned. When I paste the URL into an already open IE6
          address bar, they are properly aligned. Very strange. Sorry for
          troubling you, and thanks for the prompt, helpful response.

          --
          Life? Don't talk to me about life!


          Comment

          • Els

            #6
            Re: Thumbnail gallery without tables?

            Lauri Raittila wrote:
            [color=blue]
            > In article Els wrote:
            >[color=green]
            >>Max Quordlepleen wrote:
            >>[color=darkred]
            >>>I am very pleased to have been able to
            >>>avoid using any tables at all so far, and would love to keep this
            >>>up. May I ask for suggestions on how to achieve a plain, boring
            >>>table-like gallery in CSS2, sans tables?[/color]
            >>
            >>give them 'display:inline '. This way you can center them or
            >>left align them, just like regular text.[/color]
            >
            > Display:inline should not work as it does in IE, so it is useless when
            > you have captions.[/color]

            True, I wasn't thinking of captions, actually, just the thumbs.
            [color=blue]
            > but:
            > http://www.student.oulu.fi/~laurirai/www/css/gallery/
            >
            > Uses inline for IE and inline-table for Opera 6 and 7 and bugless
            > browsers. Tried to aply float:left for mozilla, but html*somthing bug is
            > fixed in gecko, and it don't work anymore.[/color]

            The work of a webmaster/designer is never done...
            All these manufacturers of browsers should really have a
            maillist for webmasters, in which they tell exactly which
            bugs they fix everytime they do... together with a
            workaround if it was a useful bug ;-)

            On a recent site I already resorted to little tables (two
            cells) inside divs floating left. (where i didn't need it
            centered)
            That way I was able to define a height to the thumb and
            caption together, so that when the caption is more than one
            line, the divs don't start piling up at the end of the row.
            Also it made it possible to have the horizontal thumbs not
            top align with the vertical thumbs.
            [color=blue]
            > Why they don't they fix bugs that do some real harm, instead of fixing
            > useful bugs?[/color]

            Maybe the useful bugs are just easier to fix :-)
            [color=blue]
            > There has been no big CSS fixes since Mozilla 1.[/color]

            Good, I haven't memorized all CSS rules and bugs yet. Let 'm
            wait till I have ;-)

            --
            Els

            Sonhos vem. Sonhos vão. O resto é imperfeito.
            - Renato Russo -

            Comment

            • Richard

              #7
              Re: Thumbnail gallery without tables?

              Lauri Raittila wrote:
              [color=blue]
              > In article Max Quordlepleen wrote:[color=green]
              >> Apologies for the crossposting, I wasn't sure which of these groups to
              >> ask this in.
              >>
              >> I have been lurking in these groups for a week or so, trying to glean
              >> what I need to design a simple, clean set of pages that get the w3c
              >> tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
              >> to the great information in these groups.
              >>
              >> Now, however, I'm having trouble. A few days ago, I read a thread that
              >> dealt with this issue of table-less thumbnails, and one example of an
              >> approach that worked was
              >> http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
              >> renders properly for me in my Gecko browsers, and iCapture shows it as
              >> rendering properly in Safari, but in IE6, the thumbnails are lined up
              >> vertically in a single column.[/color][/color]
              [color=blue]
              > Could you specify which IE6 minor version? On what platform? IIRC have
              > tested on XP and 2000.[/color]
              [color=blue][color=green]
              >> I am very pleased to have been able to
              >> avoid using any tables at all so far, and would love to keep this
              >> up. May I ask for suggestions on how to achieve a plain, boring
              >> table-like gallery in CSS2, sans tables?[/color][/color]
              [color=blue]
              > how about:
              > http://www.student.oulu.fi/~atlas/kuvat/[/color]
              [color=blue]
              > Does it happen there too?[/color]
              [color=blue]
              > (special interest as I did both sites)[/color]

              Good job too. Shows up in my IE 6 just fine. The sites show 3 across.
              1024x768.



              Comment

              • Sid Ismail

                #8
                Re: Thumbnail gallery without tables?

                On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.co m>
                wrote:

                : and one example of an
                : approach that worked was
                : http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
                : renders properly for me in my Gecko browsers, and iCapture shows it as
                : rendering properly in Safari, but in IE6, the thumbnails are lined up
                : vertically in a single column. I am very pleased to have been able to
                : avoid using any tables at all so far, and would love to keep this
                : up. May I ask for suggestions on how to achieve a plain, boring
                : table-like gallery in CSS2, sans tables?


                What in heaven's name is wrong with using tables for this application?
                Especially if you have text captions under/above each image.

                Tables is more universal than souped-up morse code.

                Sid

                Comment

                • Els

                  #9
                  Re: Thumbnail gallery without tables?



                  Sid Ismail wrote:
                  [color=blue]
                  > On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.co m>
                  > wrote:
                  >
                  > : and one example of an
                  > : approach that worked was
                  > : http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
                  > : renders properly for me in my Gecko browsers, and iCapture shows it as
                  > : rendering properly in Safari, but in IE6, the thumbnails are lined up
                  > : vertically in a single column. I am very pleased to have been able to
                  > : avoid using any tables at all so far, and would love to keep this
                  > : up. May I ask for suggestions on how to achieve a plain, boring
                  > : table-like gallery in CSS2, sans tables?
                  >
                  > What in heaven's name is wrong with using tables for this application?
                  > Especially if you have text captions under/above each image.[/color]

                  (lack of) flexibility :-)



                  --
                  Els

                  Sonhos vem. Sonhos vão. O resto é imperfeito.
                  - Renato Russo -

                  Comment

                  • Max Quordlepleen

                    #10
                    Re: Thumbnail gallery without tables?

                    On Mon, 23 Feb 2004 22:11:26 GMT, Lauri Raittila
                    <lauri@raittila .cjb.net> proffered, in :
                    news:MPG.1aa4a7 097d2d6758989e9 4@news.individu al.net:
                    [color=blue]
                    >
                    > Could you specify which IE6 minor version? On what platform? IIRC
                    > have tested on XP and 2000.
                    >[color=green]
                    >> I am very pleased to have been able to
                    >> avoid using any tables at all so far, and would love to keep this
                    >> up. May I ask for suggestions on how to achieve a plain, boring
                    >> table-like gallery in CSS2, sans tables?[/color]
                    >
                    > how about:
                    > http://www.student.oulu.fi/~atlas/kuvat/
                    >
                    > Does it happen there too?
                    >
                    > (special interest as I did both sites)[/color]

                    Sorry, Lauri, it must have been some snafu when I downloaded the pages
                    to dissect in my HTML editor. when I visit the pages using IE6, they
                    are just fine. My sincere apologies.

                    --
                    Please do not press this button again


                    Comment

                    • Nik Coughin

                      #11
                      Re: Thumbnail gallery without tables?

                      Sid Ismail wrote:[color=blue]
                      > What in heaven's name is wrong with using tables for this application?
                      > Especially if you have text captions under/above each image.
                      >
                      > Tables is more universal than souped-up morse code.
                      >
                      > Sid[/color]

                      Tables aren't the best or even the simplest way to do it.

                      Far from "souped-up morse code", a simple CSS thumbnail gallery would look
                      like this:

                      CSS:

                      ..thumbnail{flo at: left;text-align: center;}

                      gallery:

                      <span class="thumbnai l><img src="thumb1.gif " alt ="thumb 1" /><br />Caption
                      For Thumb 1</span>
                      <span class="thumbnai l><img src="thumb2.gif " alt ="thumb 2" /><br />Caption
                      For Thumb 1</span>
                      etc.

                      That's a hell of a lot simpler than using tables. I should know, I
                      converted my table-based thumbnail gallery to a CSS-based one today.

                      Also, a table is going to be a fixed number of cells wide. This means that
                      your gallery is a fixed number of thumbs wide. The above will fit as many
                      thumbs as possible into the space available horizontally and wrap the rest
                      onto the next line. If you *want* it to be a fixed number of thumbs wide
                      then you wrap it in a div that only has room for that many thumbs.

                      If you want to apply styling to every thumb, you only have to add more
                      attributes to the CSS part.

                      CSS is a far superior way of doing thumbs than a table. That's what's wrong
                      with using tables for this application.

                      I don't agree with the argument that you shouldn't use tables for layout
                      because they are intended for tabular data. I think you shouldn't use
                      tables for layout because once you understand CSS it gives you much more
                      power, is much more flexible and is simpler to implement than a table. It's
                      simply a better way of doing things. You're limiting yourself if you use
                      tables.






                      Comment

                      • Andrew Urquhart

                        #12
                        Re: Thumbnail gallery without tables?

                        "Sid Ismail" <elsid@nospam.c om> wrote in message
                        news:l37l301amm f5jv979kpst4tuc uqde91fro@4ax.c om...[color=blue]
                        > On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.co m>
                        > wrote:
                        >
                        > : and one example of an
                        > : approach that worked was
                        > : http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
                        > : renders properly for me in my Gecko browsers, and iCapture shows it as
                        > : rendering properly in Safari, but in IE6, the thumbnails are lined up
                        > : vertically in a single column. I am very pleased to have been able to
                        > : avoid using any tables at all so far, and would love to keep this
                        > : up. May I ask for suggestions on how to achieve a plain, boring
                        > : table-like gallery in CSS2, sans tables?
                        >
                        >
                        > What in heaven's name is wrong with using tables for this application?
                        > Especially if you have text captions under/above each image.
                        >
                        > Tables is more universal than souped-up morse code.
                        >
                        > Sid[/color]

                        With either method (tables or divs) there could be a loss of semantic
                        information depending on the implementation. For example if captions are a
                        seperate table row then the connection between the image and the caption may
                        not work very well for browsers rendering the content in non-visual ways,
                        although obviously the title attribute would help here.

                        As an alternate method I built a photo gallery as a collection of nested
                        lists, although it doesn't have explicit captions it might make more
                        semantic sense, but I'm still trying to decide:
                        http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
                        alone]
                        --
                        Andrew Urquhart



                        Comment

                        • Els

                          #13
                          Re: Thumbnail gallery without tables?


                          Andrew Urquhart wrote:
                          [color=blue]
                          > "Sid Ismail" wrote:
                          >[color=green]
                          >>What in heaven's name is wrong with using tables for this application?
                          >>Especially if you have text captions under/above each image.
                          >>
                          >>Tables is more universal than souped-up morse code.[/color]
                          >
                          > With either method (tables or divs) there could be a loss of semantic
                          > information depending on the implementation. For example if captions are a
                          > seperate table row then the connection between the image and the caption may
                          > not work very well for browsers rendering the content in non-visual ways,
                          > although obviously the title attribute would help here.[/color]

                          What about my mix of div's and tables here:

                          (don't click the links, or you'll go into the site I
                          borrowed the pics from ;-) )
                          Would it lose semantic information? It's completely
                          flexible, only left aligned, while I'd wish it to be
                          centered, but that's ok.
                          [color=blue]
                          > As an alternate method I built a photo gallery as a collection of nested
                          > lists, although it doesn't have explicit captions it might make more
                          > semantic sense, but I'm still trying to decide:
                          > http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
                          > alone][/color]

                          Looks very nice, but why did you put all these widths and
                          heights in? The heights are all equal, and the widths don't
                          matter, as far as I can see. And you are saying 128kb of
                          markup, well, that might have to do with the length of your
                          uri's :-D

                          --
                          Els

                          Sonhos vem. Sonhos vão. O resto é imperfeito.
                          - Renato Russo -

                          Comment

                          • Els

                            #14
                            Re: Thumbnail gallery without tables?


                            Nik Coughin wrote:
                            [color=blue]
                            > Sid Ismail wrote:
                            >[color=green]
                            >>What in heaven's name is wrong with using tables for this application?
                            >>Especially if you have text captions under/above each image.
                            >>
                            >>Tables is more universal than souped-up morse code.[/color]
                            >
                            > Tables aren't the best or even the simplest way to do it.
                            >
                            > Far from "souped-up morse code", a simple CSS thumbnail gallery would look
                            > like this:
                            >
                            > CSS:
                            >
                            > .thumbnail{floa t: left;text-align: center;}
                            >
                            > gallery:
                            >
                            > <span class="thumbnai l><img src="thumb1.gif " alt ="thumb 1" /><br />Caption
                            > For Thumb 1</span>
                            > <span class="thumbnai l><img src="thumb2.gif " alt ="thumb 2" /><br />Caption
                            > For Thumb 1</span>
                            > etc.
                            >
                            > That's a hell of a lot simpler than using tables. I should know, I
                            > converted my table-based thumbnail gallery to a CSS-based one today.[/color]

                            Just out of curiosity on the subject, could you give a url
                            to that gallery you just converted?


                            --
                            Els

                            Sonhos vem. Sonhos vão. O resto é imperfeito.
                            - Renato Russo -

                            Comment

                            • Nik Coughin

                              #15
                              Re: Thumbnail gallery without tables?

                              Els wrote:[color=blue]
                              > Nik Coughin wrote:
                              >[color=green]
                              >> Sid Ismail wrote:
                              >>[color=darkred]
                              >>> What in heaven's name is wrong with using tables for this
                              >>> application? Especially if you have text captions under/above each
                              >>> image.
                              >>>
                              >>> Tables is more universal than souped-up morse code.[/color]
                              >>
                              >> Tables aren't the best or even the simplest way to do it.
                              >>
                              >> Far from "souped-up morse code", a simple CSS thumbnail gallery
                              >> would look like this:
                              >>
                              >> CSS:
                              >>
                              >> .thumbnail{floa t: left;text-align: center;}
                              >>
                              >> gallery:
                              >>
                              >> <span class="thumbnai l><img src="thumb1.gif " alt ="thumb 1" /><br
                              >> />Caption For Thumb 1</span>
                              >> <span class="thumbnai l><img src="thumb2.gif " alt ="thumb 2" /><br
                              >> />Caption For Thumb 1</span>
                              >> etc.
                              >>
                              >> That's a hell of a lot simpler than using tables. I should know, I
                              >> converted my table-based thumbnail gallery to a CSS-based one today.[/color]
                              >
                              > Just out of curiosity on the subject, could you give a url
                              > to that gallery you just converted?[/color]

                              Harder said than done.

                              I have no ftp access to my site at the moment.

                              You can see the original table based gallery at:



                              Click screenshot test.

                              You won't be able to see any source though, as it is an xml document being
                              translated by xsl and the thumb gallery table itself is generated by
                              JavaScript dynamically within the xsl. If you don't use IE 6 then I doubt
                              very much that it will work -- not something that I'm proud of, but it was
                              made last year before I started writing proper cross browser pages and using
                              CSS.

                              However, if you want to see what the html source looks like, copy the code
                              below and paste it into notepad (or any other plain text editor), then save
                              it as tables.html and open it in your browser. Below that, I have included
                              my code for doing it with CSS. Notice that the table version is fixed
                              width, the CSS version scales to your browser window.

                              <html>
                              <head>
                              <title>Galler y with tables</title>
                              </head>
                              <body>
                              Thumbnails<br/><br/>
                              <table cellpadding="8" border="0">
                              <tr>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior0.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior0.gi f" alt="0"
                              border="0" align="bottom"/><br/>Caption 1</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior1.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior1.gi f" alt="1"
                              border="0" align="bottom"/><br/>Caption 2</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior2.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior2.gi f" alt="2"
                              border="0" align="bottom"/><br/>Caption 3</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior3.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior3.gi f" alt="3"
                              border="0" align="bottom"/><br/>Caption 4</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior4.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior4.gi f" alt="4"
                              border="0" align="bottom"/><br/>Caption 5</a>
                              </center>
                              </td>
                              </tr>
                              <tr>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior5.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior5.gi f" alt="5"
                              border="0" align="bottom"/><br/>Caption 6</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior6.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior6.gi f" alt="6"
                              border="0" align="bottom"/><br/>Caption 7</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior7.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior7.gi f" alt="7"
                              border="0" align="bottom"/><br/>Caption 8</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior8.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior8.gi f" alt="8"
                              border="0" align="bottom"/><br/>Caption 9</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior9.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior9.gi f" alt="9"
                              border="0" align="bottom"/><br/>Caption 10</a>
                              </center>
                              </td>
                              </tr>
                              <tr>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior10.gif" ><img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior10.g if"
                              alt="10" border="0" align="bottom"/><br/>Caption 11</a>
                              </center>
                              </td>
                              <td>
                              <center>
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior11.gif" ><img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior11.g if"
                              alt="11" border="0" align="bottom"/><br/>Caption 12</a>
                              </center>
                              </td>
                              </tr>
                              </table>
                              </body>


                              <html>
                              <head>
                              <title>Galler y with CSS</title>
                              <style>.thumb{f loat:left;text-align:center;pa dding:8px;}</style>
                              </head>
                              <body>
                              Thumbnails<br/><br/>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior0.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior0.gi f" alt="0"
                              border="0" align="bottom"/><br/>Caption 1</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior1.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior1.gi f" alt="1"
                              border="0" align="bottom"/><br/>Caption 2</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior2.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior2.gi f" alt="2"
                              border="0" align="bottom"/><br/>Caption 3</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior3.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior3.gi f" alt="3"
                              border="0" align="bottom"/><br/>Caption 4</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior4.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior4.gi f" alt="4"
                              border="0" align="bottom"/><br/>Caption 5</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior5.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior5.gi f" alt="5"
                              border="0" align="bottom"/><br/>Caption 6</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior6.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior6.gi f" alt="6"
                              border="0" align="bottom"/><br/>Caption 7</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior7.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior7.gi f" alt="7"
                              border="0" align="bottom"/><br/>Caption 8</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior8.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior8.gi f" alt="8"
                              border="0" align="bottom"/><br/>Caption 9</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior9.gif"> <img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior9.gi f" alt="9"
                              border="0" align="bottom"/><br/>Caption 10</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior10.gif" ><img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior10.g if"
                              alt="10" border="0" align="bottom"/><br/>Caption 11</a>
                              </span>
                              <span class="thumb">
                              <a
                              href="http://homepages.ihug. co.nz/~nrkn/xml/Images/exterior11.gif" ><img
                              src="http://homepages.ihug. co.nz/~nrkn/xml/Images/tn_exterior11.g if"
                              alt="11" border="0" align="bottom"/><br/>Caption 12</a>
                              </span>
                              </body>


                              Comment

                              Working...