HyperFluxCMS

Fast. Flexible. Free.

HyperFluxCMS

Tabelas

Como utilizar tabelas nas postagens com HyperCode

publicado 01/01/2025 15:13, atualizado 14/04/2026 23:17

O HyperCode suporta alguns elementos básicos de tabelas. Veja como utilizar.

Tabelas são elementos importantes para organizar certos tipos de informações. Por exemplo, tabelas de preços ou informações nutricionais sobre um alimento.

Tabelas são organizadas em Linhas e Colunas. Cada encontro entre uma linha e uma coluna é um retângulo chamado "Célula" da tabela.

A primeira linha de uma tabela normalmente contém um formato e informações diferenciadas, que explicam que tipo de informação está em cada coluna e é chamada de "cabeçalho" da tabela (ou a fins de Web Design, "header" ou "head")

Assim como em HTML, o HyperCode permite criar tabelas inserindo linhas, sendo a primeira normalmente o cabeçalho, e em cada linha inserindo as células.

Cada célula contém seu próprio conteúdo, que normalmente é texto ou número. Mas pode conter outros elementos, como links, imagens e até mesmo outras tabelas.

É importante notar que cada elemento da tabela, incluindo ela própria, deve ser "aberta" pela tag adequada e depois "fechada" pela tag correspondente, na ordem inversa: o primeiro a abrir é o último a fechar.

  1. Primeiro se abre a tabela com [table];
  2. Depois se abre a linha com [tr] ;
  3. Depois se abre uma célula com [td] ou, se for do cabeçalho, pode-se usar [th];
  4. Preenche-se a célula com seu conteúdo;
  5. Fecha-se a célula com [/td] ou [/th] ou [/];
  6. Volte ao passo 3 até terminar as células da linha;
  7. Depois de terminar as células da linha, fecha-se a linha com [/tr] ou [/];
  8. Volta-se ao passo 2 se precisar criar mais uma linha;
  9. Quando acabarem as linhas, fecha-se a tabela com [/table] ou [/].

Como a maioria tas Tags HyperCode, table, tr, th e td aceitam opcionalmente as propriedades class, style e id. Veja Class, Style, id

Exemplo:

[table]
[tr]
   [th]Produto[/]
   [th]Estoque[/]
   [th]Preço[/]
[/tr]
[tr]
   [td]Teclado multimídia[/]
   [td]12[/]
   [td]50,00[/]
[/tr]
[tr]
   [td]Mouse ótico[/]
   [td]8[/]
   [td]40,00[/]
[/tr]
[tr]
   [td]Mouse Pad[/]
   [td]12[/]
   [td]10,00[/]
[/tr]
[tr]
   [td]Caixa de Som[/]
   [td]9[/]
   [td]35,00[/]
[/tr]
[/table]

É mostrado como:

Produto Estoque Preço
Teclado multimídia 12 50,00
Mouse ótico 8 40,00
Mouse Pad 12 10,00
Caixa de Som 9 35,00

Tag [table]

A tag table marca o início de uma tabela.

Após a tag Table deve-se começar a inserir as linhas usando tr.

Depois de inserir todas as linhas deve-se informar o fim da tabela usando [/table] ou [/]

Tag [tr]

A tag tr marca o início de uma linha comum na tabela.

Após a tag tr deve-se começar a inserir as células usando td, para células normais, ou th para células do cabeçalho da tabela.

Depois de inserir todas as linhas deve-se informar o fim da linha usando [/tr] ou [/]

Tag [td]

A tag td marca o início de uma célula na tabela.

Após a tag td deve-se começar a inserir o conteúdo da célula, que normalmente é texto mas pode ser ou conter elementos diversos como imagens e links.

Depois de inserir todo conteúdo da célula, deve-se informar o fim da célula [/td] ou [/].

Tag [th]

A tag th marca o início de uma célula de uma linha do tipo Header ou cabeçalho da tabela

Após a tag th deve-se começar a inserir o conteúdo da célula, que normalmente é texto mas pode ser ou conter elementos diversos como imagens e links.

Depois de inserir todos as linhas deve-se informar o fim da linha usando [/th] ou [/]