Centering table cell content in panel grid

Question

How can I center the content of the cells in a table grid so it would end up something like this:
<table>
<tr>
<td align="center">

Answer 1

You can do that using stylesheet. You can look at the
repeater demo example for ideas. The corresponding
stylesheet class is components/web/stylesheet.css .
Hope this helps.
-JayashriI think we need more powerfull layout oriented components.
XAML, XUL, ADF all of them have powerfull layout components library.
Maybe it's time start working in this direction.
I'm sure that JSF must provide in near future more powerfull layout related components library, no doubt here!
After that it will be possible to remove from styles classes and jsp code everything that was used for layout.
Layout components will take care about align components, preferred size and etc.
We need minimize number of style classes.
That possible if you will make them more universal.
But no way to make universal style classes with layout related attributes inside them.
Take a look on simple layout case:
<s:row align="opposite" styleClass="footerPage">
     <h:outputText value="#{bundle.copyright}"/>
     <h:outputText value="#{bundle.terms}"/>
</s:row>
public class RowRenderer extends HtmlBasicRenderer {
public RowRenderer() {
super();
public boolean getRendersChildren() {
return true;
public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
if (!component.isRendered())
return;
ResponseWriter writer = context.getResponseWriter();
writer.startElement("div", component);
writeIdAttributeIfNecessary(context, writer, component);
String styleClass = (String) component.getAttributes().get("styleClass");
if (styleClass != null) {
writer.writeAttribute("class", styleClass, "styleClass");
Util.renderPassThruAttributes(writer, component);
public void encodeChildren(FacesContext context, UIComponent component) throws IOException {
if (!component.isRendered())
return;
Iterator kids = null;
String style = null;
int i = 0;
String align = (String) component.getAttributes().get("align");
if (align == null) align = "start";
if (null != (kids = getChildren(component))) {
while (kids.hasNext()) {
UIComponent child = (UIComponent) kids.next();
if (!child.isRendered())continue;
style = (String) child.getAttributes().get("style");
style = (style != null) ? style + ";" : "";
if ( (align == "start") || (align == "left"))
style += "float: left;";
else
if ( (align == "end") || (align == "right"))
style += "float: right;";
else
if (align == "opposite") {
if ((i % 2) == 0)
style += "float: left;";
else
style += "float: right;";
child.getAttributes().put("style", style);
encodeRecursive(context, child);
i++;
public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
if (context == null || component == null) {
throw new NullPointerException(Util.getExceptionMessageString(
Util.NULL_PARAMETERS_ERROR_MESSAGE_ID));
if (!component.isRendered())
return;
ResponseWriter writer = context.getResponseWriter();
writer.endElement("div");
It's good idea in many layout situations to use tableless layout.
Row component just simple demonstration how it work.
There are some problems with implementation and using tableless layout
but at least in some cases it's good choise.
I'm ready to provide plenty suggestions in area of creating and using layout components.
Just don't know if you have interest to discuss that matter.
Vladimir