scientific electronic library online manual de ... · nÃo copia a formatação correta, ... para...

SciELO - Scientific Electronic Library Online

FAPESP - CNPq – BIREME - FapUNIFESP

Rua Onze de Junho, 269 – CEP 04041-050 - São Paulo-SP – Brasil. Tel.: 55-11-5083-3639 www.scielo.org | www.scielo.br

Scientific Electronic Library Online

Manual de Codificação de Tabelas para

xHtml

Projeto PMC

São Paulo

Novembro 2013


FAPESP - CNPq - FapUNIFESP - BIREME


2

INTRODUÇÃO

Este manual tem o objetivo de mostrar passo a passo como codificar

as tabelas ao invés de inseri-las como imagens, para que possa atender as normas do projeto PMC e suas formatações específicas.

Elaborado por Gustavo Lima da Silva em seis de março de 2012.

1. MODELO DE CONVERSÃO

A conversão das tabelas deve ser feita com base nas informações do pdf, seguindo a mesma estrutura desde o título ao corpo da tabela.

Há um layout pronto de tabela para auxiliar na conversão da tabela

(Vide Apêndice), que deve ser aberta usando o Dreamweaver CS5, onde será estruturada a tabela para que fique igual a do pdf e seja feita a

inserção dos dados retirados do pdf. Segue na figura o modelo da tabela:

Figura 1 - Layout da Tabela

A tabela é dividida em duas partes, o cabeçalho (representado pela

tag <thead>) e pelo corpo (representado pela tag <tbody>). Essas tags fazem com que a tabela fique com as separações necessárias nas tabelas e

com o atributo style, para que as divisões fiquem de acordo com o PDF. Na Figura 2 podemos ver o resultado da tabela no navegador:

Figura 2 – Layout de Tabela no Browser




3

Cada campo deve ser substituído pelo seu respectivo nome:

Cabeçalho e Dados da tabela. Cada linha é representada pela tag <TR>, como mostra a figura a seguir:

Figura 3 – Código da Tabela.

Observe que o conteúdo da linha da tabela está dentro da tag <TR>, e dentro da mesma que são inseridas as tags <TD> (Dados) e <TH> (Cabeçalho). Lembrando que a tag <TD> deve ser usada no corpo da tabela

e a tag <TH> deve ser usada apenas nos títulos.

2. CONVERTENDO A TABELA

Há dois métodos diferentes para a conversão das tabelas. O segundo método é mais prático, porém não é possível ser usado

em todas as tabelas.

2.1 PRIMEIRO MÉTODO

A princípio deve ser criada uma pasta com o nome “tab” dentro da pasta “img” na revista que você estará convertendo as tabelas.

Neste caso, o exemplo usado para a conversão será a tabela a

seguir:

Figura 4 – Tabela de exemplo.




4

O primeiro passo é abrir o layout pronto da tabela usando o Dreamweaver CS5, já citado anteriormente, localizado em

“Y:\SciELO_team\XML_PMC\Conversao\Tabelas\Modelo-Tabela.html”.

Com o layout aberto, o próximo passo é deixar o layout de tabela igual ao que se deseja converter, nesse caso a tabela da figura 4 citada anteriormente.

Primeiramente deve-se igualar o número de colunas e linhas, o layout pronto tem quatro colunas e três linhas já a tabela que será convertida tem

sete colunas e quatro linhas. Dessa forma, selecione a tabela clicando em qualquer borda para ver as propriedades da tabela na parte inferior da página. Vide Figura 5:

Figura 5 – Tabela selecionada

Com a tabela selecionada é possível ver a quantidade de linhas e

colunas que há na tabela, mostrado na parte inferior da Figura 5. Para alterar o número de colunas de quatro para esete e o número de

linhas de três para quatro, vá às propriedades da tabela, como mostra a Figura 6. Após a alteração no número de colunas e linhas a tabela ficará como na Figura 7.




5

Figura 6 – Alteração do número de colunas

Figura 7 – Tabela alterada

Com o número de colunas e linhas igual a do PDF, o próximo passo é

a inserção do cabeçalho e do corpo da tabela. Para isso deve-se copiar o texto pelo PDF usando a Ferramenta Selecionar (padrão) e colar na tabela,

