Compartir a través de

Visión general de tablas

Table es un elemento de nivel de bloque que admite la presentación basada en cuadrícula del contenido del documento flow. La flexibilidad de este elemento hace que sea muy útil, pero también hace que sea más complicado comprender y usar correctamente.

En este tema se incluyen las siguientes secciones.

Conceptos básicos de la tabla

¿En qué se diferencia la tabla de la cuadrícula?

Table y Grid comparten algunas funciones comunes, pero cada una es más adecuada para diferentes escenarios. Table está diseñado para su uso dentro del contenido fluido (consulte Información general sobre documentos de flujo para obtener más información sobre el contenido fluido). Las cuadrículas se usan mejor dentro de formularios (básicamente en cualquier lugar fuera del contenido de flujo). Dentro de FlowDocument, Table admite comportamientos de contenido dinámico como la paginación, el flujo de columnas y la selección de contenido, mientras que Grid no. Por Grid otro lado, se usa mejor fuera de una FlowDocument por muchas razones, incluyendo que Grid agrega elementos basados en un índice de fila y columna, mientras que Table no lo hace. El Grid elemento permite el apilamiento de contenido secundario, permitiendo que más de un elemento exista dentro de una única "celda". Table no admite el apilamiento. Los elementos secundarios de un Grid pueden ser posicionados absolutamente en relación con el área de sus límites de "celda". Table no admite esta característica. Por último, un Grid requiere menos recursos que un Table, por lo que considere la posibilidad de usar un Grid para mejorar el rendimiento.

Estructura básica de tabla

Table proporciona una presentación basada en cuadrícula que consta de columnas (representadas por TableColumn elementos) y filas (representadas por TableRow elementos). TableColumn los elementos no hospedan contenido; simplemente definen las columnas y las características de las columnas. TableRow los elementos deben hospedarse en un TableRowGroup elemento , que define una agrupación de filas para la tabla. TableCell los elementos, que contienen el contenido real que va a presentar la tabla, deben hospedarse en un TableRow elemento . TableCell solo puede contener elementos que derivan de Block. Los elementos secundarios válidos para un TableCell incluyen.

Nota:

TableCell puede que los elementos no hospeden directamente el contenido de texto. Para obtener más información sobre las reglas de contención para elementos de contenido de flujo como TableCell, vea Información general del documento de flujo.

Nota:

Table es similar al Grid elemento, pero tiene más funcionalidades y, por lo tanto, requiere una mayor sobrecarga de recursos.

En el ejemplo siguiente se define una tabla simple de 2 x 3 con XAML.

<!-- 
  Table is a Block element, and as such must be hosted in a container
  for Block elements.  FlowDocument provides such a container. 
-->
<FlowDocument>
  <Table>
    <!-- 
      This table has 3 columns, each described by a TableColumn 
      element nested in a Table.Columns collection element. 
    -->
    <Table.Columns>
      <TableColumn />
      <TableColumn />
      <TableColumn />
    </Table.Columns>
    <!-- 
      This table includes a single TableRowGroup which hosts 2 rows,
      each described by a TableRow element.
    -->
    <TableRowGroup>
      <!--
        Each of the 2 TableRow elements hosts 3 cells, described by
        TableCell elements.
      -->
      <TableRow>
        <TableCell>
          <!-- 
            TableCell elements may only host elements derived from Block.
            In this example, Paragaph elements serve as the ultimate content
            containers for the cells in this table.
          -->
          <Paragraph>Cell at Row 1 Column 1</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 1 Column 2</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 1 Column 3</Paragraph>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>
          <Paragraph>Cell at Row 2 Column 1</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 2 Column 2</Paragraph>
        </TableCell>
        <TableCell>
          <Paragraph>Cell at Row 2 Column 3</Paragraph>
        </TableCell>
      </TableRow>
    </TableRowGroup>
  </Table>
</FlowDocument>

En la ilustración siguiente se muestra cómo se representa este ejemplo.

Captura de pantalla que muestra cómo se representa una tabla básica.

Contención de tablas

Table deriva del elemento Block y se adhiere a las reglas comunes para elementos de nivel Block. Un Table elemento puede estar contenido por cualquiera de los siguientes elementos:

Agrupaciones de filas

