Tabelas

• Para criar tabelas em um documento HTML, se utiliza a tag table.
• Cada linha (row) da tabela é definida pela tag tr (table row), cada título (header) da tabela é definida pela tag th (table header) e cada dado/célula (data/cell) da tabela é definida pela tag td (table data).
• A tag td pode conter qualquer dado: textos, imagens, listas, outras tabelas, etc.
• Por padrão, o texto na tag th é negrito e centralizado, e o texto na tag td é regular e alinhado à esquerda. É possível modificar o estilo com propriedades do CSS.

Exemplo de uma tabela simples:

Bordas

Para adicionar uma borda na tabela, utilize a propriedade CSS border na tag que você deseja adicionar a borda.

Exemplo 1: tabela com borda na tag table.

Exemplo 2: tabela com borda nas tags th.

Exemplo 3: tabela com borda nas tags td.

Exemplo 4: tabela com borda em todas as tags.

Para evitar bordas duplas como no exemplo acima, utilize a propriedade CSS border-collapse com o atributo collapse nas tags que você deseja unir.

Você pode mudar o background de cada célula da tabela, ao mesmo tempo em que muda a cor da borda para a mesma cor do background da sua página. Isso vai dar a impressão de que a borda é invisível.

Com a propriedade CSS border-radius as bordas ficam arredondadas.

Exemplo de bordas arredondadas apenas nas células (tags th e td):

Por padrão, o texto na tag th é centralizado, e o texto na tag td é alinhado na esquerda. Para mudar o alinhamento do texto, utilize a propriedade CSS text-align na tag que você deseja modificar.

Com a propriedade CSS border-style é possível modificar a aparência da borda. Os atributos da propriedade border-style são os seguintes:

Com a propriedade CSS border-color, você consegue mudar a cor da borda.

Tamanho das bordas

O tamanho dos elementos de uma tabela (linha, coluna e a tabela inteira) podem ser modificados utilizando a propriedade CSS width e height dentro das tags que você deseja modificar.

Utilizando a porcentagem como unidade de medida, você define qual será o tamanho do elemento da tabela em relação ao seu elemento-parente. Você também pode utilizar pixels (px) como unidade de medida.

elemento-parente é a tag que está acima na hierarquia. Por exemplo:

• O elemento-parente da tag table é a tag body.
• O elemento-parente da tag tr é a tag table.
• O elemento-parente das tags th e td é a tag tr.

Cabeçalho das Tabelas

As tabelas podem ter cabeçalhos (headers) tanto nas colunas quanto nas linhas da tabela.

Para utilizar cabeçalhos nas linhas, é só utilizar a tag th ao invés de td ao iniciar uma nova linha da tabela.

Você pode adicionar um título na tabela utilizando a tag caption. Essa tag deve ser colocada logo abaixo da tag table, e antes da primeira linha (tag tr).

Padding & Spacing

Padding

• "Padding" é o espaço entre o texto da célula e a borda da célula.
• Por padrão o padding é 0. Para modificar o tamanho, utilize a propriedade CSS padding nas tags th e td.
• Para modificar o padding em apenas um dos lados da célula, utilize as propriedades CSS: padding-top, padding-bottom, padding-left e padding-right.

Spacing

• "Spacing" é o espaço entre a borda das células e as suas bordas vizinhas.
• Por padrão, o spacing é de 2 pixels (2px). É possível mudar esse valor utilizando a propriedade CSS border-spacing na tag table.

Colspan & Rowspan

As tabelas podem possuir células que compreendem mais de uma coluna ou linha.

Colspan

• Para fazer uma célula compreender mais de uma coluna, utilize a propriedade colspan das tags th e td.
• NOTA: Essa não é uma propriedade CSS, mas uma propriedade das próprias tags th e td.

Rowspan

• Para fazer uma célula compreender mais de uma linha, utilize a propriedade rowspan das tags th e td.
• NOTA: Essa não é uma propriedade CSS, mas uma propriedade das próprias tags th e td.

Efeito Zebra

Linhas de Zebra

Se você adicionar uma cor de background em linhas alternadas, você produz um "efeito zebra" na sua tabela.

Para alternar as cores da tag tr alternadamente de forma automática, você pode utilizar a seguinte formatação CSS dentro da tag style (que se localiza dentro da tag head):

tr:nth-child(even) {background-color: yellow;}

Essa formatação vai formatar apenas as linhas pares (even) conforme desejado. Para formatar apenas as linhas ímpares utilize o critério (odd):

tr:nth-child(odd) {background-color: yellow;}

Colunas de Zebra

Para criar o mesmo "efeito zebra" verticalmente, formate a cor do background das colunas de forma alternada.

Para alternar as cores da tag td e th alternadamente de forma automática, você pode utilizar a seguinte formatação CSS dentro da tag style (que se localiza dentro da tag head):

td:nth-child(even), th:nth-child(even) {background-color: yellow;}

Essa formatação vai formatar apenas as colunas pares (even) conforme desejado. Para formatar apenas as colunas ímpares utilize o critério (odd):

td:nth-child(odd), th:nth-child(odd) {background-color: yellow;}

Linhas e Colunas de Zebra

Utilizando a formatação alternada do background tanto nas linhas como nas colunas, você produz um efeito de "malha".

Você pode adicionar transparência nas cores do background, produzindo um efeito de entrelaçamento nas cores que se cruzarem.

Hover

Utilizando a propriedade CSS hover da tag tr (dentro da tag style), é possível inserir a cor que irá marcar a linha que está sendo posiciado o mouse.

Colgroup

• Utilize a tag colgroup se você deseja formatar apenas as primeiras colunas da tabela.
• A tag colgroup deve ser inserida dentro da tag table, depois da tag caption e antes de qualquer elemento da tabela (tr, th e td).
• Dentro da tag colgroup, cada grupo de colunas deve ser especificado com uma tag col.
• O atributo span da tag col especifica o número de colunas que devem ser formatadas.
• Utilize o atributo style do CSS dentro da tag col para formatar o grupo de colunas.
• Apenas as seguintes propriedades CSS irão funcionar dentro da tag col: width, visibility, background e border.
• Se você deseja deixar alguma borda anterior sem formatação, crie uma tag col vazia (sem a formatação) e especifique o número de colunas sem formatação no atributo span.
• Você pode esconder colunas utilizando a função visibility: collapse do CSS.

<- Voltar