aaa bbb ccc ddd

CSS
Hover the classes to see matching element(s) in the example
xfContainer matches any Element that represents a XForms group | repeat | switch element
bfVerticalTable matches an Element that represents a XForms group element with 'bf:verticalTable' appearance
xfGroupLabel matches the label of a group
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control
xfReadOnly matches a xforms control that is currently readonly
xfReadWrite matches a xforms control that is currently writable
xfRequired matches a xforms control that is currently required
xfOptional matches a xforms control that is currently optional
xfEnabled matches a xforms control that is currently relevant (enabled)
xfDisabled matches a xforms control that is currently disabled (can't be visualized here as the control gets hidden)
xfValid matches a xforms control that is currently valid
xfInvalid matches a xforms control that is currently invalid

# group rendered as vertical table

A group with the custom appearance 'bf:verticalTable' is largely the same as a full group except that is uses an HTML table for left/right aligning labels and controls.

This in some cases makes it easier to nest groups as well as optimize the space the respective labels take. With CSS you need to specify a fixed width for the labels which is problematic when labels differ a lot in length. Further labels that do not fit the specified width may corrupt your layout. The use of tables avoids those problems.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Group with 'verticalTable' appearance A-label a hint to A-label an alert to A-label B-label a hint to B-label an alert to B-label C-label a hint to C-label an alert to C-label D-label a hint to D-label an alert to D-label
readonly relevant valid

## XForms Markup

    <xf:group ref="grouped-data/group" appearance="bf:verticalTable">
        <xf:label>Group with 'verticalTable' appearance</xf:label>
        <xf:input ref="a">
            <xf:label>A-label</xf:label>
            <xf:hint>a hint to A-label</xf:hint>
            <xf:alert>an alert to A-label</xf:alert>
        </xf:input>
        <xf:input ref="b">
            <xf:label>B-label</xf:label>
            <xf:hint>a hint to B-label</xf:hint>
            <xf:alert>an alert to B-label</xf:alert>
        </xf:input>
        <xf:input ref="c">
            <xf:label>C-label</xf:label>
            <xf:hint>a hint to C-label</xf:hint>
            <xf:alert>an alert to C-label</xf:alert>
        </xf:input>
        <xf:input ref="d">
            <xf:label>D-label</xf:label>
            <xf:hint>a hint to D-label</xf:hint>
            <xf:alert>an alert to D-label</xf:alert>
        </xf:input>
    </xf:group>