Curso de Design Responsivo Aula 13 Criando tabelas e estilizando com cores alternadas

Nessa vídeo aula vamos aprender como criar tabelas com HTML e realizar a estilização dom cores alternadas utilizando CSS. De uma maneira geral, tabelas são uma maneira de exibir e organizar conteúdo. Facilitam, e muito, a vida de quem tem muita informação e seu uso, no dia-a-dia, são algo bem, mas bem extenso mesmo.

O comando para se inserir uma tabela é <table> para iniciar uma linha devemos introduzir a tag <tr> e para uma célula (alguns preferem dizer coluna) <td>. Todos estes comandos são encerrados como </table>, </td> e </td> respectivamente.

Como criar linhas?

<table>
      <tr><td>Linha </td></tr>
</table>

Para adicionar mais linhas basta repetir <tr><td>Linha </td></tr> quantas vezes quiser. Na tag tr, o "t" é de table e o "r" de row, que também significa linha, ou fileira. E cada vez que colocamos o par de tags <tr> </tr> estamos criando uma linha em nossa tabela.

Como criar colunas?

Assim como as linhas, cada coluna é definida pelo par: <td> </td>. Portanto, se quisermos criar 2 colunas, colocamos duas tags dentro de cada linha, e nosso código HTML com uma linha e duas colunas é:

<table>
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> </tr>
</table>

Agora vamos criar uma tabela 2x2, ou seja, duas linhas e duas colunas:

<table>
   <tr><td>Linha 1, Coluna 1</td> <td> Linha 1, Coluna 2 </td> </tr>
   <tr><td>Linha 2, Coluna 1</td> <td> Linha 2, Coluna 2 </td> </tr>
</table>

Para criar mais linhas e colunas você deve seguir a lógica já apresentada.

O atributo colspan

O "col" vem de column (coluna) e span quer dizer expandir, abranger. Ou seja, <colspan> é para expandirmos células para que fiquem do tamanho de quantas colunas quisermos.

Exemplo

<table>
  <tr><td colspan="2">Linha ocupando 2 colunas</td></tr>
  <tr><td>Coluna 1</td><td> Coluna 2</td></tr>
</table>

           

O atributo rowspan

Utilizamos o atributo rowspan para fazer uma célula ocupar o tamanho de várias linhas. Lembre-se, row quer dizer linhas e span expandir, abranger.

Exemplo

<table>
  <tr><td rowspan="2">Coluna</td><td>Linha 1</td></tr>
  <tr><td>Linha 2</td></tr>
</table>

           

Código HTML desenvolvido na vídeo aula

<section class="fundoVerdeBandeira limpa">
            <div class="conteudo">
                <div class="caixa-g-6 caixa-m-6">
                    <div class="caixa">
                        <h2>denuncie maus tratos</h2>
                        <p>Caso você veja ou saiba de maus tratos cometidos contra qualquer tipo de animal, não pense duas vezes, vá à Delegacia de Polícia mais próxima para lavrar Boletim de Ocorrência. Abandono e maus tratos à animais é crime.</p>
                        <table>
                            <thead>
                                <tr>
                                    <th>Cães</th>
                                    <th>Gatos</th>
                                    <th>Motivos</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td colspan="3">
                                        A pena prevista pelo Art. 32 da Lei de Crime Ambientais é de detenção de 3 meses a 1 ano e multa. A pena prevista pelo Art. 164 do Código Penal é de detenção, de 15 (quinze) dias a 6 (seis) meses, ou multa.
                                    </td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <td>18,5%</td>
                                    <td>37,7%</td>
                                    <td>Sujar a casa</td>
                                </tr>
                                <tr>
                                    <td>12,6%</td>
                                    <td>11,4%</td>
                                    <td>Destrutivo fora de casa</td>
                                </tr>
                                <tr>
                                    <td>12,1%</td>
                                    <td>16,9%</td>
                                    <td>Agressivo com as pessoas</td>
                                </tr>
                                <tr>
                                    <td>10,9%</td>
                                    <td>6,9%</td>
                                    <td>Requer muita atenção</td>
                                </tr>
                                <tr>
                                    <td>20,0%</td>
                                    <td>14,6%</td>
                                    <td>Destrutivo dentro de casa</td>
                                </tr>
                                <tr>
                                    <td>9,7%</td>
                                    <td>9,0%</td>
                                    <td>Morde</td>
                                </tr>
                                <tr>
                                    <td>11,4%</td>
                                    <td>4,6%</td>
                                    <td>Ativo de mais</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

Código CSS desenvolvido na vídeo aula

.fundoVerdeBandeira {
    color: #9acd32;
    background-color: #228b22
}
table {
    color: #092000;
    width: 100%;
}
table thead {
    background: #007138;
    color: #00f400
}
table tfoot {
    font-size: 0.8em;
    background: #009b4e
}
table tr th {
    border: 1px solid #007d3f;
    padding: 15px
}
table tr td {
    border: 1px solid green;
    padding: 15px
}
table tbody tr:nth-child(2n+1){
    background: #2cb42c
}

 



Hospedagem Profissional de Sites