Sintaxis declarativa del control de servidor HtmlTableCell
[Esta documentación se proporciona solo para fines preliminares y está sujeta a cambios en versiones posteriores. Se incluye temas en blanco como marcadores].
Crea un control de servidor que se asigna a los elementos HTML <td> y <th> y permite manipular la celda de una tabla.
<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>
Comentarios
Utilice la clase HtmlTableCell para programar con los elementos HTML <td> y <th>. Un elemento <td> representa una celda de datos, mientras que el elemento <th> representa una celda de título. Tenga en cuenta que el contenido de una celda <th> siempre aparece en negrita y centrado.
La clase HtmlTableCell permite controlar la apariencia de cada celda. Se puede controlar el color de fondo, el color del borde, así como el alto y el ancho de la celda mediante las propiedades BgColor, BorderColor, Height y Width, respectivamente.
Nota
Todas las celdas de una fila comparten el mismo alto.La celda más alta de una fila determina el alto de todas las celdas de una fila.
La alineación horizontal y vertical del contenido de la celda se controla estableciendo las propiedades Align y VAlign, respectivamente. También se puede especificar si el texto continúa automáticamente en la siguiente línea de la celda mediante la propiedad NoWrap.
La clase HtmlTableCell permite extender las celdas estableciendo las propiedades ColSpan y RowSpan. La propiedad ColSpan permite controlar el número de columnas que ocupa una celda, mientras que la propiedad RowSpan especifica el número de filas que ocupa una celda.
Nota
Al ajustar el tamaño de las celdas, compruebe que cada fila de la tabla tenga la misma longitud.Asegúrese también de que las columnas tengan el mismo alto.En caso contrario, puede ocurrir que la tabla no tenga el aspecto esperado.
Ejemplo
En el siguiente ejemplo se muestra cómo utilizar un objeto HtmlTableCell para modificar el contenido de una celda en el control HtmlTable.
<%@ 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>