Tabelas HTML5

Aplicando Bordas em Tabelas

Para aplicar bordas em tabelas, você pode usar a propriedade CSS border diretamente nas células da tabela (<td>). No entanto, fazer isso manualmente para cada célula pode ser muito trabalhoso. Uma abordagem mais eficiente é definir um estilo CSS que se aplique a todas as células da tabela de uma vez. Veja o exemplo abaixo:

<style>
td{
border:solid 2px black;
padding: px 1em;
}
</style>


<table style="margin: auto;">
<tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td>D2</td>
</tr>
</table>
                    

Style border-collapse

• border-collapse: separate; Esse é o valor padrão.

<table style=" border-collapse: separate;">

separate	separate
separate	separate

• border-collapse: collapse;

<table style=" border-collapse: collapse;">

collapse	collapse
collapse	collapse

É importante lembrar que, para obter o efeito de colapso das bordas, é necessário declarar a propriedade border com o valor solid para os elementos <td> na folha de estilo.

Alinhamentos em tabela

Para alinhar o texto horizontalmente, usamos a propriedade text-align e para alinhar o texto verticalmente, usamos a propriedade vertical-align. Ambas as propriedades devem ser aplicadas diretamente nas células da tabela (<td>). Veja os exemplos abaixo:

• text-align

center	right
left	nada

Código:

<table style="height: 250px; width: 250px;">
    <tr>
        <td style="text-align: center;">center</td>
        <td style="text-align: right;">right</td>
    </tr>
    <tr>
        <td style="text-align: left;">left</td>
        <td>nada</td>
    </tr>
</table>
                    

• vertical-align

top	midle
bottom	2 estilos

Código:

<table style="height: 250px;width: 250px;">
    <tr>
        <td style="vertical-align: top;">top</td>
        <td style="vertical-align: midle;">midle</td>
    </tr>
    <tr>
        <td style="vertical-align: bottom;">bottom</td>
        <td style="vertical-align: bottom; text-align: right;"> 2 estilos</td>
    </tr>
</table>
                    

<style>
    #tabela-especifica{
        border-collapse: collapse;

        td{
        border: solid 2px red;
        padding: 5px;
        }
    }
</style>
...
<table id="tabela-especifica">
...
</table>
                

Efeito Zebrado

O efeito zebrado em tabelas é uma técnica que utiliza a pseudo-classe :nth-child para aplicar estilos alternados às linhas da tabela, facilitando a leitura dos dados. Abaixo estão algumas formas de usar essa pseudo-classe:

• :nth-child(2n): Aplica o estilo a cada segunda linha, ou seja, uma linha sim, outra não.
• :nth-child(3n): Aplica o estilo a cada terceira linha.
• :nth-child(3n-1): Divide a tabela em grupos de 3 em 3 linhas, então ele volta 1 linha nesse caso e aplica o estilo, podendo voltar mais que 3 e, nesse caso, ele aplica o estilo no grupo anterior.
• :nth-child(odd): Aplica o estilo às linhas ímpares.
• :nth-child(even): Aplica o estilo às linhas pares.

Exemplo:

O estilo CSS para aplicar o efeito zebrado é:

tbody>tr:nth-child(3n-1) {
    background-color: rgba(0, 0, 0, 0.158);
}
                    

Fixar Cabeçalho

Assim como no Excel, onde podemos congelar a primeira linha da tabela para manter os títulos das colunas visíveis, podemos fazer o mesmo em HTML. Para isso, basta aplicar o estilo position: sticky; e top: 0; na linha que deseja fixar. Veja o exemplo abaixo:

O código HTML para criar essa tabela é:

    <thead style="position: sticky; top: 0;">

Neste exemplo, o estilo foi aplicado diretamente na tag <thead>, mas você também pode aplicar o estilo na tag <tr> para obter o mesmo efeito.

OBS.: Caso fique um espaço entre o navegador e o <thead>, você pode ajustar o valor de top com valores negativos como: top: -2px; até que o espaço desapareça.

Tabela Responsiva

Criar tabelas responsivas é uma tarefa simples. Basta envolver a tabela em uma <div> e aplicar a classe responsiva a essa <div>. No estilo CSS, defina a propriedade overflow-x: auto; para a <div>. Veja o exemplo abaixo:

O código HTML para criar essa tabela é:

    <div style="overflow-x: auto; max-width: 400px; margin: auto;">
        <table>
            ...
        </table>
    </div>
                

OBS.: A largura (width) foi definida para exemplificar como a tabela se ajusta.

Quando você usa uma tabela dentro de um contêiner, a propriedade `position: sticky` pode parar de funcionar. Isso ocorre porque o elemento pai do elemento sticky precisa ter uma altura definida para que o comportamento sticky funcione corretamente. Se o contêiner não tiver uma altura definida ou se houver overflow, o navegador pode não conseguir calcular corretamente a posição sticky.

Scope

O atributo scope é usado no <th> para indicar se ele é o título de uma linha, coluna ou grupo de linhas ou colunas. Isso é importante para melhorar o SEO e a acessibilidade da tabela.

• scope="col": Usado para títulos de colunas
• scope="colgroup": Usado quando o título abrange mais de uma coluna
• scope="row": Usado para títulos de linhas
• scope="rowgroup": Usado quando o título abrange mais de uma linha

Exemplo de tabela semântica:

Código HTML:

                    <table>
                        <caption>Alunos e suas notas</caption>
                        <thead>
                        <tr>
                <th colspan="4" scope="colgroup">Turma Bravo</th>
                        <tr>
                <th scope="col">Aluno</th>
                <th scope="col">Nota 1</th>
                <th scope="col">Nota 2</th>
                <th scope="col">Média</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                <td>João</td>
                <td>8,5</td>
                <td>7,0</td>
                <td>7,75</td>
                        </tr>
                        <tr>
                <td>Maria</td>
                <td>9,0</td>
                <td>8,5</td>
                <td>8,75</td>
                        </tr>
                        <tr>
                <td>Carlos</td>
                <td>7,5</td>
                <td>6,0</td>
                <td>6,75</td>
                        </tr>
                        <tr>
                <td>Ana</td>
                <td>8,0</td>
                <td>7,5</td>
                <td>7,75</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                <th scope="row">Média da Turma</th>
                <td colspan="3">7,75</td>
                        </tr>
                        </tfoot>
                    </table>
                    

Atributo para col

Assim como as tags <td> e <th> possuem os atributos colspan e rowspan para mesclar células, a tag <col> possui o atributo span. Esse atributo permite aplicar o mesmo estilo a várias colunas adjacentes.

O uso do atributo span é simples. Veja o exemplo abaixo:

<table>
    <colgroup>
        <col class="A" style="background-color: aquamarine;">
        <col class="B" span="2" style="background-color: blueviolet;">
        <col class="C" style="background-color: rgb(103, 134, 201);">
        <col class="D" style="background-color: rgb(206, 214, 157);">
    </colgroup>
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
        <td>D3</td>
    </tr>
    <tr>
        <td>A4</td>
        <td>B4</td>
        <td>C4</td>
        <td>D4</td>
    </tr>
</table>
                

Resultado

Repare que a coluna com a classe "B" expandiu para duas colunas, aplicando o estilo de fundo azul-violeta a ambas. A coluna com a classe "D" não teve seu estilo aplicado, pois a coluna "B" ocupou seu espaço.