vide Figura 8:

Figura 8 – Copiando e Colando dados do cabeçalho.




6

Copie todos os dados do cabeçalho e do corpo e certifique-se

sempre de que os dados copiados estão completos e iguais aos do PDF. Os espaços em branco no PDF deverão continuar em branco na

tabela, para que as células fiquem de acordo com suas respectivas colunas. Neste exemplo a tabela deverá ficar assim:

Figura 9 – Tabela com todos os dados.

Nota: Repare que na última célula do cabeçalho onde se encontra “P-value” a letra P está em itálico, ao copiar do pdf e colar na tabela, o pdf

NÃO COPIA a formatação correta, então o texto deve ser colocado em itálico manualmente. Para deixar em itálico basta selecionar o texto e usar a tecla de atalho Ctrl+I.

O próximo passo é deixar as células que estão sem conteúdo em

branco também no código fonte, pois esses espaços que estão em branco não estão completamente limpos. No código essas células ficam como: <td align=”center”> </td>(Se a célula não estiver centralizada o código

será: <td> <td>). Nesse caso, a informação de ‘ ’ deve ser removida, basta clicar no código e deletá-lo para que fique apenas como:

<td align=”center”></td>.Segue o exemplo a seguir:




7

Figura 10 – Limpando o código.




8

Depois que todas as células estiverem sem o código “ ”

(espaço em branco), a tabela estará quase pronta. Segue a visualização da tabela no Navegador:

Figura 11 – Visualização no Navegador

O último passo em na tabela é ajustar a distância entre as colunas,

pois elas ficam “grudadas” entre si, o que não ocorre no pdf. Primeiramente, vá ao código e visualize a tag <colgroup> que se

encontra logo no início da tabela após a tag <table>.

Figura 12 – Tag <colgroup>.

Em “width” coloque em porcentagem a distância que se deseja entre

as colunas. Coloque o número de tags <col /> (a tag <col /> representa cada coluna da tabela) igual ao número de colunas que a tabela possui, para que

a formatação se aplique a todas as colunas, nesse caso, há sete colunas, portanto haverá sete tags como segue o exemplo a seguir:

Figura 13 – Tags <col /> NOTA: Ao invés de repetir sete vezes a tag <col /> também pode ser

colocado o atributo “span” dentro da tag com o número de colunas da tabela. Nesse caso seria <col span=”7” />




9

Para finalizar, coloque uma porcentagem em “width” para afastar as

colunas e assim o conteúdo não fica “colado”e. Esse número de porcentagem pode ser relativo, neste caso será colocado 14%, pois 14%

multiplicado por 7 colunas chega próximo a 100% que representa a tabela inteira. Ficará como na figura seguinte:

Figura 14 – Porcentagem nas colunas

A tabela estará completa e aparentemente não terá sofrido efeito

algum, pois a alteração só é visualizada no navegador. Para visualização no navegador, basta pressionar F12 no Dreamweaver e a tabela ficará assim:

Figura 15 – Tabela completa

2.2 SEGUNDO MÉTODO Este segundo método consiste em fazermos o cabeçalho da mesma

maneira que no método anterior, porém o corpo da tabela será extraído de uma só vez.

Esse método para extrair o corpo da tabela é mais rápido e tem garantia dos dados completos, porém ele não pode ser aplicado em todas as ocasiões, só é possível extrair de tabelas que não tenham espaços em

branco. No exemplo anterior não seria possível utilizar esse método corretamente, pois havia células vazias.

A figura a seguir mostra a tabela que será usada como exemplo:




10

Figura 16 – Tabela do segundo método Como podemos ver na Figura 16, a tabela é muito extensa o que

levaria tempo e trabalho ao copiar dado por dado para colar na tabela a ser criada.

Para fazer essa tabela será necessário que o Microsoft Word esteja aberto. Abra o layout da tabela normalmente localizado em “Y:\SciELO_team\XML_PMC\Conversao\Tabelas\Modelo-

Tabela.html” e faça o cabeçalho da mesma forma que o método anterior igualando o número de colunas, porém no corpo deixe apenas uma linha,

como mostra a figura abaixo:

Figura 17 – Cabeçalho pronto




11

