Datalist Tasarımı Tablo Düzeni

Form Ekranı

<asp:DataList ID="DataList1" CssClass="anadatalist" runat="server"  RepeatColumns="6">

            <ItemTemplate>

                <div class="kutu">

        <div class="ickutu">

            <table class="anadatalist">

                <tr>

                    <td><!--'<%# Eval("FOTO") %>'-->

                        <asp:Image CssClass="" width="170px" height="170px" ID="Image1" runat="server" ImageUrl="~/images/urunler/5.jpg" />

                    </td>

                </tr>

                <tr>
                    <td><p></p>

                     </td>

                </tr>
                <tr>
                    <td>

                        <asp:Label ID="CODELabel" runat="server" Text='<%# Eval("CODE") %>' Font-Size="11pt" ForeColor="#FFCC66"></asp:Label>

                    </td>

                </tr>

                <tr class="urunadisatiri">

                    <td>

                        <asp:Label CssClass="urunadi" ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>'></asp:Label>                   

                    </td>

                </tr>

                <tr>
                    <td>

                        <asp:Label ID="PRICELabel" runat="server" Text='<%# Eval("PRICE") %>' Font-Bold="True" ForeColor="#FF3300"></asp:Label>

                    </td>

                </tr>
                <tr>
                   <td>
                        <asp:Button CssClass="btn btn-success" ID="Button1" runat="server" Text="Ürünü İncele" />
                    </td>

                </tr>

            </table>

        </div>

    </div>
            </ItemTemplate>

    <ItemStyle CssClass="dturunler" />

        </asp:DataList>

          <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:nmdbConnectionString %>" SelectCommand="SELECT * FROM [WSTOK]"></asp:SqlDataSource>

          <p>

Style Css

.kutu{

    height:330px;

    width:190px;

    margin:10px 10px 10px 10px;

    padding:1px 1px 1px 1px;

    background-color:silver;

    border-radius:5px;

}

.ickutu{

     padding:4px 2px 2px 2px;

    background-color:white;

     height:325px;

    width:188px;

    border-radius:5px;

}

.urunadi{

    font-size:12px;

    font-weight:100;

    font-family:AvenirNextLTPro,Helvetica,sans-serif;

   

}

.urunadisatiri{

     width:181px;

    height:60px;

  

}

.anadatalist{

    width:100%;

Ekran Görüntüsü