How do you show x items per row in a repeater?

Question

Anyone have any clue on how to show 4 items going horizontal with a repeater? A repeater shows items going down by default. Here is my test repeater code so far:

<table border=0 cellpadding=0 cellspacing=0 align="center" width="800px;>
    <tr>
        <asp:Repeater ID="rptTest" runat="server">
            <ItemTemplate>
                    <td>
                        <h3><a href="<%#GetItemLink((Item)Container.DataItem) %>"><%#((WebMenuItem)Container.DataItem).Name %></a></h3>
                        <div>
                            <a href="<%#GetUrl((Item)Container.DataItem) %>">
                                <img src="<%#GetImage((Item)Container.DataItem) %>" alt="<%#GetAltText((Item)Container.DataItem) %>" />
                            </a>
                        </div>
                    </td>
            </ItemTemplate>
        </asp:Repeater>
    </tr>
</table>

Answer 1

<table>
    <asp:Repeater id="rptTest" runat="server">
        <ItemTemplate>
            <%# (Container.ItemIndex + 4) % 4 == 0 ? "<tr>" : string.Empty %>
                <td>
                    ... cell contents omitted ...
                </td>
            <%# (Container.ItemIndex + 4) % 4 == 3 ? "</tr>" : string.Empty %>
        </ItemTemplate>
    </asp:Repeater>
</table>

Long live the humble repeater!

Answer 2

Modifying Nick's suggestion I was able to use to make a 5 horizontal x n vertical Image Grid. Thanks Nick!

<asp:Repeater ID="colorsList" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
    </HeaderTemplate>
    <ItemTemplate>
        <%# (Container.ItemIndex != 0 && Container.ItemIndex % 5 == 0) ? @"</tr><tr>" : string.Empty %>
        <td>
        <div><img src="<%#ColorThumbnailImage((string)DataBinder.Eval(Container.DataItem, "COLOR_SQUARE_IMAGE")) %>" /></div>
        <div><%# DataBinder.Eval(Container.DataItem, "COLOR_NAME") %></div>
        </td>
    </ItemTemplate>
    <FooterTemplate>
        </tr></table>
    </FooterTemplate>
    </asp:Repeater>

And here's ColorThumbnailImage

 protected string ColorThumbnailImage(string fileName)
{
    return Request.ApplicationPath + MySports.System.Configuration.ColorSquareImageLocation + fileName;
}

Answer 3

Scott Guthrie provided an example of how to do this with a ListView control in the following article. He uses the control to render an unordered list and uses CSS to control the layout.

Answer 4

Using DataList control with RepeatColumns property might be simpler :

DataList1.RepeatColumns = 4;
DataList1.RepeatDirection = RepeatDirection.Horizontal;