Agora selecione diretamente no PDF todo o corpo da tabela, usando a Ferramenta Seleção (Figura 18) e cole no Word para que seja criada uma

tabela automaticamente (Figura 19).

Figura 18 – Corpo da tabela selecionado




12

Figura 19 – Tabela colada no Word

Agora que o Word gerou uma tabela, copie do Word e cole no DreamWeaver.

ATENÇÃO: Não é possível copiar do pdf e colar diretamente no

DreamWeaver. (Não funciona!) O próximo passo é selecionar a tabela do Word e copiar, mas para

colar no DreamWeaver será usado o “Colar Especial”. A figura a seguir mostra a tabela selecionada no Word:




13

Figura 20 – Tabela selecionada no Word

Depois de copiar cole no DreamWeaver com o “colar especial”, o qual

pode ser clicado com o botão direito do mouse e ir na opção “Colar

Especial” ou usando o atalho no teclado “Ctrl+Shift+V”. Marque a opção “Texto com estrutura e formatação básica (negrito, itálico)”, assim o código

ficará mais limpo.




14

Figura 21 – Colar Especial

NOTA: A tabela colada não deve substituir a primeira tabela com o

cabeçalho pronto, pode ser colada abaixo ou em um novo documento em branco, pois no fim essa tabela que foi colada será deletada.

Depois que a tabela for colada no DreamWeaver, teremos todos os

dados necessários, porém essa tabela contém tags e atributos que não serão usados.

O próximo passo é limpar essa tabela, para isso, use a ferramenta

“Localizar e substituir”. Nessa tabela deve-se remover do código a tag <p>, e os atributos

“width” e “valign”. A ordem de remoção desses atributos não importa. Neste caso comece pela tag <p>. Use o atalho Ctrl+F e vá à opção “Tag Específica” (Figura 22) e em seguida remova todas as tags p dentro da tag

table (Figura 23).




15

Figura 22 – Localizando Tag Específica

Figura 23 – Configurando Localizar e Substituir para remover <p>

NOTA: Se a opção “Dentro da tag” não estiver aparecendo basta clicar no botão à esquerda com o símbolo “+”.

Agora clique no botão à direita “Substituir tudo”. Use o mesmo comando para remover o atributo “valign”. Remova

valign em “qualquer tag”, como mostra a figura a seguir:




16

Figura 24 – Configurando Localizar e Substituir para remover valign

Para remover o atributo width basta selecionar a tabela clicando em

qualquer borda, ir às propriedades da tabela e clicar o botão “Limpar largura das colunas”. Segue o exemplo na figura a seguir.

Figura 25 – Limpando atributo width

O próximo passo é colocar esse corpo dentro da tabela correta dentro da tag <tbody>. Deve ser selecionado somente as linhas, copiá-las e colá-

las na tabela correta. Ao invés de selecionar a tabela clicando pela borda, selecione clicando e arrastando pelo lado esquerdo, para que a tag <table>

não seja copiada junto, como mostra a figura a seguir.




17

Figura 26 – Copiando as linhas da tabela Agora com as linhas copiadas vá até a tabela correta na linha

reservada para o corpo da tabela e cole. A tabela ficará como na figura a seguir.

Figura 27 – Linhas coladas no corpo da tabela




18

A última linha deve ser excluída, pois ela não pertence à tabela. Para

isso use o atalho Ctrl+Shif+m. A tabela que foi copiada do Word não é mais necessária e pode ser

apagada. O último passo é alinhar a tabela conforme o pdf. Para isso, basta

selecionar as colunas ou células que se deseja alinhar, depois ir às propriedades que aparecerão na parte inferior e selecionar o alinhamento desejado como mostra a figura a seguir.

Figura 28 – Alinhando os dados Agora basta configurar a tag <col> como no método anterior e sua

tabela estará completa.

2.3 REFERÊNCIAS DE NOTAS DA TABELA

Há tabelas que tem notas de rodapé com referências na tabela onde devem ser criados links para as âncoras seguindo um padrão. As referências

devem ser consultadas no pdf. Na figura a seguir temos um exemplo de referência e nota na tabela:

Figura 29 – Tabela com nota e referência




19

