Introduction to table in ASP.NET
ASP.NET uses Web Server Control to display rows and columns at runtime on the server. You can add rows and columns as well as cells in your table at run time. .NET framework uses table class to display table in Web Server Control. In this tutorial, we will learn how to create a table in ASP.NET along with adding rows to ASP.NET table.
Properties of table in ASP.NET
In ASP.NET, there are some properties you can add to your ASP.NET table to design a table.
- Font-Size
- Width
- Font-Names
- BackColor
- BorderColor
- BorderWidth
- ForeColor
- CellPadding
- CellSpacing
- Font-Bold
Font-Size
You can set the font size of the element by using this property. Font-Size is an integer property.
Width
You can set the width of the element by using this property. Width is an integer property.
Font-Names
You can set up the font family of the text to be displayed inside the certain block using this property. You can set alternate fonts as if some fonts are not supported in the browser.
BackColor
You can change the background color of the element by using this property. You can set this property by changing the value to any color name i.e. “Black” or “White” etc.
BorderColor
You can change the border color of the element by using this property. You can set this property by changing the value to any color name i.e. “Black” or “White” etc.
BorderWidth
You can set the border width of the element by using this property. BorderWidth is an integer property.
ForeColor
You can change the foreground color of the element by using this property. You can set this property by changing the value to any color name i.e. “Black” or “Blue” etc.
CellPadding
You can add cell padding in the table using this property. CellPadding is the inner gap of the cells from all the sides. CellPadding is an integer property.
CellSpacing
You can add some space between the cells of your ASP.NET table by using this property. CellSpacing is the space between two cells. CellSpacing is an integer property.
Font-Bold
You can bold the fonts of the element using this property by setting it to “true”.
Note: You can change these properties in the Design view properties as well.
Creating a table and adding rows and cells to it
Create an empty web project, and add a new WebForm in Visual Studio.
1. Create a Table in ASP.NET
Drag and Drop Table from the Toolbox in the Design view of your WebForm, when you resize the table in the Design view, it will automatically add some rows according to the height and length of the resized table.

Or
You can add a table to the Source of your WebForm.
1 2 |
<asp:Table ID="Table1" runat="server" Height="193px" Width="931px"> </asp:Table> |
2. Add table header in ASP.NET
In the table you created, add a table header by TableHeaderRow tag and add cells to the table header by using TableHeaderCell tag.
TableHeaderRow
TableHeaderRow add the header of the table in ASP.NET.
Syntax
1 2 3 |
<asp:TableHeaderRow runat="server" > </asp:TableHeaderRow> |
TableHeaderCell
TableHeaderCell add a cell in the header row of the table in ASP.NET, there must be a row added before if you want to add a cell.
Syntax
1 2 3 |
<asp:TableHeaderCell> Text to be Displayed </asp:TableHeaderCell> |
When you create a new table header row, you can add one or more cells within TableHeaderRow Tags of ASP.NET. Here we created three header cells to make this concept clear.
1 2 3 4 5 6 7 |
<asp:TableHeaderRow runat="server" ForeColor="White" BackColor="Black" Font-Bold="true" > <asp:TableHeaderCell>Id</asp:TableHeaderCell> <asp:TableHeaderCell>Name</asp:TableHeaderCell> <asp:TableHeaderCell>Value</asp:TableHeaderCell> </asp:TableHeaderRow> |
Now add this row to the table
1 2 3 4 5 6 7 |
<asp:Table ID="Table1" runat="server" Height="193px" Width="931px"> <asp:TableHeaderRow runat="server" ForeColor="White" BackColor="Black" > <asp:TableHeaderCell>Id</asp:TableHeaderCell> <asp:TableHeaderCell>Name</asp:TableHeaderCell> <asp:TableHeaderCell>Value</asp:TableHeaderCell> </asp:TableHeaderRow> </asp:Table> |
3. Add Rows and Cells in ASP.NET table
TableRow and TableCell tags are used to add row and cell in the table. Each TableRow has an id to identify it from the table.
Add Table Row
TableRow tag adds a new row in ASP.NET table which contains some cells.
Syntax
1 2 3 |
<asp:TableRow ID="TableRow1" runat="server" > </asp:TableRow> |
Add Table Cell
TableCell tag adds a new cell in ASP.NET row of a table.
Syntax
1 2 3 |
<asp:TableCell> Text to be Displayed </asp:TableCell> |
Now add Cell to the row created before, here we have added three cells which will create three columns in the row.
1 2 3 4 5 |
<asp:TableRow ID="TableRow1" runat="server" BackColor="Black" > <asp:TableCell>1</asp:TableCell> <asp:TableCell>Black</asp:TableCell> <asp:TableCell>#000000</asp:TableCell> </asp:TableRow> |
Complete Code of ASP.NET Table
we changed the height and width of the table to 97px and 854px to make it clearly visible.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<form id="form1" runat="server"> <asp:Table ID="Table1" runat="server" Height="97px" Width="854px"> <asp:TableHeaderRow runat="server" ForeColor="White" BackColor="Black" > <asp:TableHeaderCell>Serial</asp:TableHeaderCell> <asp:TableHeaderCell>Name</asp:TableHeaderCell> <asp:TableHeaderCell>Value</asp:TableHeaderCell> </asp:TableHeaderRow> <asp:TableRow ID="TableRow1" runat="server" BackColor="Black" ForeColor="White" > <asp:TableCell>1</asp:TableCell> <asp:TableCell>Black</asp:TableCell> <asp:TableCell>#000000</asp:TableCell> </asp:TableRow> </asp:Table> </form> |
Now your table will look like

Dynamically add rows and cells in ASP.NET table
If you want to add rows and cells dynamically at runtime. You should import WebControls from Web UI in your cs file.
1 |
using System.Web.UI.WebControls; |
- Create an instance/object of TableRow.
1TableRow row = new TableRow(); - Create an instance/object of TableCell.
1TableCell cell1 = new TableCell(); - Set the text for the TableCell instance/object.
1cell1.Text = "2"; - Add the cell to the row.
1row.Cells.Add(cell1); - Add Row to the table.
1Table1.Rows.Add(row); - Set the foreground and background color of the row by using System.Drawing.Color.<Color Name>
12row.ForeColor = System.Drawing.Color.White;row.BackColor = System.Drawing.Color.Black;
Complete Code for dynamically adding a new row to a table (We added three cells in the row)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
using System; using System.Web.UI.WebControls; namespace TableTutorial { public partial class TableForm : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { TableRow row = new TableRow(); row.ForeColor = System.Drawing.Color.White; row.BackColor = System.Drawing.Color.Black; TableCell cell1 = new TableCell(); TableCell cell2 = new TableCell(); TableCell cell3 = new TableCell(); cell1.Text = "2"; cell2.Text = "White"; cell3.Text = "#ffffff"; row.Cells.Add(cell1); row.Cells.Add(cell2); row.Cells.Add(cell3); Table1.Rows.Add(row); } } } |
Now your table will look like

Download the source code of dynamically added row in ASP.NET table .
Alternate link of the dynamic table in ASP.net.