표 개요
Table은 유동 문서 콘텐츠의 모눈 기반 표현을 지원하는 블록 수준 요소입니다. 이 요소의 유연성은 매우 유용하지만 이러한 유연성으로 인해 이를 이해하고 올바르게 사용하는 것이 매우 복잡해지기도 합니다.
이 항목에는 다음 단원이 포함되어 있습니다.
표 기본 사항
표와 모눈의 차이점
표 기본 구조
표 포함 관계
행 그룹화
배경 렌더링 우선 순위
행 또는 열 확장
코드를 사용하여 테이블 빌드
관련 항목
표 기본 사항
표와 모눈의 차이점
Table 및 Grid는 공통된 기능을 공유하지만 각각 적합한 시나리오는 서로 다릅니다. Table은 유동 콘텐츠 내에서 사용되도록 설계된 것입니다. 유동 콘텐츠에 대한 자세한 내용은 유동 문서 개요를 참조하십시오. 모눈은 기본적으로는 유동 콘텐츠 외부 어디에서든 사용할 수 있으나 폼 내부에서 사용하기에 가장 적합합니다. FlowDocument 내부에서 Table은 페이지 매김, 열 흐름 변경 및 콘텐츠 선택과 같은 유동 콘텐츠 동작을 지원하지만 Grid는 지원하지 않습니다. 한편 Grid는 Grid가 행 및 열 인덱스를 기반으로 요소를 추가하는 반면 Table은 그렇지 않다는 등의 여러 가지 이유에서 FlowDocument 외부에서 사용하기에 가장 적합합니다. Grid 요소를 사용하면 자식 콘텐츠를 계층화할 수 있으므로 단일 "셀" 내에 둘 이상의 요소가 존재할 수 있습니다. Table은 계층화를 지원하지 않습니다. Grid의 자식 요소는 해당 "셀" 경계 영역을 기준으로 절대 위치에 배치될 수 있습니다. Table은 이 기능을 지원하지 않습니다. 마지막으로 Grid는 Table에 비해 리소스를 더 적게 필요로 하므로 성능을 향상시키려면 Grid 사용을 고려해 보십시오.
표 기본 구조
Table은 열(TableColumn 요소로 표현)과 행(TableRow 요소로 표현)으로 구성되는 모눈 기반 표시를 제공합니다. TableColumn 요소는 콘텐츠를 호스팅하지 않고 단지 열의 열과 특성을 정의하기만 합니다. TableRow 요소는 TableRowGroup 요소 내에서 호스팅되어야 하며 표 행의 그룹화를 정의합니다. 표가 표시할 실제 콘테츠가 들어 있는 TableCell 요소는 TableRow 요소 내에서 호스팅되어야 합니다. TableCell에는 Block에서 파생된 요소만 포함될 수 있습니다. TableCell에 사용할 수 있는 유효한 자식 요소는 다음과 같습니다.
.gif "참고") 참고 |
|---|
TableCell 요소는 텍스트 콘텐츠를 직접 호스팅하지 않을 수도 있습니다.TableCell과 같은 유동 콘텐츠 요소에 대한 포함 규칙과 관련된 자세한 내용은 유동 문서 개요를 참조하십시오. |
| 참고 |
|---|
다음 예제에서는 XAML을 사용하여 간단한 2 x 3 표를 정의합니다.
<!--
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>
다음 그림에서는 이 예제가 렌더링되는 방법을 보여 줍니다.
.png "스크린 샷: 기본 표 렌더링")
표 포함 관계
Table은 Block 요소에서 파생되며 Block 수준 요소에 대한 일반적인 규칙을 따릅니다. Table 요소는 다음과 같은 요소에 포함될 수 있습니다.
행 그룹화
TableRowGroup 요소는 표 안에서 행을 임의로 그룹화할 수 있는 방법을 제공하며, 표의 모든 행은 행 그룹에 속해야 합니다. 행 그룹 내의 행은 대개 공통된 의미를 가지며 그룹으로 스타일을 지정할 수 있습니다. 행 그룹은 일반적으로 제목, 머리글 및 바닥글 행과 같은 특정 용도의 행을 표에 포함된 기본 콘텐츠와 구분하기 위해 사용합니다.
다음 예제에서는 XAML을 사용하여 스타일이 지정된 머리글과 바닥글 행이 있는 표를 정의합니다.
<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>
다음 그림에서는 이 예제가 렌더링되는 방법을 보여 줍니다.
.png "스크린 샷: 표 행 그룹")
배경 렌더링 우선 순위
표 요소는 다음과 같은 순서(오름차순의 z-순서)로 렌더링됩니다. 이 순서는 변경할 수 없습니다. 예를 들어 이렇게 설정된 순서를 재정의하는 데 사용할 수 있는 이들 요소에 대한 "Z-순서" 속성은 없습니다.
다음 예제에서는 표 안에서 이들 요소 각각에 대한 배경색을 정의합니다.
<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>
다음 그림에서는 이 예제가 렌더링되는 방식을 보여 줍니다(배경색만 표시).
.png "스크린 샷: 표 z 순서")
행 또는 열 확장
표의 셀은 RowSpan 또는 ColumnSpan 속성을 사용하여 각각 여러 개의 행 또는 열로 확장하도록 구성할 수 있습니다.
다음 예제에서는 하나의 셀을 세 개의 열로 확장합니다.
<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>
다음 그림에서는 이 예제가 렌더링되는 방법을 보여 줍니다.
.png "스크린 샷: 세 열에 걸친 셀")
코드를 사용하여 테이블 빌드
다음 예제에서는 Table을 프로그래밍 방식으로 만들고 이를 콘텐츠로 채우는 방법을 보여 줍니다. 표의 콘텐츠는 5개의 행(RowGroups 개체에 포함된 TableRow 개체로 표시)과 6개의 열(TableColumn 개체로 표시)에 배분됩니다. 행은 서로 다른 표시 목적에 사용되며, 여기에는 표 전체에 대한 제목을 지정하기 위한 제목 행, 표의 데이터 열을 설명하기 위한 머리글 행 및 요약 정보가 들어 있는 바닥글 행 등이 포함됩니다. "제목", "머리글" 및 "바닥글" 행이라는 명칭은 표로부터 비롯된 것이 아닌 단지 서로 다른 특성을 갖는 행을 나타내는 것입니다. 표 셀에는 실제 콘텐츠가 들어 있으며 여기에는 텍스트, 이미지 및 기타 거의 모든 user interface (UI) 요소가 포함될 수 있습니다.
먼저 Table을 호스팅하기 위해 FlowDocument가 만들어지고, 새로운 Table이 만들어져서 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;
다음은 6개의 TableColumn 개체가 만들어져서 표의 Columns 컬렉션에 추가되고 이때 서식이 일부 적용됩니다.
| 참고 |
|---|
표의 Columns 컬렉션은 0부터 시작하는 표준 색인을 사용합니다. |
' 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;
}
다음에는 제목 행이 만들어져서 서식이 적용된 표에 추가됩니다. 제목 행에는 표의 모든 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
// 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;
다음에는 머리글 행이 만들어져서 표에 추가되고 머리글 행의 셀이 만들어져서 콘텐츠가 채워집니다.
' 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"))));
다음에는 데이터 행이 만들어져서 표에 추가되고 이 행의 셀이 만들어져서 콘텐츠가 채워집니다. 이 행을 빌드하는 것은 머리글 행을 빌드하는 것과 유사하고 서식 적용만 약간 다릅니다.
' 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;
마지막으로 바닥글 행이 만들어져서 추가되고 서식이 적용됩니다. 제목 행과 마찬가지로 바닥글에는 표의 모든 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
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;