Dúvida de alinhamento com <h:panelGrid>

Pessoal,

tô iniciando em JSF e quando exibo um <h:panelGrid> conforme abaixo, as células estão desalinhadas e bagunçadas. Gostaria que ficassem alinhadas tipo no HTML,

.
          <h:panelGrid columns="2" bgcolor="#FAFAD2" width="75%">
            <f:facet name="header">
              <h:outputText value="Cadastro de Usuários" />
            </f:facet>

            <h:outputText value="Cód. usuário:" />
            <h:inputText size="15" maxlength="15" id="id_usuario" value="#{usuariosView.usuario.id_usuario}" required="true" />
            <h:message for="id_usuario" />

            <h:outputText value="Usuário:" />
            <h:inputText size="50" maxlength="50" id="usuario" value="#{usuariosView.usuario.usuario}" required="true" />          
            <h:message for="usuario" />

            <h:outputText value="Senha:" />
            <h:inputSecret size="50" maxlength="50" id="senha" value="#{usuariosView.usuario.senha}" required="true" />          
            <h:message for="senha" />

            <h:outputText value="Status:" />
            <h:inputText size="1" maxlength="1" id="status_usuario" value="#{usuariosView.usuario.status_usuario}" />          
            <h:message for="status_usuario" />
          </h:panelGrid>

Alguém pode ajudar?

Obrigado.

Ve se isso ajuda
http://exadel.com/web/portal/jsftags-guide

Very useful.

Thanks malokas.

Cara,

somente as duas colunas da primeira linha ficaram alinhadas, à direita e à esquerda respectivamente.

Tô tentando usar um código aqui do GUJ mesmo:

    <style>
      .coluna1 {text-align: right}
      .coluna2 {text-align: left}
    </style>

<h:panelGrid columns="2" bgcolor="#FAFAD2" width="100%" columnClasses="coluna1, coluna2">

<h:outputText value="Cód. usuário:" styleClass="coluna1" OU style="coluna1" />

Afinal, devo usar “style” ou “styleClass” ?