El TableRowGroup elemento proporciona una manera de agrupar arbitrariamente filas dentro de una tabla; cada fila de una tabla debe pertenecer a una agrupación de filas. Las filas de un grupo de filas suelen compartir una intención común y pueden estilizarse como un grupo. Un uso común para las agrupaciones de filas es separar las filas de propósito especial, como una fila de título, encabezado y pie de página, del contenido principal contenido contenido en la tabla.

En el ejemplo siguiente se usa XAML para definir una tabla con filas de encabezado y pie de página con estilo.

<Table>
  <Table.Resources>
    <!-- Style for header/footer rows. -->
    <Style x:Key="headerFooterRowStyle" TargetType="{x:Type TableRowGroup}">
      <Setter Property="FontWeight" Value="DemiBold"/>
      <Setter Property="FontSize" Value="16"/>
      <Setter Property="Background" Value="LightGray"/>
    </Style>

    <!-- Style for data rows. -->
    <Style x:Key="dataRowStyle" TargetType="{x:Type TableRowGroup}">
      <Setter Property="FontSize" Value="12"/>
      <Setter Property="FontStyle" Value="Italic"/>
    </Style>
  </Table.Resources>
  
  <Table.Columns>
    <TableColumn/> <TableColumn/> <TableColumn/> <TableColumn/>
  </Table.Columns>

  <!-- This TableRowGroup hosts a header row for the table. -->
  <TableRowGroup Style="{StaticResource headerFooterRowStyle}">
    <TableRow>
      <TableCell/>
      <TableCell><Paragraph>Gizmos</Paragraph></TableCell>
      <TableCell><Paragraph>Thingamajigs</Paragraph></TableCell>
      <TableCell><Paragraph>Doohickies</Paragraph></TableCell>
    </TableRow>
  </TableRowGroup>
  
  <!-- This TableRowGroup hosts the main data rows for the table. -->
  <TableRowGroup Style="{StaticResource dataRowStyle}">
    <TableRow>
      <TableCell><Paragraph Foreground="Blue">Blue</Paragraph></TableCell>
      <TableCell><Paragraph>1</Paragraph></TableCell>
      <TableCell><Paragraph>2</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph> </TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Paragraph Foreground="Red">Red</Paragraph></TableCell>
      <TableCell><Paragraph>1</Paragraph></TableCell>
      <TableCell><Paragraph>2</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Paragraph Foreground="Green">Green</Paragraph></TableCell>
      <TableCell><Paragraph>1</Paragraph></TableCell>
      <TableCell><Paragraph>2</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph></TableCell>
    </TableRow>
  </TableRowGroup>

  <!-- This TableRowGroup hosts a footer row for the table. -->
  <TableRowGroup Style="{StaticResource headerFooterRowStyle}">
    <TableRow>
      <TableCell><Paragraph>Totals</Paragraph></TableCell>
      <TableCell><Paragraph>3</Paragraph></TableCell>
      <TableCell><Paragraph>6</Paragraph></TableCell>
      <TableCell>
        <Table></Table>
      </TableCell>
    </TableRow>
  </TableRowGroup>
</Table>

En la ilustración siguiente se muestra cómo se representa este ejemplo.

Captura de pantalla: Grupos de filas de tabla

Precedencia de renderizado en segundo plano

Los elementos de tabla se representan en el orden siguiente (orden z de menor a mayor). Este orden no se puede cambiar. Por ejemplo, no hay ninguna propiedad "Z-order" para estos elementos que puede usar para invalidar este orden establecido.

  1. Table

  2. TableColumn

  3. TableRowGroup

  4. TableRow

  5. TableCell

Considere el ejemplo siguiente, que define los colores de fondo para cada uno de estos elementos dentro de una tabla.

<Table Background="Yellow">
  <Table.Columns>
    <TableColumn/>
    <TableColumn Background="LightGreen"/>
    <TableColumn/>
  </Table.Columns>
  <TableRowGroup>
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
  </TableRowGroup>
  <TableRowGroup Background="Tan">
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
    <TableRow Background="LightBlue">
      <TableCell/><TableCell Background="Purple"/><TableCell/>
    </TableRow>
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
  </TableRowGroup>
  <TableRowGroup>
    <TableRow>
      <TableCell/><TableCell/><TableCell/>
    </TableRow>
  </TableRowGroup>
