HtmlTableCell Server Control Declarative Syntax

Article
04/30/2007

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

<td|th
    EnableViewState="False|True"
    Id="string"
    Visible="False|True"
    OnDataBinding="OnDataBinding event handler"
    OnDisposed="OnDisposed event handler"
    OnInit="OnInit event handler"
    OnLoad="OnLoad event handler"
    OnPreRender="OnPreRender event handler"
    OnUnload="OnUnload event handler"
    runat="server"
    >
CellContent
</td|/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 individual 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 be 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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>HtmlTableCell Control</title>

   <script runat="server">
       Sub Button_Click(ByVal sender As Object, ByVal 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 id="Form1" runat="server">

      <h3>HtmlTableCell Example</h3>

      <table id="Table1" 
             style="border-width:1; border-color: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 id="Button1" type="button" 
             value="Change Table Contents"
             onserverclick="Button_Click" 
             runat="server"/>

   </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>HtmlTableCell Control</title>

   <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 id="Form1" runat="server">

      <h3>HtmlTableCell Example</h3>

      <table id="Table1" 
             style="border-width:1; border-color: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 id="Button1" type="button" 
             value="Change Table Contents"
             onserverclick="Button_Click" 
             runat="server"/>

   </form>

</body>
</html>

Share via

HtmlTableCell Server Control Declarative Syntax

Remarks

Example

See Also

Reference

Other Resources

Additional resources