ASP.NET 4.0 - Dynamic Table Generation and Dynamic Application of Css Styles

I have the following Helper class to generate a <ASP:Table> control dynamically.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Test
{
    public class TableDisplay10X2
    {
        # region public properties

        # region Styles

        public string TableStyle { get; set; }
        public string HeaderStyle { get; set; }
        public string CommonHeaderColumnStyle { get; set; }
        public string CommonRowStyle { get; set; }
        public string CommonColumnStyle { get; set; }
        public string[] HeaderColumnStyles { get; set; }
        public string[] RowStyles { get; set; }
        public string[,] ColumnStyles { get; set; }

        # endregion Styles

        public IList<RowInfo> TableRows { get; set; }

        # endregion

        public TableDisplay10X2()
        {
            HeaderColumnStyles = new string[2];
            RowStyles = new string[10];
            ColumnStyles = new string[10, 2];
            TableRows = new List<RowInfo>();
        }       

        public Table Create(Panel panel)
        {
            var table = new Table();
            panel.Controls.Add(table);
            table.CssClass = TableStyle;

            // Add Header
            var headRow = new TableHeaderRow();
            var leftHeaderColumn = new TableHeaderCell();
            var rightHeaderColumn = new TableHeaderCell();
            headRow.Cells.Add(leftHeaderColumn);
            headRow.Cells.Add(rightHeaderColumn);
            table.Rows.Add(headRow);
            headRow.CssClass = HeaderStyle;            
            leftHeaderColumn.CssClass = (HeaderColumnStyles[0] != null) ? HeaderColumnStyles[0] : CommonHeaderColumnStyle;            
            rightHeaderColumn.CssClass = (HeaderColumnStyles[1] != null) ? HeaderColumnStyles[1] : CommonHeaderColumnStyle;            

            for (int count = 0; count < TableRows.Count; count++)
            {
                if (TableRows[count] != null)
                {
                    TableRow tr = new TableRow();
                    TableCell leftCell = new TableCell();
                    TableCell rightCell = new TableCell();
                    tr.Cells.Add(leftCell);
                    tr.Cells.Add(rightCell);
                    table.Rows.Add(tr);

                    leftCell.Text = TableRows[count].LeftColumn;
                    rightCell.Text = TableRows[count].RightColumn;
                    tr.CssClass = (RowStyles[count] != null) ? RowStyles[count] : CommonRowStyle;
                    leftCell.CssClass = (ColumnStyles[count, 0] != null) ? ColumnStyles[count, 0] : CommonColumnStyle;                                     
                    rightCell.CssClass = (ColumnStyles[count, 1] != null) ? ColumnStyles[count, 1] : CommonColumnStyle;
                }
            }


            return table;
        }
    }

    public class RowInfo
    {
        public string LeftColumn { get; set; }
        public string RightColumn { get; set; }
    }
}

and Creating the table control using the following code

var  presidentTable = new TableDisplay10X2();
            presidentTable.TableStyle = "Width:400px; Border: 1px solid #cccccc; margin:10px font-family:Arial; font-size:24px";
            presidentTable.TableRows.Add(new RowInfo { LeftColumn = "President", RightColumn= "Mr D R" });
            presidentTable.TableRows.Add(new RowInfo { LeftColumn = "Address", RightColumn = "Add 1" });
            presidentTable.TableRows.Add(new RowInfo { RightColumn = "Add 2" });
            presidentTable.TableRows.Add(new RowInfo { RightColumn = "Add 3" });
            presidentTable.TableRows.Add(new RowInfo { RightColumn = "Add 4" });
            presidentTable.Create(panelBoardMembers);

The table is getting created but the style is not getting applied. What is the issue?

Because of you are setting the class attribute for table, by the css-styles! While you should set it by a css-class-name. See:

table.CssClass = TableStyle;

that will be rendered as:

<table class="Width:400px; Border: 1px solid #cccccc; margin:10px font-family:Arial; font-size:24px">

Instead, you can use a CssStyleCollection property for helper-class (for example name it CssStyles) or use the following code:

// table.CssClass = TableStyle; YOU SHOULD REMOVE THIS LINE!!!
table.Attributes.Add("style", TableStyle);

that will be rendered as:

<table style="Width:400px; Border: 1px solid #cccccc; margin:10px font-family:Arial; font-size:24px">

This will resolve your problem. Regards.