What is the different between col and colspan?

What's the difference between col and colspan and how to use then in OpenERP?

Every form view container (form itself, group, page, I think there are more) in OpenERP consists of 4 columns to start with.

<form>
┌───┬───┬───┬───┐
│ 1 │ 2 │ 3 │ 4 │
└───┴───┴───┴───┘
</form> 

Every <field> takes 2 columns: label & input field

<field name="input" />
<field name="inpt2" />
┌───────┬───────┬───────┬───────┐
│ label │ input │ labl2 │ inpt2 │
└───────┴───────┴───────┴───────┘ 

With colspan, you can widen items.

<field name="inpt4" colspan="4"/>
<field name="input" />
<field name="inpt2" />
┌───────┬───────────────────────┐
│ labl4 │ inpt4_______________  │
├───────┼───────┬───────┬───────┤
│ label │ input │ labl2 │ inpt2 │
└───────┴───────┴───────┴───────┘

<field name="input" />
<field name="inpt4" colspan="4"/>
<field name="inpt2" />

┌───────┬───────┬───────┬───────┐
│ label │ input │       │       │
├───────┼───────┴───────┴───────┤
│ labl4 │ inpt4_______________  │
├───────┼───────┬───────┬───────┤
│ labl2 │ inpt2 │       │       │
└───────┴───────┴───────┴───────┘ 

When you add additional containers, like a page, you can tell OpenERP to use more or less columns.

<group col="2" colspan="2">
    <field name="a" />
    <field name="b" />
</group>
<group col="6" colspan="2">
    <field name="d" />
    <field name="e" />
    <field name="f" />
</group>
│       │       │                │                │
├───────┴───────┼────────────────┴────────────────┤
│ ┌────┬───┐    │  ┌────┬───┬────┬───┬────┬───┐   │
│ │ lb │ a │    │  │ lb │ d │ lb │ e │ lb │ f │   │
│ ├────┼───┤    │  └────┴───┴────┴───┴────┴───┘   │
│ │ lb │ b │    │                                 │
│ └────┴───┘    │                                 │
├───────┬───────┼────────────────┬────────────────┤
│       │       │                │                │
  

source

Need more info?

This documentation page has been extracted from the Q&A section where you can discuss it and get feedback.
Related question