Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlTable
ASP.NET Syntax ASP.NET Syntax for HTML Controls
Defines a table control.
Declarative Syntax
<table id="accessID" runat="server"
align = left | center | right
bgcolor = "backgroundgcolor"
border = "borderwidthinpixels"
bordercolor = "bordercolor"
cellpadding = "spacingwithincellsinpixels"
cellspacing = "spacingbetweencellsinpixels"
height = "tableheight"
rows = "collectionofrows"
width = "tablewidth"
>
<tr>
<td>CellContent<td></tr>
<tr>
<td>CellContent<td></tr>
</table>
For information on the individual members of this class, see HtmlTable in the class library.
The HtmlTable control enables programming of the HTML <table> element.
The table control can be bound to a data source, and enables dynamically generating a table by adding HtmlTableRows to the table’s Rows collection, and HtmlTableCells to the row’s Cells collection. Content to a table cell can programmatically be added by adding controls to the cell’s Controls collection.
The following sample illustrates use of the HtmlTable control.
This sample shows how to dynamically generate a table based on the number of table rows and cells that the user decides on. The example also shows how to generate content in the table cells via a literal control containing the row and cell numbers.
- In the <
body> of the Web Forms page, define the HtmlForm to contain the HtmlTable itself, two HtmlSelect controls and one HtmlInputButton to post back the form.
<body>
<div class = "header"><h3>Dynamic HtmlTable Example</h3></div>
<div align = "center">
<form runat="server">
<p><table id="Table1" runat="server" cellpadding=5 border=1 />
</p>
<table>
<tr>
<td>Table rows:</td>
<td>
<select id="Select1" runat="server">
<option Value = "1">1</option>
<option Value = "2">2</option>
<option Value = "3">3</option>
<option Value = "4">4</option>
<option Value = "5">5</option>
</select></td>
<td>Table cells:</td>
<td>
<select id="Select2" runat="server">
<option Value = "1">1</option>
<option Value = "2">2</option>
<option Value = "3">3</option>
<option Value = "4">4</option>
<option Value = "5">5</option>
</select></td></tr>
</table>
<p><input type = "submit" runat="server" value="Generate Table">
</form>
</div>
</body>
</html>
- In the <
head> of the page, define the Page_Load handler.
- Each time the page is loaded, the code checks to see which values are selected and generates the rows, with every other row assigned a different background color.
- The table cells are then generated, as well as a literal control containing the row and cell numbers for each cell generated. This is done by adding the literal controls to the Page class instantiation’s Controls collection.
- The cells are then added to the row and the rows to the HtmlTable control that was declared on the page.
<head>
<script language="C#" runat="server">
void Page_Load ( Object sender, EventArgs e ) {
int row=0;
// get user input
int numrows=int.Parse ( Select1.Value );
int numcells=int.Parse ( Select2.Value );
//generate rows and cells
for ( int j=0; j<numrows; j++ ) {
HtmlTableRow r=new HtmlTableRow ( );
// set bgcolor on alternating rows
if ( row%2 == 1 )
r.BgColor = "Gainsboro";
row++;
for ( int i=0; i<numcells; i++ ) {
HtmlTableCell c=new HtmlTableCell ( );
// add cell content thru a literal control
c.Controls.Add ( new LiteralControl ( "row " +
j.ToString ( ) + ", cell " + i.ToString ( ) ) );
r.Cells.Add ( c );
}
Table1.Rows.Add ( r );
}
}
</script>
</head>
HtmlTable Class HtmlTableCell Control HtmlTableRow Control HtmlForm Control Web Forms Events and Handlers