Como criar uma tabela em html

ThiTeaches você como criar uma tabela de informações básica usando HTML, bem como adicionar elementos úteis, como bordas à tabela.

Passos

Parte 1 de 2:
Criando uma tabela
  1. Imagem intitulada Criar uma tabela em HTML Step 1
1. Abra um programa de edição de texto. Você normalmente usará o Notepad ++ no Windows e no Textedit no Mac. Para encontrar esses programas:
  • janelas - Abrir Começar
Imagem intitulada Windowsstart.jpg
, modelo bloco de anotações no início e clique em Bloco de anotações No topo da janela.
  • Mac - Abrir Holofote
    Imagem intitulada MacSpotlight.jpg
    , digitar Textedit, e clique Textedit abaixo do campo de pesquisa dos holofotes.
  • Criar uma tabela em HTML Step 2
    2. Digite e pressione ↵ Enter. O THETAG indica o início de uma tabela e pressionar ↵ Digite solicita seu editor de texto para iniciar uma nova linha.
  • Ao usar HTML, você sempre tem que pressionar ↵ ENTER depois de criar uma linha de código para passar para a próxima linha.
  • Criar uma tabela em HTML Step 3
    3. Digite e pressione ↵ Enter. Este comando indica que você estará criando um elemento específico da tabela.
  • Criar uma tabela em HTML Step 4
    4. Adicione uma coluna à sua tabela. Digite para indicar uma coluna, digite o rótulo para a coluna, digite para fechar a coluna e pressione ↵ Enter.
  • Por exemplo: para criar uma coluna de tabela rotulada "Número de cães", você digitaria Número de cães em seu editor de texto.
  • Criar uma tabela em HTML Step 5
    5. Adicione mais colunas. Dependendo de quantas colunas você quer que sua mesa tenha, esta etapa varia. Depois de adicionar todas as colunas que você deseja usar, prossiga para a próxima etapa.
  • Colunas são criadas da esquerda para a direita.
  • Criar uma tabela no Etapa HTML 6
    6. Digite e pressione ↵ Enter. Este comando indica que todas as colunas da tabela foram criadas e fecha essa seção do código da tabela.
  • Criar uma tabela em HTML Step 7
    7. Digite novamente e pressione ↵ Enter. Você agora adicionará suas linhas à sua mesa.
  • Criar uma tabela em HTML Step 8
    8. Adicione uma célula à sua mesa. Digite para indicar uma informação abaixo da primeira coluna, digite as informações, digite para fechar a célula e pressione ↵ ENTER.
  • Por exemplo: para criar uma célula com o número "23" nele, você digitaria 23 em seu editor de texto.
  • Criar uma tabela em HTML Step 9
    9. Adicione mais células à sua mesa. O número de células em uma linha deve correlacionar-se ao número de colunas - por exemplo, se você tiver três colunas, você deve ter três células seguidas. Depois de criar uma linha inteira, você pode prosseguir.
  • Criar uma tabela em HTML Step 10
    10. Feche a linha atual. Digite e pressione ↵ ENTER para fechar a linha. Neste ponto, você pode abrir outra linha digitando e pressionando ↵ Enter, adicionando células individuais e, em seguida, fechando a linha.
  • Criar uma tabela em HTML Step 11
    11. Feche sua mesa. Abaixo da linha final da tabela, digite em . Isso indica o final da tabela.
  • Criar uma tabela em HTML Etapa 12
    12. Revise sua tabela. Sua mesa deve parecer algo assim:
  • Dia
  • Mês
  • Ano
  • 4


  • Março
  • 1990
  • 27
  • julho
  • 1993
  • Criar uma tabela em HTML Passo 13
    13. Salve seu trabalho. Aperte Ctrl+S (Windows) ou ⌘ comando+S (Mac) para salvar seu documento e insira um nome para o documento e clique em Salve  quando solicitado.
    • Parte 2 de 2:
    Adicionando modificadores de tabela
    1. Criar uma tabela em HTML Etapa 14
    1. Alargar sua tabela. Substitua o thetag no topo da folha com e então digite
     estilo ="Largura: 100%"> na tag. Certifique-se de manter um espaço entre "tabela" e "estilo".
    • O resultado final deve ficar assim:
    • Você pode experimentar com a porcentagem. Por exemplo, digitando 50 em vez de 100 resultará em uma mesa meio como-toda.
  • Imagem intitulada Criar uma tabela em HTML Etapa 15
    2. Crie bordas para sua mesa. Crie um espaço no topo do documento acima do THETAG, então faça o seguinte:
  • Digite e pressione ↵ Enter.
  • Digitar tabela, th, td { e pressione ↵ Enter.
  • Digitar Borda: 1px preto sólido- e pressione ↵ Enter.
  • Digitar Colapso de fronteira: colapso- e pressione ↵ Enter. Pule esta linha se você quiser que suas bordas tenham duas linhas em vez de um.
  • Digitar } e pressione ↵ Enter.
  • Digite e pressione ↵ Enter.
  • Criar uma tabela em HTML Etapa 16
    3. Adicione um rótulo para sua tabela. Crie um espaço abaixo do tetag, faça o seguinte:
  • Digitar
  • Digite o texto que você deseja usar (e.G., Aniversários)
  • Digite e pressione ↵ Enter.
  • Seu resultado final deve se assemelhar a isso: Aniversários

    • Pontas

    Isso ajuda a recuar seções relacionadas de código para que você possa facilmente referenciá-los mais tarde. Por exemplo, você pode recuar uma seção inteira de células.
  • Para garantir um texto negrito, você pode colocar tags ao redor do texto em questão. Por exemplo, para virar "Número de anos" para dentro "Número de anos", você digita Número de anos no editor de texto.

    • Avisos

    Lembre-se sempre de fechar comandos.
    Compartilhe na rede social:
    Semelhante