Temos cinco referências. O link deve ser criado seguindo o padrão:

“# + tfn (Table Foot Note) + número da nota + ‘-‘ (hífen) + t (Table) +

número da tabela”

Neste caso a referência 1 fica com o link:

#tfn1-t1

Pois é a primeira referência da tabela 1.

Para colocar o link basta selecionar a nota e ir às propriedades que aparecerão na parte inferior e colocar o link desejado como mostra na figura a seguir.

Figura 30 – Colocando Link

2.4 SALVANDO A TABELA

Depois que a tabela estiver pronta, o último passo é salvá-la com a extensão “.txt” e seguir o padrão de nomeação.

Para salvar em “.txt” selecione a tabela com um clique em qualquer borda da tabela para que ela fique selecionada e então altere a visualização para o código, em seguida copie o código que foi gerado. Segue o exemplo

na Figura 31:




20

Figura 31 – Copiando o código

Após copiar o código, ele deverá ser colado no bloco de notas e a seguir ser salvo na pasta “tab”, que foi criada anteriormente dentro da

pasta “img” com a extensão “.txt” e seguir a nomeação padrão que é usada em imagens usando: “número do artigo + número da tabela”. Neste

exemplo fica “a10tab05.txt”. Segue o exemplo a seguir:




21

Figura 32 – Salvando a imagem

3. CASO DE CABEÇALHO E CORPOS DA TABELA

Os modelos de tabela não serão sempre os mesmos, portanto há casos em que o modelo da tabela pode ser um pouco diferente. O responsável pela conversão deve sempre garantir que a informação da

tabela convertida esteja igual a do pdf, inclusive seus modelos. Então serão mostrados alguns métodos para fazer com que as tabelas fiquem iguais as

do pdf.

3.1.1 CABEÇALHO DA TABELA EXTENSO

Há casos em que os cabeçalhos serão mais extensos que o normal, nesse caso é necessário a alteração do layout, a figura 33 mostra a tabela que será usada como exemplo.




22

Figura 33 – Cabeçalho com quebras de linha

Neste exemplo temos um cabeçalho com mais linhas e uma divisão a mais do que o caso mostrado como exemplo anteriormente. Abra o seu

modelo de tabela normalmente (“Y:\SciELO_team\XML_PMC\Conversao\Tabelas\Modelo-Tabela.html”), comece deixando a estrutura igual à desejada.

Comece inserindo o número de colunas normalmente, neste caso fica cinco colunas como mostra a figura a seguir:

Figura 34 – Colunas do cabeçalho

O Próximo passo para deixar a estrutura igual à desejada, é inserir as linhas. Em nosso cabeçalho temos quatro linhas, mas nesse caso as propriedades da tabela não serão modificadas, pois mesmo que depois as

tags sejam alteradas de <TD> para <TH>, ficariam fora da tag <thead>. Portanto devem ser inseridas manualmente.

Para isso deve-se clicar em qualquer célula da linha do cabeçalho e pressionar o atalho no teclado Ctrl+M para que seja inserida a linha.

Neste caso são inseridas mais três. A tabela ficará da seguinte

maneira:

Figura 35 – Linhas do cabeçalho




23

O próximo passo será a inserção dos dados do cabeçalho. Segue na

figura a tabela com os dados inseridos:

Figura 36 – Cabeçalho com dados

Agora que os dados foram colocados o próximo passo será mesclar as

células que forem necessárias, nesse caso só precisará mesclar um conteúdo.

Para mesclar as células deve-se seguir os seguintes passos:

Selecionar as células desejadas Para isso é necessário segurar a tecla Ctrl e clicar nas células desejadas. A tabela deverá ficar assim:

Figura 37 – Seleção das células

Mesclar as células selecionadas Com as células selecionadas, basta usar o atalho do teclado Ctrl+Alt+M. A tabela ficará assim:




24

Figura 38 – Células mescladas

O último detalhe para que o cabeçalho fique correto será inserir a

borda abaixo da célula para que seja feita a divisão no cabeçalho. Para isso coloque um atributo dentro da tag, o atributo que deve ser

inserirido será style="border-bottom: thin solid; border-color: #000000"

Clique na célula para remeter ao código fonte (Figura 39), após isso

