Hi all,
I have implemented an extendedDataTable in my application, however, upon rendering it is appearing unformatted. I'm wondering why my table looks like such a mess?

Here is my xhtml and attached is a screenshot of what is rendered:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
><
html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"><
ui:composition>
<h:form id="form">
<h:panelGrid columns="2" columnClasses="top , bottom">
<rich:extendedDataTable id="hotels" value="#{hotels}" var="h" rendered="#{hotels.rowCount > 0}">
<rich:column sortable="false" id="col_1" label="Hotel Name">
<f:facet name="header">
<h:outputText value="Hotel Name" id="hotel_name" />
</f:facet>
<h:outputText value="#{h.name}" id="hotel_name" />
</rich:column>
<rich:column sortable="false" id="col_2" label="ID">
<f:facet name="header">
<h:outputText value="Hotel ID" id="hotel_id" width="100px"/>
</f:facet>
<h:outputText value="#{h.id}" id="hotel_id" />
</rich:column>
<rich:column sortable="false" id="col_3" label="Address">
<f:facet name="header">
<h:outputText value="Hotel Address" id="hotel_address" />
</f:facet>
<h:outputText value="#{h.id}, #{h.city}, #{h.state}, #{h.country}" id="hotel_address" />
</rich:column>
<rich:column sortable="false" id="col_4" label="Zip">
<f:facet name="header">
<h:outputText value="Hotel Zip" id="hotel_zip" />
</f:facet>
<h:outputText value="#{h.zip}" id="hotel_zip" />
</rich:column>
</rich:extendedDataTable>
</h:panelGrid>
</h:form> </
ui:composition> </
html>