ForumCommunity

Como e onde criar a tabela
Para criar uma tabela, com grafismo igual à skin que se está a usar, basta aceder ao Paniel administrativo, e aí escolher a opção Gestão código HTML > Gerador de tabelas com grafismo igaul ao do fórum. (encontra-se em cima, antes da caixa, é o terceiro link)
Basta especificar o número de linhas e de colunas pretendido, se se deseja ou não espaço para legendas para as colunas e o tipo de alinhamento do texto, e este [tool] cria o código HTML da tabela a inserir na caixa pretendida de Gestão código HTML.

Como modificar a tabela
O código fornecido pelo gerador apresenta basicamente três partes: a parte em azul e a parte em verde devem estar sempre presentes, na íntegra, ao invés a parte em vermelho diz respeito aos conteúdos da nossa tabela, e varia consoante os parâmetros estipulados.


O título
Para atribuir um título à vossa tabela basta modificar a palavra TÍTULO a meio da parte em azul. Se não se quiser atribuir um título à tabela é aconselhável inserir   no final para evitar possíveis erros de visualização.
Se quiserem mudar a cor ou o estilo do título, como estamos a trabalhar em HTML, é conveniente consultar a respectiva opção no wiki.

Os conteúdos
Para inserir os conteúdos na tabela é preciso modificar a palavra COLUNA ? (sendo que ? indica o número da coluna) substituindo-a com o texto escolhido.

ATENÇÃO!: em HTML as linhas são indicadas com o tag <tr> e as colunas com <td>, convém lembrar-se que <tr> inclui sempre <td> e que o último tag aberto deve ser obrigatoriamente o primeiro a ser fechado, e a seguir todos os outros em sucessão.
O que quer dizer fechar um tag? Significa reescrever o tag colocando um slash ( / ) depois do parênteses angular de abertura ( < )
Portanto respeito ao que foi dito en cima a definição correcta è só esta: <tr> <td> .. </td> </tr>

Obviamente no interior da linha podem ser incluídas mais colunas, repetindo os tag <td> .. </td> depois da última coluna.
Exemplo: <tr> <td> coluna 1 </td> <td> coluna 2 </td> </tr>

Fazer o mesmo no caso de se pretender que a tabela apresente mais linhas, com efeito depois do tag de fechamento: </tr> podemos encontrar outros 'blocos' que indicam as linhas.
Exemplo:
<tr> <td> coluna 1 linha 1 </td> <td> coluna 2 linha 1 </td> </tr>
<tr> <td> coluna 1 linha 2 </td> <td> coluna 2 linha 2 </td> </tr>

ATENÇÃO!: para fazer com que uma coluna se estenda por mais colunas não basta inserir um único <td> .. </td> é preciso adicionar no seu interior o atributo colspan.
Este atributo apresenta a seguinte escrita: <td colspan="?" > .. </td> sendo que '?' deve ser substituído com o número di colunas que pretendemos que apareçam numa única linha.
Exemplo 1:


Código:


Exemplo 2:




Caso queiramos unir mais linhas, o atributo a usar é rowspan e funciona de maneira análoga ao anterior, inserindo sempre no interior da coluna, mas neste caso eliminando a coluna 'a mais' na linha de baixo.
Exemplo 1:


Código:

Exemplo 2:


Código:


As legendas
As legendas inseridas pelo gerador aparecem somente por cima da primeira fila de colunas, qualquer que seja o número inserido.
Caso seja necessário adicionar legendas também nas colunas por baixo, o código a usar é o seguinte, devendo o mesmo ser inserido antes do bloco da linha:

ATENÇÃO!: não esquecer de inserir tantas colunas de legenda quantas as colunas da tabela. De se pretender estender uma legenda por mais colunas usar o atributo colspan.

Exemplo 1:


Código:

Exemplo 2:


Código:


Definir a altura ou a largura das células
Basta inserir os parâmetros: height="??" (para a altura) e width="??" (para a largura) no interior da coluna. Em lugar de ?? pode-se inserir quer medidas em pixel quer em percentagem. Visto que a comunity utiliza templates fluídos é aconselhável usar valores em percentagem para a largura. Não esquecer porém que a soma dos valores deve equivaler a 100%.
Exemplo:


Antevisão:


Código:


Inserir um fundo personalizado
Para inserir um fundo personalizado na vossa tabela, devem utilizar o tag table antes de <tr tilte="LINHA1"> que se apresenta assim:

No interior do atributo style, No interior do atributo: ;background-image:url(http://..); sendo que em lugar de http://.. deve ser inserido o URL da vossa imagem.
Além disso devem retirar class="aa" e class="ww" das colunas da vossa tabela, obtendo algo deste tipo:


Exemplo:


Código:


Inserir uma scrollbar
Para inserir uma scrollbar dentro de uma célula, basta inserir logo a seguir <td class="??"> (sendo que em lugar de ?? poderão encontrar aa ou ww) este código:

Se quiserem variar a altura, basta aumentar ou diminuir o valor: 100px.


Link úteis

• Manual sobre os principais tag HTML