coloque o atributo style="border-bottom: thin solid; border-color: #000000" (Figura 40)

Figura 39 – Indo ao código fonte




25

Figura 40 – Inserindo atributo style Nota: Tome muito cuidado para que o atributo que será colado não fique

junto com o nome anterior, caso isso aconteça o atributo não funcionará.

Esse atributo acrescenta uma linha abaixo da célula, fazendo assim a divisão correta. Dessa forma, o cabeçalho está finalizado e seguem-se normalmente

os procedimentos restantes do corpo da página.

3.1.2 CABEÇALHO COM FUNDO

Há cabeçalhos que possuem cor de fundo cinza, conforme a tabela mostrada na figura a seguir:




26

Figura 41 – Cabeçalho com cor de fundo

Para alcançar esse resultado, deve ser inserido na tag <TR> (que

representa a linha) o seguinte atributo:

style="background: #D3D3D3" A figura a seguir mostra a linha com o atributo inserido

Figura 42 – Inserindo cor de fundo no cabeçalho

3.2 CORPOS DA PÁGINA

Da mesma forma que os cabeçalhos, a estrutura das tabelas podem

ter algumas variedades em suas estruturas que devem ser atendidas.

3.2.1 Subtítulos

Esta tabela é dividida em subtítulos que devem estar com a tag de

título <th> em vez de <td>. Na figura a seguir há o modelo do pdf.




27

Figura 43 – Tabela com subtítulos

Para alterar a célula de <TD> para <TH>, basta clicar na célula desejada e marcar a opção “Cabeçalho” que aparece nas propriedades, como mostra a figura abaixo:

Figura 44 – Subtítulos

Para finalizar, a tag deverá estar com o atributo a seguir para que sejam inseridas as linhas acima e abaixo.

style="border-color: #000000; border-bottom: thin solid; border-

top: thin solid" Atenção: Tome o mesmo cuidado que se tem com os cabeçalhos

quando são inseridos os atributos.




28

3.2.2 Espaço em branco

Exemplo:

Figura 45 - Tabela com espaço em branco Observe que esta tabela está dividida, mas não foi dividida com

subtítulos e sim com espaçamento no começo das linhas. Para isso, deixe uma célula em branco para representar esse espaço

e a célula que não tem o espaçamento deverá estar mesclada em duas colunas. A tabela deverá ter uma coluna a mais, neste caso, 14 colunas ao

invés de 13. Esta tabela é estruturada da seguinte forma:




29

Figura 46 - Estrutura da tabela com espaçamento

Ao inserir a propriedade width na tag <colgroup> com esse modelo

de tabela, a primeira coluna (Em branco) ficará distante da segunda coluna. Para que o erro seja corrigido, deverá ser especificada a porcentagem no “width” em <colgroup>, porém no primeiro <col /> deve ser inserido

width=1%, como mostra na figura a seguir.

Figura 47 – Alterando “width” da segunda coluna




30

Apêndice Layout de tabelas para auxílio na codificação:

<table frame="hsides" rules="groups"> <colgroup width="%">

<col /> <col />

<col /> <col /> <col />

<col /> <col />

<col /> <col /> <col />

<col /> <col />

</colgroup> <thead style="border-bottom: thin solid; border-top: thin solid; border-color: #000000">

<tr> <th align="center">Cabeçalho da Tabela</th>

<th align="center"> </th> <th align="center"> </th> <th align="center"> </th>

<th align="center"> </th> </tr>

<tr> <th align="center">Seg. Nivel Cabeçalho</th> <th align="center"> </th>

<th align="center"> </th> <th align="center"> </th>

<th align="center"> </th> </tr> </thead>

<tbody style="border-color: #000000; border-bottom: thin solid"> <tr>

<td>Dados da Tabela</td> <td align="center">Dados da Tabela</td> <td align="center">Dados da Tabela</td>

<td align="center">Dados da Tabela</td> <td align="center"> </td>

</tr> <tr>

<td> </td> <td align="center"> </td>




31

<td align="center"></td>

<td align="center">Dados da Tabela</td> <td align="center"> </td>

</tr> </tbody>

</table>

scientific electronic library online manual de ... · nÃo copia a formatação correta, ... para...

Documents