Table in ASP.NET

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.

1. Font-Size
2. Width
3. Font-Names
4. BackColor
5. BorderColor
6. BorderWidth
7. ForeColor
8. CellPadding
9. CellSpacing
10. 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.

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

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

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.

Now add this row to the 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

Add Table Cell
TableCell tag adds a new cell in ASP.NET row of a table.

Syntax

Now add Cell to the row created before, here we have added three cells which will create three columns in the row.

Complete Code of ASP.NET Table

we changed the height and width of the table to 97px and 854px to make it clearly visible.

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. Create an instance/object of TableRow.
   
   TableRow row = new TableRow();

   1	TableRow row = new TableRow();

2. Create an instance/object of TableCell.
   
   TableCell cell1 = new TableCell();

   1	TableCell cell1 = new TableCell();

3. Set the text for the TableCell instance/object.
   
   cell1.Text = "2";

   1	cell1.Text = "2";

4. Add the cell to the row.
   
   row.Cells.Add(cell1);

   1	row.Cells.Add(cell1);

5. Add Row to the table.
   
   Table1.Rows.Add(row);

   1	Table1.Rows.Add(row);

6. Set the foreground and background color of the row by using System.Drawing.Color.<Color Name>
   
   row.ForeColor = System.Drawing.Color.White; row.BackColor = System.Drawing.Color.Black;

   1 2	row.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)

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.