Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

HtmlTableCell Server Control Declarative Syntax

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>

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.

NoteNote

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.

NoteNote

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.

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

<%@ 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>

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.