Customized Datalist with columns in MVC 3 RAZOR

Default Datlist control in ( nopCommerce ) MVC 3 Razor :

the default datalist in MVC 3 Razor:

<div class="home-page-category-grid">
        @(Html.DataList<CategoryModel>(Model, 3,
                @<div class="item-box">
                    <div class="category-item">
                        <h2 class="title">
                            <a href="@Url.RouteUrl("Category", new { categoryId = item.Id,
SeName=item.SeName })" title="@item.PictureModel.Title">
                                @item.Name</a>
                        </h2>
                    </div>
                </div>
            ))
    </div>

This can be customize by using foreach loop by placing the design in a html table.

@{
    //enters inside if conduction when model has categories greater than zero
    if (Model.Count > 0)
    {
        // initializing loop count
        int i = 0;
        int j=0;
        int colsize = 3;// Assigning columns per table
      
        @:<div style="margin-bottom: 15%;">
        @:<div class="home-page-category-grid">
      
        //gets all the Model  data into the _categories variable
        foreach (var _categories in Model)
        {
            if (i % colsize == 0)
            {
               @::<table>
               @:<tr>
             
            }
           
              //design that displays  categories items
           
            <td>
                <div class="item-box">
                        <div class="category-item">
                            <div class="picture">
                                <a href="@Url.RouteUrl("Category", new { categoryId = _categories.Id, SeName = _categories.SeName })" title="@_categories.PictureModel.Title">
                                    <img class="category-display-picture" alt="@_categories.PictureModel.AlternateText" src="@_categories.PictureModel.ImageUrl"
                                        title="@_categories.PictureModel.Title" /></a>
                                <div class="picture-title">
                                    <a href="@Url.RouteUrl("Category", new { categoryId = _categories.Id, SeName = _categories.SeName })" title="@_categories.PictureModel.Title">
                                        @_categories.Name</a>
                                </div>
                            </div>
                           
                        </div>
                </div>
            </td>
   
            //doesnot apply blue line image for the last td according to column size
            if (i != colsize - 1)
            {
             <td>
               <img src="../../Content/Images/etch/border.jpg"  alt="" />
             </td>
            }

              i++;//increaments loop count           
              j++//increaments loop count

            //enters inside when the loop count and column size equals.
            // for applying the closing tr and table tags and again reset i count to zero
            if (i == colsize || j== Model.Count-1)
            {
                @:</tr>
               @:</table>
               i = 0;// resets the count when equals to the column size
            }

         

        }
       
        @:</div>
        @:</div>
       
    }
   
}