Übersicht über Tabellen

Artikel
08/10/2011

Table ist ein Element auf Blockebene, das die rasterbasierte Darstellung von Flussdokumentinhalten unterstützt. Aufgrund seiner Flexibilität ist dieses Element sehr nützlich, seine richtige Anwendung ist jedoch relativ schwierig.

Dieses Thema enthält folgende Abschnitte.

Grundlagen zu Tabellen
Was unterscheidet eine Tabelle von einem Raster?
Grundlegende Tabellenstruktur
Tabellenkapselung
Zeilengruppen
Hintergrundrendering-Rangfolge
Überspannen von Zeilen oder Spalten
Erstellen einer Tabelle mit Code
Verwandte Themen

Grundlagen zu Tabellen

Was unterscheidet eine Tabelle von einem Raster?

Table und Grid haben einige allgemeine Funktionen gemeinsam, sind jedoch beide für unterschiedliche Szenarien geeignet. Eine Table ist für die Verwendung innerhalb von fortlaufenden Inhalten vorgesehen. (Weitere Informationen über fortlaufenden Inhalt finden Sie unter Übersicht über Flussdokumente.) Raster eignen sich am besten für die Verwendung in Formularen (bzw. außerhalb von fortlaufendem Inhalt). In einem FlowDocument unterstützt eine Table verschiedene Verhaltensweisen von fortlaufendem Inhalt wie Paginierung, Tabellenflussrichtung und Inhaltsauswahl, ein Grid dagegen unterstützt dies nicht. Ein Grid sollte aus verschiedenen Gründen außerhalb eines FlowDocument verwendet werden. Unter anderem fügt ein Grid im Gegensatz zu einer Table Elemente auf Grundlage eines Zeilen- und Spaltenindexes hinzu. Das Grid-Element ermöglicht es, untergeordnete Inhalte überlagernd anzuordnen, sodass mehrere Elemente in einer "Zelle" enthalten sein können. Table unterstützt die Überlagerung nicht. Die untergeordneten Elemente für ein Grid-Element können absolut zum Bereich ihrer Zellenbegrenzung positioniert werden. Table unterstützt dieses Feature nicht. Schließlich erfordert ein Grid weniger Ressourcen als eine Table. Deshalb sollten Sie zur Verbesserung der Leistung die Verwendung von einem Grid in Betracht ziehen.

Grundlegende Tabellenstruktur

Table ermöglicht die rasterbasierte Darstellung von Spalten (dargestellt durch TableColumn-Elemente) und Zeilen (dargestellt durch TableRow-Elemente). TableColumn-Elemente hosten keinen Inhalt. Sie dienen lediglich zur Definition von Spalten und deren Eigenschaften. TableRow-Elemente müssen in einem TableRowGroup-Element gehostet sein, das eine Zeilengruppe für die Tabelle definiert. TableCell-Elemente, die den eigentlichen Inhalt beinhalten, der von der Tabelle dargestellt werden soll, müssen in einem TableRow-Element gehostet sein. TableCell kann nur Elemente beinhalten, die von Block abgeleitet sind. Beispiele für gültige untergeordnete Elemente für eine TableCell:

Hinweis
TableCell-Elemente hosten Textinhalt möglicherweise nicht direkt.Weitere Informationen über die Kapselungsregeln für fortlaufende Inhaltselemente wie TableCell finden Sie unter Übersicht über Flussdokumente.

Hinweis
Table ähnelt dem Grid-Element, besitzt jedoch mehr Fähigkeiten und benötigt deshalb mehr Ressourcen.

Im folgenden Beispiel wird eine einfache 2x3-Tabelle mit XAML definiert.

<!-- 
  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>

In der folgenden Abbildung wird das Rendering dieses Beispiels veranschaulicht.

Bildschirmabbildung: Rendern einer Basistabelle

Tabellenkapselung

Table wird vom Block-Element abgeleitet und befolgt die allgemeinen Regeln für Elemente auf Block-Ebene. Ein Table-Element ist möglicherweise in einem der folgenden Elemente enthalten:

Zeilengruppen

Mit dem TableRowGroup-Element können Zeilen in einer Tabelle beliebig gruppiert werden, wobei jede Zeile einer Tabelle zu einer Zeilengruppierung gehören muss. Zeilen in einer Zeilengruppe dienen häufig einem gemeinsamen Zweck und können als Gruppe formatiert werden. Häufig werden durch Zeilengruppen Zeilen verschiedenen Zwecks voneinander getrennt, z. B. der Hauptinhalt der Tabelle vom Titel, der Überschrift und den Fußzeilen.

