Tabelas

Tabelas

Título da tabela
Tabela Linha 1 Tabela Tabela Tabela Tabela Grande
Linha 0 Título 1 Título 2 Título 3 Título 4
Linha 1 Conteúdo Conteúdo Conteúdo Conteúdo
Linha 2 Conteúdo Conteúdo - Conteúdo
Linha 3 Conteúdo
Linha 4 Conteúdo
Código
Ocultar Código
  • HTML
  • CSS
<div class="table-wrapper">
     <div class="lead4">Título da tabela</div>
     <table>
         <thead>
             <tr>
                 <th class="span4">Tabela Linha 1</th>
                 <th class="span2">Tabela</th>
                 <th class="span2">Tabela</th>
                 <th class="span2">Tabela</th>
                 <th class="span2">Tabela Grande</th>
             </tr>            
         </thead>
         <tbody>
             <tr>
                 <td>Linha 0</td>
                 <td>Título 1</td>
                 <td>Título 2</td>
                 <td>Título 3</td>
                 <td>Título 4</td>
             </tr>
             <tr>
                 <td>Linha 1</td>
                 <td>Conteúdo</td>
                 <td><a href="#">Conteúdo</a></td>
                 <td>Conteúdo</td>
                 <td>Conteúdo</td>
             </tr>
             <tr>
                 <td>Linha 2</td>
                 <td>Conteúdo</td>
                 <td>Conteúdo</td>
                 <td>-</td>
                 <td>Conteúdo</td>
             </tr>
             <tr>
                 <td>Linha 3</td>
                 <td colspan="4">Conteúdo</td>
             </tr>
             <tr>
                 <td>Linha 4</td>
                 <td colspan="4">Conteúdo</td>
             </tr>
         </tbody>
     </table>
 </div>
.table-wrapper .lead4{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 10px;

}



.table-wrapper table{

    width: 100%;

}

.table-wrapper table th{

    background: #808184;

    font-family: "latobold";

    font-size: 16px;

    color: #fff;

    text-align: center;

    padding: 7px 15px;

    border: 1.5px solid #fff;

    vertical-align: middle;

    line-height: normal;

}

.table-wrapper table tbody tr td{

    font-family: "latoregular";

    font-size: 14px;    

    line-height: normal;

    color: #808184;

    background: #E6E7E8;

    padding: 13px 15px;

    border: 1.5px solid #fff;

    text-align: center;

}

.table-wrapper table tbody tr td a,

.table-wrapper table tbody tr td a:hover {

    text-decoration: none;

    color: #2980B9;

}

.table-wrapper table tbody tr td:first-child{

    background: #F1F1F2;

    text-align: left;

}

.table-wrapper table tbody tr:first-child td{    

    background: #E6E7E8;    

    color: #2A2A2A;

    text-align: center;

    font-family: "latobold";

    font-size: 16px;

}

.table-wrapper table tbody tr:first-child td:first-child,

.table-wrapper table th:first-child{

    text-align: left;

}
Ícones
Listas