how to create table with dynamic colspans with jsf, icefaces, java and html

Explanation
Sometimes colspan attribute is very usefull.
For programmer that used to read and write HTML tags, table-tr-td is common knowledge with tons of examples and tips.

New to Java, JSF, Icefaces? Here is some links to start with:
Why and when use ICEFACES?
First steps with jsf and java

We use simplest HTML tags, together with "ui:repeat" tag, which loops on 'tr' element.
colspan can be calculated depended on type of row in the table or based on some field in the row
Pros: every programmer, even not-jsf, can understand it. CSS is transparent: what you see is what you get.
Customization is simple too.
Use you favorite HTML editor, or JSF editor together with CSS tools to customize every aspect of this table, its easy!
fragment from TableWithDynamicColspans.jspx

	<table border="1"> 
		<caption>table with dynamic colspans</caption> 
		<tr> 
			<td>Name</td> 
			<td>Phone</td> 
			<td>Email</td> 
		</tr> 
		<ui:repeat value="#{tableWithDynamicColspansBean.rows}" var="row"> 
			<tr> 
				<td><ice:outputText value="#{row.name}" /></td> 
				<!-- colspan value here is dynamic --> 
				<td colspan="#{row.email == null? 2 : 1}"><ice:outputText 
					value="#{row.phone}" /></td> 
				<ui:fragment rendered="#{row.email != null}"> 
					<td><ice:outputText value="#{row.email}" /></td> 
				</ui:fragment> 
			</tr> 
		</ui:repeat> 
	</table> 

This is main entry point. Its referenced by 'tableWithDynamicColspansBean' from faces-config.xml
com.gpost.jsfexamples.tableWithDynamicColspans.TableWithDynamicColspansBean

package com.gpost.jsfexamples.tableWithDynamicColspans;

import java.util.ArrayList;
import java.util.List;


/*
* Java class for example 'table with dynamic colspans'
* referenced as 'tableWithDynamicColspansBean' from faces-config.xml, 
* used in 'TableWithDynamicColspans.jspx'
*/
public class TableWithDynamicColspansBean{
	List<ManWithPhone> rows = null;
	
	public List<ManWithPhone> getRows() {
		if (rows == null) {
			rows = new ArrayList<ManWithPhone>();
			// create same sample data...
			rows.add(new ManWithPhone("Gary", "1234-6767", "foo@hotmail.com"));	
			rows.add(new ManWithPhone("Bob", "5678-4553", null));
			rows.add(new ManWithPhone("John", "5698-4333", null));
		}
		return rows;
	}
} // end of class

This class defines data in row.
com.gpost.jsfexamples.tableWithDynamicColspans.ManWithPhone

package com.gpost.jsfexamples.tableWithDynamicColspans;

public class ManWithPhone {
	public ManWithPhone(String name, String phone, String email) {
		super();
		this.name = name;
		this.phone = phone;
		this.email = email;
	}

	String name;
	
	String phone;

	String email;
	
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
}

part of faces-config.xml

<managed-bean>
 <managed-bean-name>tableWithDynamicColspansBean</managed-bean-name>
 <managed-bean-class>com.gpost.jsfexamples.tableWithDynamicColspans.TableWithDynamicColspansBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>

</managed-bean>

conclusion
As we saw in this example, you can create perfect table with dynamic colspans using simple html/css, then add some binding to your java beans and you get very flexible, easily customizable data table without complexity of 'h:dataTable' component.