</Table>

En la ilustración siguiente se muestra cómo se representa este ejemplo (solo se muestran los colores de fondo).

Captura de pantalla: Tabla ZOrder

Abarcando filas o columnas

Las celdas de tabla se pueden configurar para abarcar varias filas o columnas mediante los RowSpan atributos o ColumnSpan , respectivamente.

Considere el ejemplo siguiente, en el que una celda abarca tres columnas.

<Table>
  <Table.Columns>
    <TableColumn/>
    <TableColumn/>
    <TableColumn/>
  </Table.Columns>

  <TableRowGroup>
    <TableRow>
      <TableCell ColumnSpan="3" Background="Cyan">
        <Paragraph>This cell spans all three columns.</Paragraph>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell Background="LightGray"><Paragraph>Cell 1</Paragraph></TableCell>
      <TableCell Background="LightGray"><Paragraph>Cell 2</Paragraph></TableCell>
      <TableCell Background="LightGray"><Paragraph>Cell 3</Paragraph></TableCell>
    </TableRow>
  </TableRowGroup>
</Table>

En la ilustración siguiente se muestra cómo se representa este ejemplo.

Captura de pantalla: Celda que abarca las tres columnas

Creación de una tabla con código

En los ejemplos siguientes se muestra cómo crear mediante programación un Table elemento y rellenarlo con contenido. El contenido de la tabla se distribuye en cinco filas (representadas por objetos TableRow contenidos en un objeto RowGroups) y seis columnas (representadas por objetos TableColumn). Las filas se usan con distintos fines de presentación, incluida una fila de título destinada a título de toda la tabla, una fila de encabezado para describir las columnas de datos de la tabla y una fila de pie de página con información de resumen. Tenga en cuenta que la noción de filas de "título", "encabezado" y "pie de página" no es inherente a la tabla; son simplemente filas con unas características diferentes. Las celdas de tabla contienen el contenido real, que se puede componer de texto, imágenes o casi cualquier otro elemento de interfaz de usuario (UI).

En primer lugar, se crea un FlowDocument para alojar Table, y se crea un nuevo Table, el cual se agrega al contenido de FlowDocument.

// Create the parent FlowDocument...
flowDoc = new FlowDocument();

// Create the Table...
table1 = new Table();
// ...and add it to the FlowDocument Blocks collection.
flowDoc.Blocks.Add(table1);

// Set some global formatting properties for the table.
table1.CellSpacing = 10;
table1.Background = Brushes.White;

' Create the parent FlowDocument...
flowDoc = New FlowDocument()

' Create the Table...
table1 = New Table()

' ...and add it to the FlowDocument Blocks collection.
flowDoc.Blocks.Add(table1)


' Set some global formatting properties for the table.
table1.CellSpacing = 10
table1.Background = Brushes.White

A continuación, se crean seis TableColumn objetos y se agregan a la colección Columns de la tabla, aplicando algo de formato.

Nota:

Tenga en cuenta que la colección de la tabla Columns usa la indexación estándar basada en cero.

// Create 6 columns and add them to the table's Columns collection.
int numberOfColumns = 6;
for (int x = 0; x < numberOfColumns; x++)
{
    table1.Columns.Add(new TableColumn());

    // Set alternating background colors for the middle colums.
    if(x%2 == 0)
        table1.Columns[x].Background = Brushes.Beige;
    else
        table1.Columns[x].Background = Brushes.LightSteelBlue;
}


' Create 6 columns and add them to the table's Columns collection.
Dim numberOfColumns = 6
Dim x
For x = 0 To numberOfColumns
    table1.Columns.Add(new TableColumn())

    ' Set alternating background colors for the middle colums.
    If x Mod 2 = 0 Then
        table1.Columns(x).Background = Brushes.Beige
    Else
        table1.Columns(x).Background = Brushes.LightSteelBlue
    End If
Next x

A continuación, se crea una fila de título y se agrega a la tabla con cierto formato aplicado. La fila de título contiene una sola celda que abarca las seis columnas de la tabla.

// Create and add an empty TableRowGroup to hold the table's Rows.
table1.RowGroups.Add(new TableRowGroup());

