Share via

HtmlTableCell Control

  • Article

Creates a server-side control that maps to the <td> and <th> HTML elements and allows you manipulate a cell in a table.

<td or th id="programmaticID"
          align="alignmentofcontentincell"
          bgcolor="bgcolor"
          bordercolor="bordercolor"
          colspan="#ofcolscellspans"
          height="cellheight"
          nowrap="True | False"
          rowspan="#ofrowscellspans"
          valign="vertalignmentofcellcontent"
          width="cellwidth">
CellContent
</td or /th>

Remarks

Use the HtmlTableCell class to program against the <td> and <th> HTML elements. A <td> element represents a data cell, while the <th> element represents a heading cell. Note that the contents of a <th> cell are always bold and centered.

The HtmlTableCell class allows you to control the appearance of each indivual cell. You can control the background color, border color, height, and width of the cell by setting the BgColor, BorderColor, Height, and Width properties respectively.

Note   All cells in the same row share the same height. The tallest cell in a row determines the height of all cells in the row.

The horizontal and vertical alignment of the contents of the cell are controlled by setting the Align and VAlign properties, respectively. You can also specify whether the text automatically continues on the next line of the cell by setting the NoWrap property.

The HtmlTableCell class allows you to span cells by setting the ColSpan and RowSpan properties. The ColSpan property lets you control how many columns a cell occupies, while the rowspan property specifies the number of rows a cell occupies.

Note   When spanning cells, be sure that each row in the table is the same length. Also make sure that each column is the same height. Otherwise, the table might not display as expected.

Example

The following example demonstrates how use an HtmlTableCell object to modify the contents of a cell in the HtmlTable control.

<%@ Page Language="VB" AutoEventWireup="True" %>

<html>
<head>

   <script runat="server">

      Sub Button_Click(sender As Object, e As EventArgs) 
      
         Dim i As Integer
         Dim j As Integer

         ' Iterate through the rows of the table.
         For i=0 To Table1.Rows.Count - 1

            ' Iterate through the cells of a row.       
            For j=0 To Table1.Rows(i).Cells.Count - 1
            
               ' Change the inner HTML of the cell.
               Table1.Rows(i).Cells(j).InnerHtml = "Row " & i.ToString() _
                                                   & ", Column " & _
                                                   j.ToString() 
            Next j

         Next i

      End Sub

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTableCell Example</h3>

      <table id="Table1" 
             Border="1" 
             BorderColor="black" 
             runat="server">

         <tr>
            <td>
               Cell 1
            </td>
            <td>
               Cell 2
            </td>
         </tr>
         <tr>
            <td>
               Cell 3
            </td>
            <td>
               Cell 4
            </td>
         </tr>

      </table>


      <br><br>
  
      <input type="button" 
             value="Change Table Contents"
             OnServerClick = "Button_Click" 
             runat="server"/>

   </form>

</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>

<html>
<head>

   <script runat="server">

      void Button_Click(Object sender, EventArgs e) 
      {

         // Iterate through the rows of the table.
         for (int i=0; i<=Table1.Rows.Count - 1; i++)
         {

            // Iterate through the cells of a row.
            for (int j=0; j<=Table1.Rows[i].Cells.Count - 1; j++)
            {
               // Change the inner HTML of the cell.
               Table1.Rows[i].Cells[j].InnerHtml = "Row " + i.ToString() + 
                                                   ", Column " + 
                                                   j.ToString(); 
            }

         }

      }

   </script>

</head>
<body>

   <form runat="server">

      <h3>HtmlTableCell Example</h3>

      <table id="Table1" 
             Border="1" 
             BorderColor="black" 
             runat="server">

         <tr>
            <td>
               Cell 1
            </td>
            <td>
               Cell 2
            </td>
         </tr>
         <tr>
            <td>
               Cell 3
            </td>
            <td>
               Cell 4
            </td>
         </tr>

      </table>


      <br><br>
  
      <input type="button" 
             value="Change Table Contents"
             OnServerClick = "Button_Click" 
             runat="server"/>

   </form>

</body>
</html>

See Also

ASP.NET Syntax for HTML Controls | HtmlTableCell Class | HtmlTable Class | System.Web.UI.HtmlControls Namespace