Nova tabela de registro

Como faço para adicionar nova tabela de cadastro tipo essa da imagem https://imgur.com/a/8FCfK

Código:

.ipsSteps {
    background: #E9E9E9 none repeat scroll 0% 0%;
    height: 55px;
    border-radius: 3px;
  margin-bottom: 10px;
}
.ipsSteps li:first-child {
    border-radius: 3px 0px 0px 3px;
}
.ipsSteps_title {
    display: block;
    font-size: 14px;
    padding-bottom: 4px;
}
.ipsSteps .ipsSteps_active {
    background-position: 100% 0px;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
    background-color: #097D09;
}
.ipsSteps ul li {
    float: left;
    padding: 11px 33px 5px 18px;
    color: #323232;
    background-repeat: no-repeat;
    background-position: 100% -56px;
    position: relative;
    height: 39px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
}

Código:

$(function() {
if (location.search === '?agreed=true&step=2' ) {
  $('#ucp[name="post"]:contains("Nome de usuário : *")').prepend('<div class="ipsSteps clearfix"><ul><li class="ipsSteps_active"><strong class="ipsSteps_title">Passo 1</strong><span class="ipsSteps_desc">Seus Dados</span><span class="ipsSteps_arrow"> </span></li><li class=""><strong class="ipsSteps_title">Passo 2</strong><span class="ipsSteps_desc">Confirmação</span><span class="ipsSteps_arrow"> </span></li></ul></div>');
}
if (location.search === '?agreed=true&step=2' ) {
  $('#ucp[name="post"]:contains("Confirmar senha :*")').prepend('<div class="ipsSteps clearfix"><ul><li class=""><strong class="ipsSteps_title">Passo 1</strong><span class="ipsSteps_desc">Seus Dados</span><span class="ipsSteps_arrow"> </span></li><li class="ipsSteps_active"><strong class="ipsSteps_title">Passo 2</strong><span class="ipsSteps_desc">Confirmação</span><span class="ipsSteps_arrow">&nbsp;</span></li></ul></div>');
}
});