Intersoft ClientUI 8 > ClientUI Fundamentals > Flow Document Framework Overview > Working With Table Element |
Table is a block level element that supports grid-based presentation in FlowDocument content. For more information about flow document concept, see Flow Document Framework Overview.
This topic explains the table concept in FlowDocument which contains the following sections:
Table is a Block element that supports grid-based presentation consisting of columns (represented by TableColumn elements) and rows (represented by TableRow elements). TableColumn elements do not host content; they simply define columns and characteristics of columns. TableRow elements must be hosted in a TableRowGroup element, which defines a grouping of rows for the table. TableCell elements, which contain the actual content to be presented by the table, must be hosted in a TableRow element. TableCell element may not directly host text content. It can only contains Block elements.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Borders="1,Single,#FF000000"> <!-- This table has 3 columns, each described by a TableColumn element nested in a Table.Columns collection element. --> <Intersoft:Table.Columns> <Intersoft:TableColumn /> <Intersoft:TableColumn /> <Intersoft:TableColumn /> </Intersoft:Table.Columns> <!-- This table includes a single TableRowGroup which hosts 2 rows, each described by a TableRow element. --> <Intersoft:TableRowGroup> <!-- Each of the 2 TableRow elements hosts 3 cells, described by TableCell elements. --> <Intersoft:TableRow> <Intersoft: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. --> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 2 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 2 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 2 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
By default, Table element will use the width of the available document width. To specify a custom width value, you can either use Width property or specify a double length value as the width of each TableColumn definition. For example, if you have four columns and specify 100 as the width of each TableColumn , the width of Table element will be 400 pixel. On the other hand, you cannot specify the height of the Table element. Table element will consume the total height as the result of the flowing content in each cell. You can specify height definition in TableRow level. For further information about TableRow, see Understanding TableRow.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Borders="1,Single,#FF000000"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="100"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 4 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
Note that, if you specify Auto or Star value as one of the TableColumn width, the Table element will use the available document width.
Similar to the other Block element, you can specify Margin and Padding to Table element. However, there is a slight difference when Padding is specified in Table element. Padding property in Table element determines the space between the Table boundaries and the TableCell boundaries.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Borders="1,Single,#FF000000" Padding="20"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="100"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 4 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
You can specify cell spacing and cell padding in Table element using CellSpacing and CellPadding properties respectively. CellSpacing property determines the spacing between each cells, while CellPadding property determines default padding applied to each TableCell. Note that when CellSpacing is set to 0, the border definitions will automatically collapse to a single border definition. For further information about Table border definition, see Understanding Table Formatting.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Borders="1,Single,#FF000000" CellSpacing="5" CellPadding="5"> <Intersoft:Table.Columns> <Intersoft:TableColumn /> <Intersoft:TableColumn /> <Intersoft:TableColumn /> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 2 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 2 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 2 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
You can specify the width of each column in TableColumn element. Similar to Grid, you can input a double length value, or use Auto and Star (*) unit type as the value of the Width property. Note that the column width specified will not always be applied as the width of the cell. If CellSpacing and border formatting are specified in Table element, the width of the cell will be the result of the column width subtracted with these values.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Borders="1,Single,#FF000000"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="100"/> <Intersoft:TableColumn Width="Auto"/> <Intersoft:TableColumn Width="2*"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 1 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 2 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Cell at Row 1 Column 3 </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
In the above code, three TableColumn elements are specified in the Table. The width of the first, second, and third column is 100, Auto, and 2* respectively. Note that Auto is equal to one-star (*) value.
TableColumn is not inherited from TextElement, so you cannot specify common flow element formatting in this element.
TableRowGroup element provides a way to arbitrarily group rows within a table; every row in a table must belong to a row grouping. Rows within a row group often share a common intent, and may be styled as a group. A common use for row groupings is to separate special-purpose rows, such as a title, header, and footer rows, from the primary content contained by the table.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="0" Margin="20" CellPadding="5" Borders="1,Single,#FFC5C5C5"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="*"/> <Intersoft:TableColumn Width="1.5*"/> <Intersoft:TableColumn Width="1.5*"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup Background="#FF5C0558" Foreground="#FFFFFFFF"> <Intersoft:TableRow> <Intersoft:TableCell ColumnSpan="3"> <Intersoft:Paragraph> <Intersoft:Run> Text Input </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup Background="#FFF7EDF7"> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> UXTextBox </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:List Margin="5 0" MarkerOffset="10" MarkerStyle="Circle"> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Watermark Text </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Clear Error Validation </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> </Intersoft:List> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:List Margin="5 0" MarkerOffset="10" MarkerStyle="Circle"> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Support Routed Events </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Customizable Appearance </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> </Intersoft:List> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> UXPasswordBox </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:List Margin="5 0" MarkerOffset="10" MarkerStyle="Circle"> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Watermark Text </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Automatic Masking </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> </Intersoft:List> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:List Margin="5 0" MarkerOffset="10" MarkerStyle="Circle"> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Clear Error Validation </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> <Intersoft:ListItem> <Intersoft:Paragraph> <Intersoft:Run> Customizable Appearance </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:ListItem> </Intersoft:List> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
In the above code, the first TableRowGroup is styled as a group row, while the next one is styled as a common row. Note that the formatting styles are applied in TableRowGroup level.
You can specify Height, MinHeight, and MaxHeight in TableRowGroup and TableRow elements. When these properties are configured in TableRowGroup, it will be applied to all rows contained in the row group. When a specific height is specified in TableRow, the content will be clipped if it exceeds the specified height.
Similar to HTML table, you can specify row and column span in Table element. However, unlike HTML table where row span is specified in row level, the RowSpan and ColumnSpan properties in Table element must be specified in TableCell level.
When the text content in spanned cell is long, the height of the last spanned row will automatically be enlarged if the height-related properties of that row are not specified. The last spanned row refers to the last row in the RowSpan definition. For example, if you specify RowSpan property to 2 in the first row, the last spanned row refers to the second row. Thus, if RowSpan property is set to 2 in the first row and height-related properties are not specified the last spanned row (the second row), that row will be enlarged according to the content of the spanned cell. See the following code and screenshot.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Width="550" CellSpacing="0" Margin="20" CellPadding="5" Borders="1,Single,#FFcf7b79"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="*"/> <Intersoft:TableColumn Width="*" /> <Intersoft:TableColumn Width="2*"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup Background="#FFc0504d" Foreground="White"> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Notes </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell RowSpan="2"> <Intersoft:Paragraph> <Intersoft:Run> Both employees joined on April 2011, and both are placed in our branch office in Virginia, United States. Yearly review is scheduled on April 2012. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
If height-related properties are specified in the last spanned row, the content of the spanned cell will be clipped, should it exceed the specified height.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table Width="550" CellSpacing="0" Margin="20" CellPadding="5" Borders="1,Single,#FFcf7b79"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="*"/> <Intersoft:TableColumn Width="*" /> <Intersoft:TableColumn Width="2*"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup Background="#FFc0504d" Foreground="White"> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Notes </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell RowSpan="2"> <Intersoft:Paragraph> <Intersoft:Run> Both employees joined on April 2011, and both are placed in our branch office in Virginia, United States. Yearly review is scheduled on April 2012. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow Height="50"> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
Similar to other FlowDocument element, you can apply default formatting properties to Table element, such as Background, FontFamily, FontSize, FontStretch, FontStyle, FontWeight, and Foreground. Since Table is a Block element, you can also apply Block-related formatting. For more information about these formatting, see Understanding FlowDocument Formatting.
You can use TextAlignment property to set the global text alignment applied to all the cells in the Table element.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="0" CellPadding="5" Borders="1,Single,#FF000000" TextAlignment="Center"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
As the child of Block element, Table element has the default border formatting, including the global and individual border formatting. Since Table consists of TableCell elements, the global border formatting will be applied to all the TableCell elements in the Table.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellPadding="5" TextAlignment="Center" BorderBrush="Brown" BorderThickness="1"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> |
Besides the global border formatting, you can apply individual border formatting to each side of the Table. In this case, the individual border formatting will be applied to Table element only.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellPadding="5" TextAlignment="Center" LeftBorderBrush="Bisque" TopBorderBrush="Goldenrod" RightBorderBrush="Chocolate" BottomBorderBrush="Tomato" BorderThickness="2"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
Besides the left, top, right, and bottom individual border formatting, you can specify inside horizontal and inside vertical border formatting in Table level. When inside horizontal and inside vertical border formatting are specified, it will be used as the border format applied to the horizontal and vertical border of all TableCell elements in the Table. To specify these, simply set these additional border properties, InsideHorizontalBorderBrush, InsideHorizontalBorderStyle, InsideHorizontalBorderThickness, InsideVerticalBorderBrush, InsideVerticalBorderStyle, and InsideVerticalBorderThickness.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="5" CellPadding="5" TextAlignment="Center" LeftBorderBrush="Goldenrod" TopBorderBrush="Goldenrod" RightBorderBrush="Goldenrod" BottomBorderBrush="Goldenrod" InsideHorizontalBorderBrush="PeachPuff" InsideHorizontalBorderStyle="DashSmallGap" InsideHorizontalBorderThickness="2" InsideVerticalBorderBrush="PeachPuff" InsideVerticalBorderStyle="DashSmallGap" InsideVerticalBorderThickness="2" BorderThickness="2"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
You can use Borders property to simplify the border formatting definition. You can specify up to 6 border definition separated by semicolon in Table element. If you specify one border definition in Borders property, it will be applied as Table and TableCell borders. Note that the border pattern is the same as the one explained in FlowDocument overview. For further information, see Configuring Border Formatting. If you specify two or four border definition in Borders property, the Table element will apply the similar border formatting applied by Block element.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="5" CellPadding="5" TextAlignment="Center" Borders="2,Single,#FFFFE4C4;2,Single,#FFDAA520;2,Single,#FFD2691E;2,Single,#FFFF6347"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
In Table element, you can add two more border definition in Borders property. The fifth definition specifies inside horizontal border formatting, while the sixth definition specifies the inside vertical border formatting. For example: Borders="1,Single,#FF000000;1,Single,#FF000000;1,Single,#FF000000;1,Single,#FF000000;1,Single,#FF0000FF;1,Single,#FF0000FF;" will apply Blue color as the color of horizontal and vertical lines of all TableCell elements in the table. Note that this six border definition can only be applied to Table element.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="5" CellPadding="5" TextAlignment="Center" Borders="2,Single,#FFDAA520;2,Single,#FFDAA520;2,Single,#FFDAA520;2,Single,#FFDAA520;2,DashSmallGap,#FFFFDAB9;2,DashSmallGap,#FFFFDAB9"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
Note that you cannot specify CornerRadius in Table border.
You can specify border formatting in TableCell element. The border formatting in TableCell level will override the global border formatting in Table element.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="0" CellPadding="5" TextAlignment="Center" Borders="2,Single,#FFDAA520"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Background="Beige" Borders="2,Single,#FFAEDB4D"> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Support </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
In TableCell element, you can inherit the border formatting of Table element using inherit keyword. Note that this can only be specified using Borders property only.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="0" CellPadding="5" TextAlignment="Center" Borders="2,Single,#FFFFDAB9"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell Borders="2,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="2,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="2,Single,inherit"> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell Borders="2,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="2,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="2,Single,inherit"> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell Borders="2,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="2,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="2,Single,inherit"> <Intersoft:Paragraph> <Intersoft:Run> Technical Supports </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
When CellSpacing property in Table element is set to 0, the border formatting in TableCell will override the border formatting in Table level. The adjacent border lines will automatically be collapsed to a single border definition. See the above screenshot. The Employee Name and Title cells have different border color. The right border of Employee Name cell and the left border of Title cell will collapse to a single border line. In this case, the top and left border line of a cell will have higher precedence compared to the bottom and right border of the previous cell.
You can specify different border thickness at each TableCell. In this case, Table element will ensure that all TableCell elements in the row have the same height, despite of the border thickness difference. When CellSpacing is set to 0, Table element will also adjust the position of the content, so it will not overlap in the border offset.
The following code and screenshot shows different border thickness formatting and how the table is rendered when CellSpacing property in Table is set to 0.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="0" CellPadding="5" TextAlignment="Center" BorderBrush="#FFDAA520" BorderThickness="2"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="10,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="5,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Supports </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
The following code and screenshot shows different border thickness formatting and how the table is rendered when CellSpacing property in Table is set to 5.
XAML |
Copy Code
|
---|---|
<Intersoft:FlowDocument> <Intersoft:Table CellSpacing="0" CellPadding="5" TextAlignment="Center" BorderBrush="#FFDAA520" BorderThickness="2"> <Intersoft:Table.Columns> <Intersoft:TableColumn Width="50"/> <Intersoft:TableColumn Width="150"/> <Intersoft:TableColumn Width="150"/> </Intersoft:Table.Columns> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> No. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="10,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Employee Name </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell Borders="5,Single,#FFDAA520"> <Intersoft:Paragraph> <Intersoft:Run> Title </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> <Intersoft:TableRowGroup> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 1. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Johanna Woods </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Sales Member </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> <Intersoft:TableRow> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> 2. </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Andrew Smith </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> <Intersoft:TableCell> <Intersoft:Paragraph> <Intersoft:Run> Technical Supports </Intersoft:Run> </Intersoft:Paragraph> </Intersoft:TableCell> </Intersoft:TableRow> </Intersoft:TableRowGroup> </Intersoft:Table> </Intersoft:FlowDocument> |
Note that you cannot specify CornerRadius in TableCell border.