Im folgenden Beispiel wird XAML verwendet, um eine Tabelle mit formatierten Kopf- und Fußzeilen zu definieren.

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

In der folgenden Abbildung wird das Rendering dieses Beispiels veranschaulicht.

Bildschirmabbildung: Tabellenzeilengruppen

Hintergrundrendering-Rangfolge

Tabellenelemente rendern in der folgenden Reihenfolge (z-Reihenfolge, vom niedrigsten zum höchsten). Diese Reihenfolge kann nicht geändert werden. Zum Beispiel gibt es keine "z-Reihenfolge"-Eigenschaft für diese Elemente, die zum Überschreiben dieser festgelegten Reihenfolge verwendet werden könnte.

Betrachten Sie das folgende Beispiel, in dem Hintergrundfarben für jedes dieser Elemente innerhalb einer Tabelle definiert werden.

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

Die folgende Abbildung veranschaulicht, wie dieses Beispiel rendert (nur Hintergrundfarben werden angezeigt).

Bildschirmabbildung: Tabellen-Z-Reihenfolge

Überspannen von Zeilen oder Spalten

Tabellenzellen können mit den Attributen RowSpan oder ColumnSpan so konfiguriert werden, dass sie mehrere Zeilen oder Spalten überspannen.

Betrachten Sie das folgende Beispiel, in dem eine Zelle drei Spalten überspannt.

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

In der folgenden Abbildung wird das Rendering dieses Beispiels veranschaulicht.

Bildschirmabbildung: Zelle umfasst alle drei Spalten

Erstellen einer Tabelle mit Code

Im folgenden Beispiel wird veranschaulicht, wie eine Table programmgesteuert erstellt und mit Inhalt gefüllt wird. Die Inhalte der Tabelle sind auf fünf Zeilen (dargestellt durch TableRow-Objekte, die in einem RowGroups-Objekt enthalten sind) und sechs Spalten (dargestellt durch TableColumn-Objekte) aufgeteilt. Die Zeilen werden für verschiedene Darstellungszwecke verwendet. Unter anderem gibt es eine Titelzeile, die als Überschrift für die gesamte Tabelle dient, eine Kopfzeile, die die Datenspalten der Tabelle beschreibt, und eine Fußzeile mit Zusammenfassungsinformationen. Beachten Sie, dass die Begriffe "Titelzeile", "Kopfzeile" und "Fußzeile" keine spezifischen Bestandteile der Tabelle sind. Es handelt sich lediglich um Zeilen mit unterschiedlichen Eigenschaften. Tabellenzellen enthalten den eigentlichen Inhalt, der aus Text, Bildern oder nahezu jedem beliebigen user interface (UI)-Element bestehen kann.

Zuerst wird ein FlowDocument, das die Table hostet, sowie eine neue Table erstellt und zu den Inhalten von FlowDocument hinzugefügt.

' 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;

Anschließend werden sechs TableColumn-Objekte erstellt und mit einigen Formatierungen zur Columns-Auflistung der Tabelle hinzugefügt.

Hinweis
Beachten Sie, dass die Columns-Auflistung der Tabelle nullbasierte Standardindizierung verwendet.

            ' 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

            // 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;
            }

Anschließend wird eine Titelzeile erstellt und mit etwas Formatierung zur Tabelle hinzugefügt. Die Titelzeile enthält eine einzelne Zelle, die alle sechs Spalten in der Tabelle überspannt.

' 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

// 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;

Anschließend wird ein Header erstellt und zur Tabelle hinzugefügt. Die Zellen im Header werden erstellt und mit Inhalt gefüllt.

' 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"))));

Anschließend wird eine Zeile für Daten erstellt und zur Tabelle hinzugefügt. Die Zellen in dieser Zeile werden erstellt und mit Inhalt gefüllt. Das Erstellen dieser Zeile ähnelt der Erstellung des Headers, mit leichten Unterschieden bei der Formatierung.

' 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;

Schließlich wird eine Fußzeile erstellt, hinzugefügt und formatiert. Genau wie die Titelzeile enthält auch die Fußzeile eine einzelne Zelle, die alle sechs Spalten in der Tabelle überspannt.

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;