Tabellöversikt

Table är ett blocknivåelement som stöder rutnätsbaserad presentation av Flow-dokumentinnehåll. Flexibiliteten i det här elementet gör det mycket användbart, men gör det också mer komplicerat att förstå och använda korrekt.

Det här avsnittet innehåller följande avsnitt.

Grundläggande om tabeller
Hur skiljer sig tabell från rutnät?
grundläggande tabellstruktur
tabell Containment
radgruppering
Prioritet för bakgrundsåtergivning
Som sträcker sig över rader eller kolumner
Skapa en tabell med kod
[Relaterade ämnen]

Grundläggande tabeller

Hur skiljer sig tabellen från rutnätet?

Table och Grid dela några vanliga funktioner, men var och en passar bäst för olika scenarier. En Table är utformad för användning i flödesinnehåll (se Översikt över flödesdokument för mer information om flödesinnehåll). Rasterlayout används bäst i formulär (i stort sett överallt utanför flödesinnehåll). Inom en FlowDocumentstöder Table flödesinnehållsbeteenden som sidnumrering, kolumnomflöde och innehållsval medan en Grid inte gör det. En Grid används däremot bäst utanför en FlowDocument av många orsaker, inklusive Grid lägger till element baserat på ett rad- och kolumnindex, Table inte. Elementet Grid tillåter skiktning av underordnat innehåll, vilket gör att mer än ett element kan finnas i en enda "cell" Table inte stöder skiktning. Underordnade element i en Grid kan vara absolut positionerade i förhållande till området för sina "cellgränser". Table stöder inte den här funktionen. Slutligen kräver en Grid mindre resurser än en Table så överväg att använda en Grid för att förbättra prestandan.

Grundläggande tabellstruktur

Table innehåller en rutnätsbaserad presentation som består av kolumner (representeras av TableColumn element) och rader (representeras av TableRow element). TableColumn-element håller inte innehåll; de definierar bara kolumner och deras egenskaper. TableRow element måste finnas i ett TableRowGroup element som definierar en gruppering av rader för tabellen. TableCell element, som innehåller det faktiska innehåll som ska presenteras av tabellen, måste finnas i ett TableRow element. TableCell får endast innehålla element som härleds från Block. Giltiga underordnade element för en TableCell inkluderar.

Anmärkning

TableCell element kanske inte är direkt värd för textinnehåll. Mer information om inneslutningsregler för flödesinnehållselement som TableCellfinns i Översikt över flödesdokument.

Anmärkning

Table liknar elementet Grid men har fler funktioner och kräver därför större resurskostnader.

I följande exempel definieras en enkel 2 x 3-tabell med 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>

Följande bild visar hur det här exemplet återges.

Skärmbild som visar hur en grundläggande tabell återges.

Tabell-inneslutning

Table härleds från elementet Block och följer de gemensamma reglerna för Block nivåelement. Ett Table element kan finnas i något av följande element:

Radgrupperingar

Elementet TableRowGroup ger ett sätt att godtyckligt gruppera rader i en tabell. varje rad i en tabell måste tillhöra en radgrupp. Rader i en radgrupp delar ofta en gemensam avsikt och kan utformas som en grupp. En vanlig användning för radgruppering är att separera specialrader, till exempel en rubrik, rubrik och sidfotsrader, från det primära innehållet i tabellen.

I följande exempel används XAML för att definiera en tabell med formaterade sidhuvud- och sidfotsrader.

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

Följande bild visar hur det här exemplet återges.

Skärmbild: Tabellradgrupper

Prioritet för bakgrundsåtergivning

Tabellelement återges i följande ordning (z-ordning från lägsta till högsta). Det går inte att ändra den här ordningen. Det finns till exempel ingen "Z-order"-egenskap för dessa element som du kan använda för att åsidosätta den här etablerade ordningen.

Tänk på följande exempel, som definierar bakgrundsfärger för vart och ett av dessa element i en tabell.

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

Följande bild visar hur det här exemplet återges (visar endast bakgrundsfärger).

Skärmbild: Tabell z-order

Sträcker sig över rader eller kolumner

Tabellceller kan konfigureras för att sträcka sig över flera rader eller kolumner med hjälp av attributen RowSpan respektive ColumnSpan.

Tänk dig följande exempel, där en cell sträcker sig över tre kolumner.

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

Följande bild visar hur det här exemplet återges.

Skärmbild: Cell som sträcker sig över alla tre kolumnerna

Skapa en tabell med kod

I följande exempel visas hur du programmatiskt skapar en Table och fyller den med innehåll. Innehållet i tabellen fördelas i fem rader (representeras av TableRow objekt som finns i ett RowGroups objekt) och sex kolumner (representeras av TableColumn objekt). Raderna används för olika presentationsändamål, inklusive en rubrikrad som är avsedd att ge hela tabellen rubriken, en rubrikrad för att beskriva datakolumnerna i tabellen och en sidfotsrad med sammanfattningsinformation. Observera att begreppen "titel", "rubrik" och "sidfot" inte är en naturlig del av tabellen; de är helt enkelt rader med olika egenskaper. Tabellceller innehåller det faktiska innehållet, som kan bestå av text, bilder eller nästan vilket annat användargränssnittselement som helst.

Först skapas en FlowDocument som värd för Tableoch en ny Table skapas och läggs till i innehållet i 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

Därefter skapas sex TableColumn objekt och läggs till i tabellens Columns samling, med viss formatering tillämpad.

Anmärkning

Observera att tabellens Columns samling använder nollbaserad standardindexering.

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

Därefter skapas en rubrikrad och läggs till i tabellen med viss formatering tillämpad. Rubrikraden råkar innehålla en enda cell som sträcker sig över alla sex kolumnerna i tabellen.

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

Därefter skapas och läggs en rubrikrad till i tabellen, och cellerna i rubrikraden skapas och fylls med innehåll.

// 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"))))

Därefter skapas och läggs en rad för data till i tabellen, och cellerna på den här raden skapas och fylls med innehåll. Att skapa den här raden liknar att skapa rubrikraden, med något annorlunda formatering.

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

Slutligen skapas en sidfotsrad, läggs till och formateras. Precis som rubrikraden innehåller sidfoten en enda cell som sträcker sig över alla sex kolumnerna i tabellen.

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

Se även

Feedback

Var den här sidan till hjälp?

Last updated on 2025-05-07

Dela via

Tabellöversikt

Grundläggande tabeller

Hur skiljer sig tabellen från rutnätet?

Grundläggande tabellstruktur

Tabell-inneslutning

Radgrupperingar

Prioritet för bakgrundsåtergivning

Sträcker sig över rader eller kolumner

Skapa en tabell med kod

Se även

Feedback

Ytterligare resurser