As tabelas HTML padrão parecem bastante desanimadoras - incremente-as com alguns efeitos CSS de boa aparência.

Adicionar uma tabela ao seu site é uma maneira útil de apresentar grandes quantidades de informações com clareza. As tabelas também fornecem um uso eficiente do espaço e permitem que você leia e compare dados complexos com mais facilidade.

Você pode criar tabelas para serem visualmente mais atraentes usando CSS. Isso também pode melhorar a experiência geral do usuário em seu site.

Design Moderno de Linhas e Colunas Simples

Você pode adicionar um design de tabela simples com linhas e colunas únicas e sem células mescladas. Estilizar a tabela também garante que sua página da Web seja atraente para o usuário. Além do estilo de tabela, existem outros efeitos legais de HTML e Layouts de sites de exibição CSS você pode adicionar ao seu site.

Você pode visualizar o código para este exercício em seu repositório GitHub.

  1. Em um novo arquivo HTML, adicione a estrutura básica do código HTML:
    html>
    <html>
    <cabeça>
    <título>minha mesa simplestítulo>
    cabeça>
    <corpo>

    corpo>
    html>
    2. instagram viewer
  2. Dentro do corpo, adicione tags de tabela:
    <mesa>

    mesa>
  3. O elemento da tabela HTML deve conter linha da tabela tags para cada linha dentro da tabela. A linha superior é comumente usada para cabeçalhos. Usar cabeçalho da tabela Tags HTML para representar cada coluna na tabela:
    <tr>
    <º>Cabeçalho 1º>
    <º>Cabeçalho 2º>
    <º>Cabeçalho 3º>
    tr>
  4. Adicione mais linhas abaixo da linha de cabeçalho. Usar dados da tabela Tags HTML para adicionar dados em cada célula da tabela:
    <tr>
    <td>Linha 1, Coluna 1td>
    <td>Linha 1, Coluna 2td>
    <td>Linha 1, Coluna 3td>
    tr>
    <tr>
    <td>Linha 2, Coluna 1td>
    <td>Linha 2, Coluna 2td>
    <td>Linha 2, Coluna 3td>
    tr>
    <tr>
    <td>Linha 3, Coluna 1td>
    <td>Linha 3, Coluna 2td>
    <td>Linha 3, Coluna 3td>
    tr>
    <tr>
    <td>Linha 4, Coluna 1td>
    <td>Linha 4, Coluna 2td>
    <td>Linha 4, Coluna 3td>
    tr>
    <tr>
    <td>Linha 5, Coluna 1td>
    <td>Linha 5, Coluna 2td>
    <td>Linha 5, Coluna 3td>
    tr>
  5. Adicione uma tag de estilo dentro da tag de cabeçalho. Adicione algum estilo geral à tabela, como sombras, cantos arredondados da tabela, fontes e margens:
    <estilo>
    mesa {
    colapso da fronteira: colapso;
    largura: 100%;
    cor: #333;
    família de fontes: arial, sem serifa;
    tamanho da fonte: 14px;
    alinhamento de texto: esquerda;
    raio da borda: 10px;
    transbordar: escondido;
    Sombra da caixa: 0 0 20pxrgba(0, 0, 0, 0.1);
    margem: auto;
    margem superior: 50px;
    margem inferior: 50px;
     } 
    estilo>
  6. Estilize o cabeçalho da tabela para dar a ele uma cor de fundo e texto alinhado:
    mesaº {
    cor de fundo: #ff9800;
    cor: #fff;
    espessura da fonte: audacioso;
    preenchimento: 10px;
    transformação de texto: maiúsculo;
    espaçamento entre letras: 1px;
    borda superior: 1pxsólido#fff;
    borda inferior: 1pxsólido#ccc;
    }
  7. Estilize as linhas da tabela para alternar entre as cores cinza e branco e para adicionar um efeito ao passar o mouse sobre a linha:
    mesatr:enésimo-filho (par)td {
    cor de fundo: #f2f2f2;
    }
    mesatr:flutuartd {
    cor de fundo: #ffedcc;
    }
  8. Estilize os dados dentro das células da tabela:
    mesatd {
    cor de fundo: #fff;
    preenchimento: 10px;
    borda inferior: 1pxsólido#ccc;
    espessura da fonte: audacioso;
    }
  9. Abra seu arquivo HTML para visualizar a tabela em um navegador da web:

Design de mesa de células com várias linhas

Algumas tabelas incluem colunas com linhas mescladas para formar uma célula com várias linhas.

  1. Remova todas as linhas da tabela atual, mantendo apenas a superior com os cabeçalhos:
    <mesa>
    <tr>
    <º>Cabeçalho 1º>
    <º>Cabeçalho 2º>
    <º>Cabeçalho 3º>
    tr>
    mesa>
  2. Crie uma célula com várias linhas usando o atributo rowspan. Isso expandirá essa célula pelo número especificado de linhas.
     Seção 1 
    <tr>
    <tdExpansão de linha="2">Célula multilinhatd>
    <td>Linha 1, Coluna 2td>
    <td>Linha 1, Coluna 3td>
    tr>
    <tr>
    <td>Linha 2, Coluna 2td>
    <td>Linha 2, Coluna 3td>
    tr>
  3. Ao adicionar outra linha multicelular com um valor diferente de intervalo de linhas, adicione o número correspondente de linhas da tabela tags HTML. Isso é para corresponder à altura ou número de linhas que a célula abrange. Por exemplo, se uma célula tiver uma extensão de linha de 3, você precisará adicionar três linhas às outras colunas para alinhar a tabela corretamente.
     Seção 2 
    <tr>
    <tdExpansão de linha="3">Célula multilinhatd>
    <td>Linha 3, Coluna 2td>
    <td>Linha 3, Coluna 3td>
    tr>
    <tr>
    <td>Linha 4, Coluna 2td>
    <td>Linha 4, Coluna 3td>
    tr>
    <tr>
    <td>Linha 5, Coluna 2td>
    <td>Linha 5, Coluna 3td>
    tr>
  4. Abra seu arquivo HTML para visualizar a tabela em um navegador da web:

Design de Tabela de Linha Mesclada

Semelhante às células com várias linhas, as tabelas também podem ter linhas que se mesclam em várias colunas.

  1. Remova todas as linhas da tabela atual, mantendo apenas a superior com os cabeçalhos:
    <mesa>
    <tr>
    <º>Cabeçalho 1º>
    <º>Cabeçalho 2º>
    <º>Cabeçalho 3º>
    tr>
    mesa>
  2. Adicione mais linhas de tabela à tabela. Use o atributo colspan para mesclar uma das linhas em 3 colunas:
     Seção 1 
    <tr>
    <tdestilo="cor de fundo: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>Linha 2, Coluna 1td>
    <td>Linha 2, Coluna 2td>
    <td>Linha 2, Coluna 3td>
    tr>
    <tr>
    <td>Linha 3, Coluna 1td>
    <td>Linha 3, Coluna 2td>
    <td>Linha 3, Coluna 3td>
    tr>
    <tr>
    <td>Linha 4, Coluna 1td>
    <td>Linha 4, Coluna 2td>
    <td>Linha 4, Coluna 3td>
    tr>
  3. Adicione outra linha mesclada para separar as seções da tabela:
     Seção 2 
    <tr>
    <tdestilo="cor de fundo: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>Linha 6, Coluna 1td>
    <td>Linha 6, Coluna 2td>
    <td>Linha 6, Coluna 3td>
    tr>
    <tr>
    <td>Linha 7, Coluna 1td>
    <td>Linha 7, Coluna 2td>
    <td>Linha 7, Coluna 3td>
    tr>
    <tr>
    <td>Linha 8, Coluna 1td>
    <td>Linha 8, Coluna 2td>
    <td>Linha 8, Coluna 3td>
    tr>
  4. Abra seu arquivo HTML para visualizar a tabela em um navegador da web:

Use tabelas atraentes para aproveitar ao máximo seus dados

As tabelas HTML são uma ótima maneira de exibir dados estruturados em seu site. Você pode estilizá-los com CSS para melhorar a aparência padrão. No entanto, certifique-se de não se empolgar e usar tabelas para layout - por motivos de acessibilidade, mantenha-as estritamente para dados.

Tabelas maiores podem ser trabalhosas para criar e atualizar, especialmente se você fizer uso de colunas e linhas que se estendem. Você pode escrever seu próprio código para gerar a marcação ou aproveitar as sintaxes mais amigáveis, como Markdown.