Inserting a Table and Row Using TableLayout and RowLayout

This topic describes the steps for creating a table with rows. To create a row that is not in a table, see Creating a Row Using RowLayout.

To insert a table and row using tableLayout and rowLayout:

In the Design Structure Window of the desired file, locate the parent node in which you wish to insert a table.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the tableLayout component to the parent node.
The tableLayout node is inserted and highlighted under the expanded parent node.
In the Design Structure Window, right-click the tableLayout node and choose Insert inside tableLayout | rowLayout.
The rowLayout node is inserted and highlighted under the expanded tableLayout node.
Repeat step 3 to add the number of rows you desire.
To set attributes for a row, do the following:
1. In the Design Structure Window, select a rowLayout node.
2. In the Property Inspector, set the following attributes for the row:
  - hAlign - Enter the default horizontal alignment of cells in this row. The options are center, left, right, start, and end.
  - vAlign - Enter the default vertical alignment of cells in this row. The options are middle, top, and bottom.
To set attributes for the table, do the following:
1. In the Design Structure Window, select the tableLayout node.
2. In the Property Inspector, set the following attributes for the table:
  - borderWidth - Enter the border width around each cell.
  - cellPadding - Enter the spacing within cells.
  - cellSpacing - Enter the spacing between cells.
  - hAlign - Enter the horizontal alignment of the table. The options are center, left, right, start, and end.
  - summary - Enter the summary of the table's purpose and structure for user agents rendering to non-visual media. You must set this attribute if the table is being used to implement a data table (instead of a layout table).
  - width - Enter the preferred total width of the table layout.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Insert tableLayout and rowLayout -->
  
  <contents>
    <header text="Here is a table with two rows">
      <tableLayout width="75%"
                   borderWidth="3"
                   cellSpacing="10"
                   hAlign="center">
        <contents>
          <rowLayout hAlign="right">
            <contents>
              First Column
              <cellFormat vAlign="bottom">
                <contents>
                  Second Column
                </contents>
              </cellFormat>
              <flowLayout>
                <contents>
                  Third Column
                  <spacer height="100" width="1"/>
                </contents>
              </flowLayout>
            </contents>
          </rowLayout>
          <rowLayout>
            <contents>
              <header text="First Column Second Row"/>
              <cellFormat columnSpan="2">
                <contents>
                  <header text="Column Span Two"/>
                </contents>
              </cellFormat>
            </contents>
          </rowLayout>
        </contents>
      </tableLayout>
    </header>
  </contents>
  
  <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...