KUIML
Blue Cat's User Interface Programming Language
TABLE_ROW

Description

This element can only be part of a table. It defines a row for a table and contains cells. Each first level cell defines a column for the table.

Inherited Attributes

None.

Specific Attributes

Name Value Type Default Value Description Comment V. Exp.

height

number of pixels or percentage


Forced height of the cell.

If not present, the height will be automatically computed from the children cells heights and layout rules.

1.1

No

Examples

See the TABLE Examples for basic table management.

  • The height of a row can be imposed thanks to the height attribute, which enables us to play with the vertical alignment of the cells inside the row:

<?xml version="1.0" encoding="utf-8" ?>
<SKIN language_version="1.0" background_color="#777777" v_margin="10" h_margin="10">
   <TABLE>
      <TABLE_ROW>
         <IMAGE image="black_square.bmp" />
         <IMAGE image="white_square.bmp" />
         <IMAGE image="black_square.bmp" />
      </TABLE_ROW>
      <TABLE_ROW height="80">
         <IMAGE image="white_square.bmp" v_align="top"/>
         <IMAGE image="black_square.bmp" />
         <IMAGE image="white_square.bmp" v_align="bottom"/>
      </TABLE_ROW>
      <TABLE_ROW>
         <IMAGE image="black_square.bmp" />
         <IMAGE image="white_square.bmp" />
         <IMAGE image="black_square.bmp" />
      </TABLE_ROW>
   </TABLE>
</SKIN>
  • Another example with an imposed table size and a relative size for each row:

<?xml version="1.0" encoding="utf-8" ?>
<SKIN language_version="1.0" background_color="#777777" v_margin="10" h_margin="10">
   <TABLE height="200" width="300">
      <TABLE_ROW height="10%" >
         <IMAGE image="black_square.bmp" v_align="top"/>
         <IMAGE image="white_square.bmp" />
         <IMAGE image="black_square.bmp" v_align="bottom"/>
      </TABLE_ROW >
      <TABLE_ROW height="30%">
         <IMAGE image="white_square.bmp" v_align="top"/>
         <IMAGE image="black_square.bmp" />
         <IMAGE image="white_square.bmp" v_align="bottom"/>
      </TABLE_ROW>
      <TABLE_ROW height="60%">
         <IMAGE image="black_square.bmp" v_align="top"/>
         <IMAGE image="white_square.bmp" />
         <IMAGE image="black_square.bmp" v_align="bottom"/>
      </TABLE_ROW>
   </TABLE>
</SKIN>