// Add the first (title) row.
table1.RowGroups[0].Rows.Add(new TableRow());

// Alias the current working row for easy reference.
TableRow currentRow = table1.RowGroups[0].Rows[0];

// Global formatting for the title row.
currentRow.Background = Brushes.Silver;
currentRow.FontSize = 40;
currentRow.FontWeight = System.Windows.FontWeights.Bold;

// Add the header row with content,
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("2004 Sales Project"))));
// and set the row to span all 6 columns.
currentRow.Cells[0].ColumnSpan = 6;

' Create and add an empty TableRowGroup to hold the table's Rows.
table1.RowGroups.Add(new TableRowGroup())

' Add the first (title) row.
table1.RowGroups(0).Rows.Add(new TableRow())

' Alias the current working row for easy reference.
Dim currentRow As New TableRow()
currentRow = table1.RowGroups(0).Rows(0)

' Global formatting for the title row.
currentRow.Background = Brushes.Silver
currentRow.FontSize = 40
currentRow.FontWeight = System.Windows.FontWeights.Bold

' Add the header row with content, 
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("2004 Sales Project"))))
' and set the row to span all 6 columns.
currentRow.Cells(0).ColumnSpan = 6

A continuación, se crea y se agrega una fila de encabezado a la tabla, y las celdas de la fila de encabezado se crean y rellenan con contenido.

// Add the second (header) row.
table1.RowGroups[0].Rows.Add(new TableRow());
currentRow = table1.RowGroups[0].Rows[1];

// Global formatting for the header row.
currentRow.FontSize = 18;
currentRow.FontWeight = FontWeights.Bold;

// Add cells with content to the second row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Product"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 1"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 2"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 3"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 4"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("TOTAL"))));

' Add the second (header) row.
table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(1)

' Global formatting for the header row.
currentRow.FontSize = 18
currentRow.FontWeight = FontWeights.Bold

' Add cells with content to the second row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Product"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 1"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 2"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 3"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Quarter 4"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("TOTAL"))))

A continuación, se crea una fila para los datos y se agrega a la tabla, y las celdas de esta fila se crean y rellenan con contenido. Compilar esta fila es similar a crear la fila de encabezado, con un formato ligeramente diferente aplicado.

// Add the third row.
table1.RowGroups[0].Rows.Add(new TableRow());
currentRow = table1.RowGroups[0].Rows[2];

// Global formatting for the row.
currentRow.FontSize = 12;
currentRow.FontWeight = FontWeights.Normal;

// Add cells with content to the third row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Widgets"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$50,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$55,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$60,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$65,000"))));
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$230,000"))));

// Bold the first cell.
currentRow.Cells[0].FontWeight = FontWeights.Bold;

' Add the third row.
table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(2)

' Global formatting for the row.
currentRow.FontSize = 12
currentRow.FontWeight = FontWeights.Normal

' Add cells with content to the third row.
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Widgets"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$50,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$55,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$60,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$65,000"))))
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("$230,000"))))

' Bold the first cell.
currentRow.Cells(0).FontWeight = FontWeights.Bold

Por último, se crea, agrega y da formato a una fila de pie de página. Al igual que la fila de título, el pie de página contiene una sola celda que abarca las seis columnas de la tabla.

table1.RowGroups[0].Rows.Add(new TableRow());
currentRow = table1.RowGroups[0].Rows[3];

// Global formatting for the footer row.
currentRow.Background = Brushes.LightGray;
currentRow.FontSize = 18;
currentRow.FontWeight = System.Windows.FontWeights.Normal;

// Add the header row with content,
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Projected 2004 Revenue: $810,000"))));
// and set the row to span all 6 columns.
currentRow.Cells[0].ColumnSpan = 6;

table1.RowGroups(0).Rows.Add(new TableRow())
currentRow = table1.RowGroups(0).Rows(3)

' Global formatting for the footer row.
currentRow.Background = Brushes.LightGray
currentRow.FontSize = 18
currentRow.FontWeight = System.Windows.FontWeights.Normal

' Add the header row with content, 
currentRow.Cells.Add(new TableCell(new Paragraph(new Run("Projected 2004 Revenue: $810,000"))))
' and set the row to span all 6 columns.
currentRow.Cells(0).ColumnSpan = 6

Consulte también