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
bfHorizontalTable matches an Element that represents a XForms group element with 'bf:horizontalTable' appearance
xfGroupLabel matches the label of a group
bfHorizontalTableLabel matches the label of a control used as table header
bfTableCol1 matches the first column of the table. Subsequent columns have the same class but with their respective column number (counted from left to right)
bfTableLabel matches a label of a nested 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 with 'bf:horizontalTable' appearance

A group with the custom appearance 'bf:horizontalTable' use an HTML table for displaying all child controls in one row.

This layout allows nesting of other groups. A nested group will take one column within the horizontal table.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

Group with 'horizontalTable' 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 id="group1" ref="grouped-data/group" appearance="bf:horizontalTable">
        <xf:label>Group with 'horizontalTable' appearance</xf:label>
        <xf:input id="input1" 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 id="input2" 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 id="input3" 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 id="input4" 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>