Formatar tabela HTML: Modelo para molduras, colunas sem molduras

Formatação de tabelas HTML – Hoje em dia uma pequena base da prática. Muitos clientes queriam criar os seus próprios textos com os seus empregados no WordPress. Para assegurar que o texto é optimizado para motores de busca, são acrescentadas várias pequenas características. Estas podem ser fotos da biblioteca de meios de comunicação, por exemplo, mas também vídeos do Youtube incorporados. A simples inserção de tabelas com copiar & colar envolve muitos trechos de HTML que não quer no seu próprio sistema de gestão de conteúdos. Hoje, vejamos um exemplo de uma simples tabela HTML que qualquer pessoa pode gerar e modificar por si própria.

Problema: A simples cópia de tabelas HTML é imunda

É importante para o pessoal das empresas não copiar tabelas, caso contrário teremos muito “lixo” no nosso código HTML, tal como descrito. O código HTML não é visível na área “visual” do editor. Para o editar, tem de clicar em “Texto” no Editor WordPress. Quando o código é simplesmente copiado, são necessários pequenos trechos com ele que não queremos. Aqui está um exemplo directo da prática:

Exemplo – Mau HTML de uma tabela

Ainda há aqui muitas coisas copiadas que não se podem ver:

<th class=”headerSort” tabindex=”0″ title=”Sort ascending” role=”columnheader button”>No.</th>
<th class=”headerSort” tabindex=”0″ title=”Sort ascending” role=”columnheader button”>District</th>.
<th class=”headerSort” tabindex=”0″ title=”Sort Ascending” role=”columnheader button”>Area</th>

Assim, vemos que algumas coisas são tiradas por copiar & colar.

Exemplo – bom HTML de uma tabela

É assim que ficaria limpo:

<th>No.</th>
<th>District</th>
<a>Área</th>

Solução: Modelo de tabela HTML

É preciso usar um pouco de HTML ou conhecê-lo. É melhor guardá-lo brevemente e depois copiá-lo ou editá-lo:

• Dica1 : <tabela> e <corpo> estão apenas no início </tabela> </corpo> apenas no fim
• Dica 2: Utilize <th> apenas na primeira linha e feche-a novamente (isto significa “manchete da tabela”).
• Dica 3: <tr> abre uma fila e </tr> fecha-a (tr é chamado de “Fila de Mesa”)
• Dica 4: <td> abre um valor ou uma caixa e </td> fecha-o (td significa “Dados da Tabela”)

Aqui está uma tabela com 3 colunas e 3 filas:

<tabela>
<corpo>
<tr>
<a>Chefe 1</th>
<a>Chefe 2</th>
<a>Cabeceira 3</th>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
</tr>
</corpo>
</tabela>

Este é o aspecto da mesa acabada:

Rubrica 1	Rubrica 2	Rubrica 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3

Outro exemplo com 2 colunas e 2 filas:

<tabela>
<corpo>
<tr>
<a>Chefe 1</th>
<a>Chefe 2</th>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
</tr>
</corpo>
</tabela>

Outro exemplo com 4 colunas e 5 filas

<tabela>
<corpo>
<tr>
<a>Chefe 1</th>
<a>Chefe 2</th>
<a>Cabeceira 3</th>
<a>Cabeçalho 4</th>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr><</corpo>
</tabela>

Adicionar mais colunas e filas

Pode obter mais filas iniciando ou fechando uma nova “Fila de Mesa” dentro da sua “Mesa” <tabela>…</tabela>. Isto parece-se com isto:

<tr>
…
</td>

Dependendo do número de colunas, os “Dados da Tabela” devem então ser inseridos.

<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>