# Modelo de blocos HTML de agrupamento

Código fonte HTML:

```HTML
<div style="width: 100%; border-width: 0px 0px 3px 0px;border-style: groove ; border-color: #000000;" >
   <table style="width: 100%;background-color:transparent "  >
      <tbody>
         <tr>
            <td style="text-align: center; vertical-align: middle; background-color: rgb(102, 0, 170); padding: 3px;border-radius: 20px 20px 0px 0px;"><big><span style="color: #fdfdfd; font-weight: bold;">CABEÇALHO</span></big></td>
         </tr>
      </tbody>
   </table>
</div>
```

Exemplo de uso aplicação:

[![image-1637948774882.png](http://kb.ema.net.br/uploads/images/gallery/2021-11/scaled-1680-/image-1637948774882.png)](http://kb.ema.net.br/uploads/images/gallery/2021-11/image-1637948774882.png)

- - - - - -

Outra forma pensando em boas praticas e facilidade em manutenção do codígo CSS seria a seguinte forma:

```HTML
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
<style>
    * {
        /*font-family: 'Poppins', sans-serif;*/
        font-family: 'Roboto', sans-serif;
        padding: 0;
        margin: 0;
        outline: 0;
    }
    .cor-de-fundo {
        background-color:#5E2981;  /* Cor do fundo do agrupador */
    }
    .borda-inferior {
        border-bottom:  3px solid #B088C9;  /* Borda inferior do agrupador utilizando cor HEX, porém poderia ser utilizado o padrão ex: purple, white ... */
    }
    .container {
        color:#fff;
        line-height:1.5;
        border-top-left-radius:.4rem;
        border-top-right-radius:.4rem;
        width: 100%;
        text-align: center; 
    }
    .container p {
        padding: 5px 10px;
        font-weight: bold;
        font-size: 1.2em;
    }
</style>
<div class="container cor-de-fundo borda-inferior ">
    <p>
        Texto do agrupador  /*Texto que irá aparecer como "titulo" no agrupador */
    </p>
</div>    
```

Exemplo de uso aplicação:

[![image-1637948841497.png](http://kb.ema.net.br/uploads/images/gallery/2021-11/scaled-1680-/image-1637948841497.png)](http://kb.ema.net.br/uploads/images/gallery/2021-11/image-1637948841497.png)

**\*\*\* nas versões mais recentes do software, já existe a opção de agrupador padrão do sistema, semelhante ao que está mostrado na imagem acima.**