ASP Table Server Control

This control is very common in all web pages because by default web page takes <table> tag for layout of your web page. The typical construction of the table server control looks like below code.



In the above figure you can see two headers (“First Name” and “Last Name”). We can use any header here. We have three tags to use in asp table tag

<asp:TableFooterRow></asp:TableFooterRow>
<asp:TableHeaderRow></asp:TableHeaderRow>
<asp:TableRow></asp:TableRow>

You can copy the code below to get the above webpage design

.aspx

<asp:Table ID="Table1" runat="server" Caption="Customer Details">
<asp:TableRow ID="trheader" BackColor="Silver" runat="server" ForeColor="Black" Font-Bold="true">
<asp:TableHeaderCell>First Name</asp:TableHeaderCell>
<asp:TableHeaderCell>Last Name</asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>Emmaneale</asp:TableCell>
<asp:TableCell>Mendu</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>Swetha</asp:TableCell>
<asp:TableCell>Patcha</asp:TableCell>
</asp:TableRow>
</asp:Table>

That’s it a basic asp table design completed.


Dynamically adding rows to the table:





I coded according to get same look as our first image. Just add a table tag in .aspx page and add server side code in page load area.

.aspx

<asp:Table ID="Table2" runat="server">
</asp:Table>

.cs

protected void Page_Load(object sender, EventArgs e)
{
Table2.Caption = "Customer Details";

TableRow tr = new TableRow();
TableCell th1 = new TableCell();
TableCell th2 = new TableCell();
tr.BackColor = Color.Silver;
th1.Text = "First Name";
th2.Text = "Second Name";
tr.Cells.Add(th1);
tr.Cells.Add(th2);
Table2.Rows.Add(tr);

TableRow tr1 = new TableRow();
TableCell tc1 = new TableCell();
TableCell tc2 = new TableCell();
tc1.Text = "Emmaneale";
tc2.Text = "Mendu";
tr1.Cells.Add(tc1);
tr1.Cells.Add(tc2);
Table2.Rows.Add(tr1);

TableRow tr2 = new TableRow();
TableCell tc3 = new TableCell();
TableCell tc4 = new TableCell();
tc3.Text = "Swetha";
tc4.Text = "Patcha";
tr2.Cells.Add(tc3);
tr2.Cells.Add(tc4);
Table2.Rows.Add(tr2);
}

As of now if you try this example you should come to know a basic design and how to dynamically add rows in a table.

That’s it a small post on Table Server control Thanks for Reading.

Yours
Emmaneale Mendu
Web Developer