The Table Web server control allows you to build an table in conjunction with the TableCell control and the TableRow control. The following sample illustrates using the Table control in ASP.NET.
Design View
As you can see here we can build up a table programmatically by adding TableRows to the Rows collection of the table, and TableCells to the Cells collection of the row. You can add content to a table cell programmatically by adding controls to the Controls collection of the cell.
Properties of Table control
You can set the properties of the table like Backcolor, Borderstyle, Fontsize, Forecolor etc., with the help of Property Window in Design View.
Code
<html>
<head>
<title>Example</title>
<script language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
Dim numrows As Integer
Dim numcells As Integer
Dim i As Integer
Dim j As Integer
Dim r As TableRow
Dim c As TableCell
' Generate rows and cells
numrows = CInt(DropDown1.SelectedItem.Value)
numcells = CInt(DropDown2.SelectedItem.Value)
For j = 0 To numrows-1
r = new TableRow()
For i = 0 To numcells-1
c.Controls.Add(new LiteralControl("row " & j & ", cell " & i))
r.Cells.Add(c)
Next i
Table1.Rows.Add(r)
Next j
End Sub
</script>
</head>
<body>
<h3><font face="Verdana" style="font-family: Verdana; font-size: small;">ASP.NET Table
Control</font></h3>
<form id="Form1" runat="server">
<asp:Table id="Table1" Font-Names="Verdana" Font-Size="10pt" CellPadding=5
CellSpacing=0 BorderColor="black" BorderWidth="1px" Gridlines="Both"
runat="server" BackColor="White" BorderStyle="Solid" ForeColor="#990033"
Font-Bold="True"/>
<p style="font-family: Verdana; font-size: small;">
Insert rows in Table:
<asp:DropDownList id="DropDown1" runat="server">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<br />
<br>
Insert cells in Table:
<asp:DropDownList id="DropDown2" runat="server">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<p>
<asp:button ID="Button1" Text="Create Table" runat="server" Font-Bold="True"
Font-Names="Verdana" Font-Size="Small"/>
</form>
</body>
</html>
Table Output
Now if you want to change the background of the table, choose an image and give Url of that image to the table property BackImgUrl in the Property Window. The table looks like as below:
Table With Backgroun Image
I hope that I am able to convey the concept of ASP.NET Table control.